(function() {
    var window = this, undefined, widget = window.jsx.widget;

    jsx.widget.ProductGallery = function(element) {
		var self = galleryInstance = this;
		element = $(element);
		this.element = element;
		this.animated = false;
		this.contentPanel = element.find("div.product-list");
		this.viewport = element.find("div.scroll-pane");
		this.panelList = element.find("div.product");
		this.productPanelList = [];
		this.currentPanelIndex = 0;
		this.controlPrevious = element.find('.controls .link-previous');
		this.controlNext = element.find('.controls .link-next');
		this.panelSpacing = 20;
		this.scrollInterval = 0;
		this.scrollIndex = 0;
		
		this.futurWidth = null;
		this.oldWidth = 0;
		this.animatingIndex = null;
		
		this.contentPanel.jquery_width = this.element.width;
		this.contentPanel.width = function (size) {
			if (size === undefined && self.futurWidth) {
				return self.futurWidth;
			} else {
				return this.jquery_width(size);
			}
		};
		this.contentPanel.oldWidth = function() {
			if (self.futurWidth) {
				return self.oldWidth;
			} else {
				return this.jquery_width();
			}
		}
		
		this.controlPrevious.click(function(event) {
			var panel, i;
			for (i = 0; i < galleryInstance.productPanelList.length; i++) {
				panel = galleryInstance.productPanelList[i];
				if (panel.element.hasClass('expanded')) {
					panel.collapse(false, false);
				}
			}
			galleryInstance.gotoPreviousPanel();
		}).hover(
			function(event) {
				$(this).addClass("hover");
			},
			function(event) {
				$(this).removeClass("hover");
			}
		);
		
		this.controlNext.click(function(event){
			var panel, i;
			for (i = 0; i < galleryInstance.productPanelList.length; i++) {
				panel = galleryInstance.productPanelList[i];
				if (panel.element.hasClass('expanded')) {
					panel.collapse(false, false);
				}
			}
			galleryInstance.gotoNextPanel();
		}).hover(
			function(event) {
				$(this).addClass("hover");
			},
			function(event) {
				$(this).removeClass("hover");
			}
		);
		
		element.addClass("initialized");
		element.removeClass("preload");
		element.find("div.product").each(
			function(i) {
				var ctr = 0, self = this, count, thumbnails, photos, panel;
				
				
				panel = jsx.initialize(this, jsx.widget.ProductPanel, galleryInstance);
				galleryInstance.productPanelList.push(panel);
				
				panel.index = i;
				panel.listenerArray.push(galleryInstance);
				
				panel.loadThumbnails();
			}
		);
		this.resize();
		this.gotoPanel(0);
		this.animated = true;
    };
	jsx.widget.ProductGallery.onInitialize = function(element, options) {
		$("#"+element).addClass("preload");
		$.each(options.images, 
			function() {
				$(new Image()).attr("src", this);
			}
		);
	};
	jsx.widget.ProductGallery.prototype.onResize = function(event) {
		this.resize();
	};
	jsx.widget.ProductGallery.prototype.onCollapse = function(event) {
	};
	jsx.widget.ProductGallery.prototype.resize = function() {
		var lastNav = this.element.find("div.nav").slice(-1);
		this.element.height(this.contentPanel.height());
	};
	jsx.widget.ProductGallery.prototype.animateScrollAdjustment = function(scrollAdjustment) {
		var leftAdjustment = this.contentPanel.position().left - scrollAdjustment;
		if (this.animated) {
			this.contentPanel.animate({left:leftAdjustment});
		} else {
			this.contentPanel.css("left", leftAdjustment);
		}
	};
	jsx.widget.ProductGallery.prototype.gotoPanel = function(index) {
		var left, prevHalfWidth, totalWidth, width, offset, i, panel;
		if (index >= 0 && index < this.panelList.size() && index != this.currenPanelIndex) {
			this.currentPanelIndex = index;
			this.scrollIndex = index;
			prevHalfWidth = 0;
			if (index>0) {
				prevHalfWidth = this.productPanelList[index-1].initialWidth/2;
			}
			width = this.productPanelList[index].element.width();
			
			totalWidth = this.contentPanel.width() - this.viewport.width();
			
			offset = -10;
			if (this.productPanelList[index].element.hasClass('expanded')) {
				left = - this.productPanelList[index].element.position().left + (this.viewport.width()-width)/2 + offset;
			} else {
				left = - this.productPanelList[index].element.position().left + offset;
			}
			
			if (left >= -10) {
				left = 0;
				this.controlPrevious.addClass('disabled');
			} else {
				this.controlPrevious.removeClass('disabled');
			}
			if (this.contentPanel.width() <= this.viewport.width()) {
				left = 0;
				this.controlPrevious.addClass('disabled');
				this.controlNext.addClass('disabled');
			} else if (left <= -totalWidth) {
				left = -totalWidth;
				this.controlNext.addClass('disabled');
			} else {
				this.controlNext.removeClass('disabled');
			}
			
			if (this.animated) {
				this.contentPanel.animate({left:left});
			} else {
				this.contentPanel.css("left", left);
			}
		}
	};
	jsx.widget.ProductGallery.prototype.gotoPreviousPanel = function(index) {
		var i = index, curPanel = this.productPanelList[this.currentPanelIndex].element;
		if (!i) {
			i = this.currentPanelIndex;
		}
		
		// find the leftmost panel partially visible
		var iter, oPanel, i, scroll;
		scroll = this.contentPanel.position().left;
		while (iter = this.productPanelList[i]) {
			oPanel = iter.element;
			if (oPanel.position().left + scroll + 210 <= 0) {
				break;
			}
			i--;
		}
		if (i < 0) {
			i = 0;
		}
		this.gotoPanel(i);
	};
	jsx.widget.ProductGallery.prototype.gotoNextPanel = function(index) {
		var i = index;
		if (!i) {
			i = this.currentPanelIndex;
		}
		
		if (i < this.panelList.size()-1) {
			this.gotoPanel(i+1);
		}
	};
	/* déprécié */
	jsx.widget.ProductGallery.prototype.scrollTo = function(index) {
		var i = this.scrollIndex, maxScroll, left, direction = 'right', offset;
		switch (index) {
			case 'left':
				direction = index;
				index = i-1;
				break;
			case 'right':
				direction = index;
				index = i+1;
				break;
		} 
		if (index < 0 ) {
			index = 0;
		}
		if (index >= this.panelList.length) {
			index = this.panelList.length - 1;
		}
		this.scrollIndex = index;
		
		if (direction == 'right') {		
			maxScroll = this.viewport.width() - this.contentPanel.width();
		} else {
			maxScroll = this.viewport.width() - this.contentPanel.width();
		}
		
		offset = -10;
		scroll = - this.panelList.eq(index).position().left + offset;

		if (scroll <= maxScroll) {
			scroll = maxScroll;
			if (index > 0) {
				this.scrollIndex = index - 1;
			}
		} else if (scroll > 0) {
			scroll = 0;
		} 
		
		if (this.animated) {
			this.contentPanel.animate({left:scroll});
		} else {
			this.contentPanel.css("left", scroll);
		}
			
 	}
	jsx.widget.ProductGallery.prototype.startScrollLeft = function() {
		var self = this,
			left = this.contentPanel.position().left,
			elem = self.contentPanel.get(0),
			maxScroll = 0;
		
		clearInterval(this.scrollInterval);
		this.scrollInterval = setInterval(function() {
			left = left + 40;
			if (left > maxScroll) {
				elem.style.left = "0px";
				clearInterval(self.scrollInterval);
			} else {
				elem.style.left = left+"px";
			}
		}, 1000/25);
	};
	jsx.widget.ProductGallery.prototype.stopScrollLeft = function() {
		clearInterval(this.scrollInterval);
	};
	jsx.widget.ProductGallery.prototype.startScrollRight = function() {
		var self = this,
			left = this.contentPanel.position().left,
			elem = self.contentPanel.get(0),
			minScroll = this.viewport.width() - this.contentPanel.width();
		
		clearInterval(this.scrollInterval);
		this.scrollInterval = setInterval(function() {
			left = left - 40;
			if (left <= minScroll) {
				elem.style.left = minScroll+"px";
				clearInterval(self.scrollInterval);
			} else {
				elem.style.left = left+"px";
			}
		}, 1000/25);
	};
	jsx.widget.ProductGallery.prototype.stopScrollRight = function() {
		clearInterval(this.scrollInterval);
	};
})();