dojo.require("ba.Util");
function initProductGallery() {
	var productImgs = dojo.query(".product-detail .product-box .product-img ");
	
	dojo.forEach(productImgs, function(productImg){
		var newItem = new ProductGallery(productImg);
	});
	
}

dojo.addOnLoad(initProductGallery);

dojo.declare("ProductGallery",
	// Inherited class
	null,
	
	//Body of the class
	{
		_baseHolderId: null,
		_ulId: null,
		_currentIndex: 0,
		_galleryImages: null,
		_singleElementWidth: 148,
		_currentPageNrId: null,

		
		constructor: function(productImg){
			
			// Assign an id to this block if none assigned yet...
			if(productImg.id) {
				this._baseHolderId = productImg.id;
			} else {
				this._baseHolderId = productImg.id = ba.Util.generateId();
			}
			
			// Find all the img holders (needed for some width setting)
			var imgHolders = dojo.query(".img-holder", productImg);
			
			// Find the ul... (needed for the left<->right slide animation)
			var uls = dojo.query("ul", productImg);
			
			if(uls.length === 0){
				console.debug("Warning: no unordered list found for the product gallery. Bailing out!(Source ProductGallery.constructor()).");
				return;
			}
			
			// Store the id or generate one + store it
			if(uls[0].id) {
				this._ulId = uls[0].id;
			} else {
				this._ulId = uls[0].id = ba.Util.generateId();
			}
			
			// For each image holder...
			dojo.forEach(imgHolders, dojo.hitch(this, function(imgHolder){
	
				// Count the images....
				var galleryImages = dojo.query("ul li a", imgHolder);
				
				var listHolder = uls[0];
				console.debug("listHolder: " + listHolder);
				dojo.style(listHolder, "width", (galleryImages.length * (this._singleElementWidth+ 32)) + "px");
		
				this._galleryImages = [];
				
				var first = true;
				
				dojo.forEach(galleryImages, dojo.hitch(this, function(galleryImg) {
					var newItem = new ProductGalleryThumbnail(galleryImg, this._singleElementWidth);
					if(first) {
						dojo.addClass(galleryImg, "current");
					}
					first = false;
					
					if(!galleryImg.id) {
						galleryImg.id = ba.Util.generateId();
					}
					
					this._galleryImages.push(galleryImg.id);
				}));
				
			}));

			this.updatePreviousNext();
			
			var nexts = dojo.query(".lnk-next", productImg);
			dojo.forEach(nexts, dojo.hitch(this, function(next){
				dojo.connect(next, "click", this, this.goNext);
			}));
			
			var prevs = dojo.query(".lnk-prew", productImg);
			dojo.forEach(prevs, dojo.hitch(this, function(prev){
				dojo.connect(prev, "click", this, this.goPrev);
			}));
			
			var queryResult = dojo.query("strong span", productImg);
			
			dojo.forEach(queryResult, dojo.hitch(this, function(currentPage){
				this._currentPageNrId = currentPage.id = ba.Util.generateId();
			}));
			
			this.updatePaging();
		},
		
		goNext: function(evnt){
			// no matter what happens: cancel the event...
			dojo.stopEvent(evnt);
			
			// Should we even animate?
			if(dojo.hasClass(evnt.target, "disabled") === false)
			{
				// Go!
				dojo.removeClass(this._galleryImages[this._currentIndex], "current");
				this._currentIndex++;
				dojo.addClass(this._galleryImages[this._currentIndex], "current");
				this._animateContent();
				
			} else {
				evnt.target.blur();
			}
		},
		
		goPrev: function(evnt){
			// no matter what happens: cancel the event...
			dojo.stopEvent(evnt);
			
			// Should we even animate?
			if(dojo.hasClass(evnt.target, "disabled") === false)
			{
				// Go!
				dojo.removeClass(this._galleryImages[this._currentIndex], "current");
				this._currentIndex--;
				dojo.addClass(this._galleryImages[this._currentIndex], "current");
				
				this._animateContent();
				
			} else {
				evnt.target.blur();
			}
		},
		
		_animateContent: function() {

			var currentMargin = dojo.style(this._ulId, "marginLeft");
			var targetMargin = -this._currentIndex * this._singleElementWidth;
			
			dojo.animateProperty({ node: this._ulId, duration:300,
				properties: {
					marginLeft: { start: currentMargin, end: targetMargin, units: "px"} 
				}
			}).play();
			
			this.updatePreviousNext();
			this.updatePaging();
		},
		
		updatePaging: function() {
			var pageElement = dojo.byId(this._currentPageNrId);
			if(pageElement) {
				pageElement.innerHTML = this._currentIndex + 1;
			}
		},
		
		updatePreviousNext: function (){
			var productImg = dojo.byId(this._baseHolderId);
			var prevs = dojo.query(".lnk-prew", productImg);
			var nexts = dojo.query(".lnk-next", productImg);
			
			if(prevs.length === 0 || nexts.length === 0) {
				console.debug("Warning: no previous and/or next button found for ProductGallery. Exiting function! (Source: updatePreviousNext)");
				return;
			}
			
			var prev = prevs[0];
			var next = nexts[0];
			
			var first = false;
			var last = false;
		
			var galleryImages = dojo.query(".img-holder ul li a", productImg);
			
			if(this._currentIndex === 0){
				dojo.addClass(prev, "disabled");
				dojo.style(prev, "opacity", "0.3");
				prev.blur();
			} else {
				dojo.style(prev, "opacity", "1.0");
				dojo.removeClass(prev, "disabled");
			}
		
			if(galleryImages.length-1 == this._currentIndex){
				dojo.addClass(next, "disabled");
				dojo.style(next, "opacity", "0.3");
				prev.blur();
			} else {
				dojo.removeClass(next, "disabled");
				dojo.style(next, "opacity", "1.0");
			}
		}
		
	});

