if (typeof Cobalt == "undefined") var Cobalt = {};

/**
 * TODO:
 */
Cobalt.photoGallery = function(jqNode) {
	this.jqNode = jqNode; // Array of DOMObjects
	this.target = new Cobalt.photoGallery.target(jqNode.siblings("img")[0]);
	this.thumbnails = [];
	this._photoGallery();
};
Cobalt.photoGallery.prototype = {
	
	_photoGallery: function() {
		var my = this;
		this.jqNode.children("li").each( function() {
			my.thumbnails.push(new Cobalt.photoGallery.thumbnail(this, my.thumbnails.length));
		});		
		this.wireEventListeners();
		// first time don't use the setter -- don't want to invoke any animation
		this.target.current = this.thumbnails[0];
	},
	
	wireEventListeners: function() {
		
		var my = this;
		
		this.jqNode.hoverIntent(
			function() { /* over: do nothing */ },
			function() { 
				if (my.target.current.selected != true) my.target.current.animateOut();
				if (my.target.current.index != my.getLastSelectedThumbnail().index) my.reset();
			 }
		)
		
		this.jqNode.children("li").hoverIntent({
			interval: 200,
			over: function() {
				var index = this.attributes.getNamedItem("index").value;
				var prevThumb = my.target.current;
				var newThumb = my.thumbnails[index];
				if (newThumb === prevThumb) return;
				if (prevThumb.selected != true) prevThumb.animateOut();
				newThumb.animateIn();
				my.target.setCurrent(newThumb);
			},
			out: function() { /* do nothing */ }
		});	
			
		this.jqNode.children("li").click(
			function() {				
				var index = this.attributes.getNamedItem("index").value;
				my.thumbnails[index].setSelected(!my.thumbnails[index].selected);
				if (my.thumbnails[index].selected == false) my.reset();
				else if (my.thumbnails[index].selected == true && my.target.current.index != index) my.reset();
			}
		);
		
	},
	
	reset: function() {
		var lastSelected = this.getLastSelectedThumbnail();
		this.target.setCurrent(lastSelected);
	},
	
	getLastSelectedThumbnail: function() { // returns Cobalt.photoGallery.thumbnail
		for (i = this.thumbnails.length - 1; i >= 0; i--) {
			if (this.thumbnails[i].selected == true) {
				return this.thumbnails[i];
			}
		}
		return this.thumbnails[0];
	},
	
	getSelectedSwatches: function() {
		var arr = [];
		for (i = this.thumbnails.length - 1; i >= 0; i--) {
			if (this.thumbnails[i].selected == true) {
				arr.push(this.thumbnails[i]);
			}
		}
		return arr;
	}
	
};

/**
 * TODO:
 */
Cobalt.photoGallery.target = function(node) {
	this.node = node;		// DOMObject
	this.current = null;	// Cobalt.photoGallery.thumbnail	
};
Cobalt.photoGallery.target.prototype = {
	
	animateIn: function(callback) {
		callback = (typeof callback == "function") ? callback : function(){};
		jQuery(this.node).animate({ opacity: 1 }, 500, "linear", callback);
	},
	
	animateOut: function(callback) {
		callback = (typeof callback == "function") ? callback : function(){};
		jQuery(this.node).animate({ opacity: 0 }, 350, "linear", callback);
	},
	
	setCurrent: function(thumbnail) { // returns Cobalt.photoGallery.thumbnail
		var my = this;
		var thumbnail = thumbnail;
		this.animateOut(function() { my.current = thumbnail; my.node.src = thumbnail.src; my.animateIn(); });
		return thumbnail;
	}
	
};

/**
 * TODO:
 */
Cobalt.photoGallery.thumbnail = function(node, index) {
	this.node = node // DOMObject
	this.overlay = '<div class="outerBorder"><div class="innerBorder">&nbsp;</div></div>';
	this.index = index // int
	this.src = "";
	this.selected = false;
	this.title = "";
	this._thumbnail();
};
Cobalt.photoGallery.thumbnail.prototype = {
	
	_thumbnail: function() {
		jQuery(this.node).attr("index", this.index);
		this.src = jQuery(this.node).children(".bigImg").eq(0).attr("src");
		this.title = jQuery(this.node).children(".bigImg").eq(0).attr("alt");
		jQuery(this.overlay).appendTo(this.node);
		this.overlay = jQuery(this.node).children(".outerBorder")[0];
	},
	
	animateIn: function(callback) {
		callback = (typeof callback == "function") ? callback : function(){};
		jQuery(this.overlay).animate({opacity: .95}, 475, "linear", callback);
	},
	
	animateOut: function(callback) {
		callback = (typeof callback == "function") ? callback : function(){};
		jQuery(this.overlay).animate({opacity: 0}, 550, "linear", callback);
	},
	
	animateSelected: function(callback) {
		callback = (typeof callback == "function") ? callback : function(){};
		jQuery(this.overlay).animate({opacity: 0}, 50, "linear", function() {
			jQuery(this).animate({opacity: .95}, 50, "linear", function() {
				jQuery(this).animate({opacity: 0}, 50, "linear", function() {
					jQuery(this).animate({opacity: .95}, 50, "linear", callback);
				});
			});
		});
	},
	
	setSelected: function(bool) { // returns Boolean
		this.selected = bool;
		if (this.selected == true) this.animateSelected();
		else this.animateOut();
		return bool;
	}	
	
};