//////////////////////
// GLOBAL
//////////////////////


// pre-loading to cache, unfortunately requires some code duplication with CarouselConfig
imgSources = ["/images/carousel/fall_collection_2010.jpg", "/images/carousel/belvada_2010.jpg", "/images/carousel/resort_collection_2010.jpg", "/images/carousel/future_dreams.jpg"];

for(var i = 0; i < imgSources.length; i ++) {
  var src = imgSources[i];;
  var image = new Image();
  image.src = src;
};


//////////////////////
// CarouselConfig
//////////////////////

CarouselConfig = function()
{
  this.sleepTime = 5000; // milliseconds
  this.fields = [new CarouselField("/images/carousel/winterCollection2.jpg",
						          "/store/winter-2011",
						          "The Winter Collection",
						          "From Essie"),
				  new CarouselField("/images/carousel/diveBar.jpg",
                                   "/store/dive-bar-2011",
                                   "The Dive Bar Collection",
                                   "From Essie"),               
                 new CarouselField("/images/carousel/seche-2011.jpg",
                                   "/store/sechesu",
                                   "The Seche Collection",
                                   "From Seche"),								  
               
                 new CarouselField("/images/carousel/ardell-2011.jpg",
                                   "/store/ardell-lashes",
                                   "Ardell Lashes",
                                   "From Ardell")];
};

//////////////////////
// Carousel
//////////////////////

Carousel = function(config)
{
  this.config_ = config;
  this.fieldItems_ = new Array(this.config_.fields.length);
  this.currentField_ = 0;
  this.setup_();
  this.startCarousel_();
  this.listen_();
};

/**
 * Build DOM structure
 * Easiest to view dynamic DOM and .css to see how it works
 */
Carousel.prototype.setup_ = function()
{
  this.div_ = document.createElement("div");
  this.div_.className = "carousel";

  this.imageLink_ = document.getElementById("carouselImageLink");

  var linkPane = document.getElementById("carouselLinkPane");
  var listItems = linkPane.getElementsByTagName("li");

  for(var i = 0; i < listItems.length; i ++) {
    var carouselLink = listItems[i].getElementsByTagName("a")[0];
    this.fieldItems_[i] = listItems[i];
    this.fieldItems_[i].number = i;
    this.fieldItems_[i].link = carouselLink;
  }
};

/**
 * Initial start
 */
Carousel.prototype.startCarousel_ = function()
{
  this.showCurrentImage_();
  this.highlightCurrentField_();
  this.startCycle();
};

/**
 * Start spinning
 */
Carousel.prototype.startCycle = function()
{
  var self = this;
  this.interval_ = window.setInterval(
    function() {
      self.cycle_();
    }, this.config_.sleepTime);
};

/**
 * Stop spinning
 */
Carousel.prototype.stopCycle = function()
{
  window.clearInterval(this.interval_);
};

/**
 * Spin - update image and highlighted field
 */
Carousel.prototype.cycle_ = function()
{
  this.clearCurrentHighlight_();
  this.currentField_ = (this.currentField_ + 1) % this.config_.fields.length;
  this.showCurrentImage_();
  this.highlightCurrentField_();
};

Carousel.prototype.highlightCurrentField_ = function()
{
  this.fieldItems_[this.currentField_].link.className = "selected";
};

Carousel.prototype.clearCurrentHighlight_ = function(number)
{
  this.fieldItems_[this.currentField_].link.className = "";
};

Carousel.prototype.showCurrentImage_ = function()
{
  var field = this.config_.fields[this.currentField_];
  this.setImage_(field.imgSrc, field.href);
};

Carousel.prototype.setImage_ = function(newSrc, newHref)
{
  this.imageLink_.style.backgroundImage = "url(" + newSrc + ")";
  this.imageLink_.setAttribute("href", newHref);
};

/**
 * Add somewhere in the DOM
 */
Carousel.prototype.appendTo = function(node)
{
  node.appendChild(this.div_);
};

/**
 * Listen to onmouseover and onmouse out for the fields
 */
Carousel.prototype.listen_ = function()
{
  for(var i = 0; i < this.fieldItems_.length; i ++) {
    var field = this.fieldItems_[i];

    var self = this;
    field.onmouseover = function() {
      self.stopCycle();
      self.clearCurrentHighlight_();
      self.currentField_ = this.number;
      self.showCurrentImage_();
      self.highlightCurrentField_();
      this.link.className = "selected";
    }
    field.onmouseout = function() {
      self.startCycle();
    }
  }
};


//////////////////////
// CarouselField
//////////////////////

CarouselField = function(imgSrc, href, title, subTitle)
{
  this.imgSrc = imgSrc;
  this.href = href;
  this.title = title;
  this.subTitle = subTitle;
};