dojo.declare("ProductGalleryThumbnail",
	// Inherited class
	null,
	
	//Body of the class
	{
		_animationHandle: null,
		_magnifierId: null,
		_imgId: null,
		_linkId: null,
		
		constructor: function(link, singleElementWidth){
		
			if(!link.id) {
				link.id = ba.Util.generateId();
			}
			this._linkId = link.id;
			
			dojo.connect(link, "mouseover", this, this.onHoverProductImg);
			dojo.connect(link, "mouseout", this, this.onLeaveProductImg);
			dojo.connect(link, "click", this, this.onClickProductImg);
			
			var imgs = dojo.query("img", link);

			if(imgs.length === 0) {
				console.debug("Warning: no image was found for a ProductGalleryThumbnail (source: ProductGalleryThumbnail->_injectMagnifierNodes)");
				return;
			}
			
			var id = ba.Util.generateId();
			
			this._imgId = imgs[0].id = id;
			
			this._magnifierId = this._injectMagnifierNodes(link, singleElementWidth);
			this._positionImage();
		},
		
		_positionImage: function(){
			var img = dojo.byId(this._imgId);
			var topPosition = dojo.style(this._magnifierId, "height");
			var imgHeight = dojo.style(img, "height");
			console.debug("topPosition: " + topPosition);
			console.debug("imgHeight: " + dojo.contentBox(img).h);
			
			if(imgHeight === 0)
				dojo.connect(img, "load" , function(){
					imgHeight = dojo.style(img, "height");
					dojo.style(img, "top", (topPosition/2 - imgHeight/2) + "px");
				});
			else {
				dojo.style(img, "top", (topPosition/2 - imgHeight/2) + "px");
			}
		},
		
		_injectMagnifierNodes: function(baseElement, singleElementWidth) {
			
			var id = ba.Util.generateId();
			
			var magDimensions = dojo.marginBox(dojo.byId(this._imgId).parentNode);
			var magSpan = document.createElement("span");
			magSpan.className = "imgMagnifier";	
			magSpan.id = id;
			baseElement.insertBefore(magSpan, baseElement.firstChild);
			dojo.style(magSpan, "width", dojo.contentBox(baseElement).w+"px");
			dojo.style(magSpan, "height", magDimensions.h+"px");
			dojo.style(magSpan, "opacity", 0);
			dojo.style(magSpan, "visibility", "visible");

			return magSpan.id;
		},
		
		onClickProductImg: function(evnt) {
			var newItem = new ProductGalleryZoom(dojo.byId(this._linkId));
			dojo.stopEvent(evnt);
		},
		
		onHoverProductImg: function (evnt) {
			this._animationHandle = new dojo.animateProperty({ node: this._magnifierId, duration:300,
				properties: {
					opacity: { start:dojo.style(this._magnifierId, "opacity"), end:'0.5'} 
				}
			});
			
			this._animationHandle.play();
		
		},
		
		onLeaveProductImg: function (evnt) {
			this._animationHandle = new dojo.animateProperty({ node: this._magnifierId, duration:300,
				properties: {
					opacity: { start:dojo.style(this._magnifierId, "opacity"), end:'0'} 
				}
			});
			
			this._animationHandle.play();
		
		}

	}
);