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


// pre-loading to cache, unfortunately requires some code duplication with CarouselConfig
imgSources = ["/images/carousel/ardell_home.jpg", "/images/carousel/belvada_2010.jpg", "/images/carousel/resort_collection_2010.jpg", "/images/carousel/summer_collection.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/summer_collection.jpg",
				   "/store/resort-10",
				   "Summer Collection",
				   "From Essie"),
		 new CarouselField("/images/carousel/ardell_home.jpg",
				   "/store/ardell-lashes",
				   "Ardell Lashes",
				   "Accentuate your lashes"),
		 new CarouselField("/images/carousel/belvada_2010.jpg",
				   "/store/belvada-cosmetics",
				   "Belvada Cosmetics",
				   "New at NailsByMail"),
		 new CarouselField("/images/carousel/resort_collection_2010.jpg",
				   "/store/resort-10",
				   "The Resort Collection",
				   "From Essie")];
};


//////////////////////
// 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;
};