/**
 * Rotator takes a series of three image/thumbnail/link references from a backend server
 * and rotates through the images one at a time.  If the user moves over a thumbnail, the 
 * image rotation is halted and the image for that thumbnail appears.  When the user moves
 * off the thumbnail, the image rotation begins again.
 * 
 * Clicking on the image or the thumbnail takes the user to the link associated with that 
 * item.
 * 
 * @author Greg
 */
function Rotator(options){
	this.name = options.name;
	this.selector = "#" + this.name;
	this.container = options.container;
	
	if (this.name && this.container) {
		this.init();
	}
}
	
/**
 * Sets up the entire control with a single function call
 * 
 * @param {Object} name the name of the control, should be unique
 * @param {Object} container the id of the container that will host the control
 */
Rotator.startRotator = function(name, container) {
	var rotator = new Rotator({name: name, container: container});
	rotator.load();
};

/**
 * Set up the structure for the module and install it onto the
 */
Rotator.prototype.init = function() {
	jQuery("#" + this.container).appendObject({
	 	tag: "div",
		id: this.name,
		cls: "image_rotator",
        children: [
		{
			tag: "a",
			cls: "link",
			id: "link",
			children: [{
				tag: "div",
				id: "image_pane",
				cls: "image_pane",
				children: [{
					tag: "div",
					id: "image1",
					cls: "image"
				}, {
					tag: "div",
					id: "image2",
					cls: "image"
				}, {
					tag: "div",
					id: "image3",
					cls: "image"
				}]
			}]
		}, {
            tag: "div",
            id: "thumb_pane",
			cls: "thumb_pane",
			children: [
				{
					tag: "div",
					id: "thumb1",
					cls: "thumb",
					children: [{
						tag: "a",
						cls: "link",
						children: [{
							tag: "img",
							id: "thumb1_active",
							cls: "thumb_image"
						}]
					}]
				},{
					tag: "div",
					id: "thumb2",
					cls: "thumb",
					children: [{
						tag: "a",
						cls: "link",
						children: [{
							tag: "img",
							id: "thumb2_active",
							cls: "thumb_image"
						}]
					}]
				},{
					tag: "div",
					id: "thumb3",
					cls: "thumb",
					children: [{
						tag: "a",
						cls: "link",
						children: [{
							tag: "img",
							id: "thumb3_active",
							cls: "thumb_image"
						}]
					}]
				}
			]
        }]
	 });
	 
	//jQuery(this.selector + " #image_pane").wrap("<a id='link' class='link'>");
	//jQuery(this.selector + " #thumb1_active").wrap("<a id='link' class='link'>");
};

/**
 * Rotate through the images 1 at a time, using a slow fade transition.  This basically
 * fades everything out except the one that's current, and then fades the current one in.
 * That has no unwanted side-effects, but works correctly for a cyclic rotation as well as
 * an ad-hoc rotation such as when a user rolls into the thumbnail.
 */
Rotator.prototype.rotate = function() {
	jQuery(this.selector + " .link").removeAttr("href");
	
	switch(this.currentImage) {
		case 1:
			jQuery(this.selector + " #image2").fadeOut(1000);
			jQuery(this.selector + " #image3").fadeOut(1000);
			jQuery(this.selector + " #thumb2_active").fadeOut(1000);
			jQuery(this.selector + " #thumb3_active").fadeOut(1000);
			jQuery(this.selector + " #image1").fadeIn(1000);
			jQuery(this.selector + " #thumb1_active").fadeIn(1000);
			break;
		case 2:
			jQuery(this.selector + " #image1").fadeOut(1000);
			jQuery(this.selector + " #image3").fadeOut(1000);
			jQuery(this.selector + " #thumb1_active").fadeOut(1000);
			jQuery(this.selector + " #thumb3_active").fadeOut(1000);
			jQuery(this.selector + " #image2").fadeIn(1000);
			jQuery(this.selector + " #thumb2_active").fadeIn(1000);
			break;
		case 3:
			jQuery(this.selector + " #image1").fadeOut(1000);
			jQuery(this.selector + " #image2").fadeOut(1000);
			jQuery(this.selector + " #thumb1_active").fadeOut(1000);
			jQuery(this.selector + " #thumb2_active").fadeOut(1000);
			jQuery(this.selector + " #image3").fadeIn(1000);
			jQuery(this.selector + " #thumb3_active").fadeIn(1000);
			break;
	}

	if (this.data[this.currentImage - 1].link) {
		jQuery(this.selector + " .link").attr("href", obj.data[this.currentImage - 1].link);
	}
	
	if(++this.currentImage > 3) {
		this.currentImage = 1;
	}
};


/**
 * Fade the first image in and set up an interval to start rolling through the images.
 */
Rotator.prototype.startSlideshow = function() {
	obj = this;
	this.interval = setInterval(function() { Rotator.prototype.rotate.call(obj); }, 5000);
};

/**
 * Once the service has provided the images we need, load 'em up and start to rotate through them.
 * 
 * @param {Object} data
 */
Rotator.prototype.onLoadComplete = function(result) {
	this.data = result.data;
	
	jQuery(this.selector + " #image1").html(this.data[0].html);
	jQuery(this.selector + " #image1").css("background-image", "url(" + this.data[0].image + ")");
	jQuery(this.selector + " #thumb1_active").attr("src", this.data[0].active_thumb);
	jQuery(this.selector + " #thumb1").css("background-image", "url(" + this.data[0].inactive_thumb + ")");
    
	jQuery(this.selector + " #image2").html(this.data[1].html);
    jQuery(this.selector + " #image2").css("background-image", "url(" + this.data[1].image + ")");
	jQuery(this.selector + " #thumb2_active").attr("src", this.data[1].active_thumb);
	jQuery(this.selector + " #thumb2").css("background-image", "url(" + this.data[1].inactive_thumb + ")");
    
	jQuery(this.selector + " #image3").html(this.data[2].html);
    jQuery(this.selector + " #image3").css("background-image", "url(" + this.data[2].image + ")");
	jQuery(this.selector + " #thumb3_active").attr("src", this.data[2].active_thumb);
	jQuery(this.selector + " #thumb3").css("background-image", "url(" + this.data[2].inactive_thumb + ")");
   
	obj = this;
	jQuery(this.selector + " .image").hover(
		function() {
			clearInterval(obj.interval);
		},
		function() {
			obj.startSlideshow();
		}
	);
	
	jQuery(this.selector + " #thumb1").hover(
		function() {
			clearInterval(obj.interval);
			obj.currentImage = 1;
			obj.rotate();
		},
		function() {
			obj.startSlideshow();
		}
	);
	
	jQuery(this.selector + " #thumb2").hover(
		function() {
			clearInterval(obj.interval);
			obj.currentImage = 2;
			obj.rotate();
		},
		function() {
			obj.startSlideshow();
		}
	);
	
	jQuery(this.selector + " #thumb3").hover(
		function() {
			clearInterval(obj.interval);
			obj.currentImage = 3;
			obj.rotate();
		},
		function() {
			obj.startSlideshow();
		}
	);
	
	if (!this.currentImage) {
		this.currentImage = 1;
	}
	
	this.rotate();
    this.startSlideshow();
};

/**
 * Fetch the image data from the service
 */
Rotator.prototype.load = function() {
	var thisArg = this;
	
	jQuery.getJSON("services/getPromo.cfm", function(data) {
		Rotator.prototype.onLoadComplete.call(thisArg, data);
	});
};