dojo.require("ba.Util");
dojo.declare("ProductGalleryZoom",
	// Inherited class
	null,

	//Body of the class
	{
		_closeId: null,
		_baseHolderId: null,
		_orginalLinkedListId: null,
		_linkId: null,
		_imageTagId: null,
		_imageHolderId: null,
		_nextButtonId: null,
		_prevButtonId: null,
		_eventHandlers: null,
		_internalLinkedList: null,
		
		constructor: function(link){
		
			var linkedList = link.parentNode.parentNode;
			
			// Create/find unique ideas and store them
			if(!link.id){
				link.id = ba.Util.generateId();
			}
			this._linkId = link.id;
			
			// Create/find unique ideas and store them
			if(!linkedList.id) {
				linkedList.id = ba.Util.generateId();
			}
			this._originalLinkedListId = linkedList.id;
			
			this._eventHandlers = [];
			
			// Do some normal working...
			this._createHTML(linkedList);
			this._attachEvents();
			this._updatePrevNextButtons();
		},
		
		_createHTML: function(linkedList){
			var galleryBig = document.createElement("div");
			galleryBig.className = "galleryBig";
			this._baseHolderId = galleryBig.id = ba.Util.generateId();
			
			var closeButton = document.createElement("a");
			closeButton.href = "#";
			closeButton.className = "btn-close";
			closeButton.innerHTML = "<span>sluiten</span>";
			galleryBig.appendChild(closeButton);
			this._closeId = closeButton.id = ba.Util.generateId();

			var prevLink = document.createElement("a");
			prevLink.href = "#";
			prevLink.innerHTML = "prev";
			prevLink.className = "lnk-prew";
			
			this._prevButtonId = prevLink.id = ba.Util.generateId();
			
			galleryBig.appendChild(prevLink);
			
			var imageBig = document.createElement("div");
			imageBig.className = "imageBig";
			this._imageHolderId = imageBig.id = ba.Util.generateId();
			galleryBig.appendChild(imageBig);
			
			var nextLink = document.createElement("a");
			nextLink.href = "#";
			nextLink.innerHTML = "next";
			nextLink.className = "lnk-next";
			
			this._nextButtonId = nextLink.id = ba.Util.generateId();
			
			galleryBig.appendChild(nextLink);
			
			var copiedUL = dojo.clone(linkedList);
			
			this._internalLinkedList = copiedUL.id = ba.Util.generateId();
			
			dojo.style(copiedUL, "width", "");
			dojo.style(copiedUL, "marginLeft", "");
			
			var queryResult = dojo.query("[id]", copiedUL);
			
			dojo.forEach(queryResult, dojo.hitch(this, function(elementToChange){
				elementToChange.id = ba.Util.generateId();
				if(dojo.hasClass(elementToChange, "current")) {
					this._linkId = elementToChange.id;
				}
			}));
			
			dojo.place(copiedUL, galleryBig, "last");

			queryResult = dojo.query("li:last-child", copiedUL);
			if(queryResult.length) {
				queryResult.addClass("last");
			}
			
			dojo.style(galleryBig, "opacity", "0");
			dojo.place(galleryBig, linkedList.parentNode.parentNode.parentNode, "before");

			var entireHeight = dojo.contentBox(galleryBig).h;
			var listHeight = dojo.marginBox(copiedUL).h;
			
			dojo.style(copiedUL, "top", (entireHeight/2 - listHeight/2)+"px");
			//~ });

			var endAnimation = dojo.animateProperty({
				node: this._baseHolderId,
				duration: 300,
				properties: {
					opacity: { end: "1"}
				}
			});
			
			this._eventHandlers.push(dojo.connect(endAnimation, "onEnd", this, this._onEndAnimationFadeIn));
			endAnimation.play();
		},
		
		_createImage: function(){
			var imageBig = dojo.byId(this._imageHolderId);
			var image = document.createElement("img");
			this._imageTagId = image.id = ba.Util.generateId();
			imageBig.appendChild(image);
			dojo.style(this._imageTagId, "opacity", "0");
			dojo.connect(image, "onload", this, this._onLoadImage);
		},
		
		_loadImage: function(link){
			if(!this._imageTagId){
				this._createImage();
			}
			
			var image = dojo.byId(this._imageTagId);
			image.src = link.href;
			
		},
		
		_onLoadImage: function(evnt) {
			
			var imageHeight = dojo.contentBox(this._imageTagId).h;
			var holderHeight = dojo.contentBox(this._imageHolderId).h;
			
			dojo.style(this._imageTagId, "top", (holderHeight/2 - imageHeight/2)+"px");
			
			var loadAnimation = new dojo.animateProperty({
				node: this._imageTagId,
				duration: 300,
				properties: {
					opacity: { end: "1"}
				}
			});
			
			loadAnimation.play();
		},
		
		_attachEvents: function () {

			this._eventHandlers.push(dojo.connect(dojo.byId(this._closeId), "click", this, this._onClickClose));
			this._eventHandlers.push(dojo.connect(dojo.byId(this._nextButtonId), "click", this, this._onClickNext));
			this._eventHandlers.push(dojo.connect(dojo.byId(this._prevButtonId), "click", this, this._onClickPrev));
			
			var queryResult = dojo.query("li a", this._internalLinkedList);
			
			dojo.forEach(queryResult, dojo.hitch(this, function(link) {
				this._eventHandlers.push(dojo.connect(link, "click", this, this._onClickThumbnail));
			}));
		},
		
		_selectLink: function(link) {
			this._linkId = link.id;

			var fadeOut = dojo.animateProperty({
				node: this._imageTagId,
				duration: 300,
				properties: {
					opacity: { end: "0"}
				}
			});
			
			this._eventHandlers.push(dojo.connect(fadeOut, "onEnd", this, this._onEndAnimationFadeOut));
			
			fadeOut.play();
			
			var queryResult = dojo.query(".current", dojo.byId(this._internalLinkedList));

			if(queryResult.length) {

				queryResult.removeClass("current");
			}
			
			dojo.addClass(link, "current");
		
			this._updatePrevNextButtons();
		},
		
		_updatePrevNextButtons: function() {
			
			var queryResult = dojo.query("li a", dojo.byId(this._internalLinkedList));
			
			if(queryResult.length) {
			
				var currentIndex = dojo.indexOf(queryResult, dojo.byId(this._linkId));
				
				if(currentIndex === 0) {
					dojo.addClass(this._nextButtonId, "disabled");
					dojo.style(this._nextButtonId, "opacity", "0.3");
					dojo.byId(this._nextButtonId).blur();
				} else {
					dojo.style(this._nextButtonId, "opacity", "1.0");
					dojo.removeClass(this._nextButtonId, "disabled");
				}
				
				if(currentIndex === queryResult.length-1) {
					dojo.addClass(this._prevButtonId, "disabled");
					dojo.style(this._prevButtonId, "opacity", "0.3");
					dojo.byId(this._prevButtonId).blur();
				} else {
					dojo.style(this._prevButtonId, "opacity", "1.0");
					dojo.removeClass(this._prevButtonId, "disabled");
				}
				
			}
		},
		
		_onClickThumbnail: function(evnt) {
		
			dojo.stopEvent(evnt);
			
			this._selectLink(evnt.currentTarget);
			
		},
		
		_onClickNext: function (evnt) {
			dojo.stopEvent(evnt);

			if(!dojo.hasClass(evnt.target, "disabled")) {
				var queryResult = dojo.query("li a", dojo.byId(this._internalLinkedList));
				if(queryResult.length) {
				
					var currentIndex = dojo.indexOf(queryResult, dojo.byId(this._linkId));
					
					currentIndex -= 1;

					this._selectLink(queryResult[currentIndex]);
				}
			} else {
				evnt.target.blur();
			}
		},
		
		_onClickPrev: function (evnt) {
			dojo.stopEvent(evnt);
			
			if(!dojo.hasClass(evnt.target, "disabled")) {
				var queryResult = dojo.query("li a", dojo.byId(this._internalLinkedList));
				if(queryResult.length) {
				
					var currentIndex = dojo.indexOf(queryResult, dojo.byId(this._linkId));
					
					currentIndex += 1;

					this._selectLink(queryResult[currentIndex]);
				}
			} else {
				evnt.target.blur();
			}
		},
		
		_onClickClose: function (evnt) {
		
			dojo.stopEvent(evnt);
			
			var endAnimation = new dojo.animateProperty({
				node: this._baseHolderId,
				duration: 300,
				properties: {
					opacity: { end: "0"}
				}
			});
			
			this._eventHandlers.push(dojo.connect(endAnimation, "onEnd", this, this._onEndAnimationClose));
			endAnimation.play();
			
		},
		
		_onEndAnimationFadeOut: function() {
			this._loadImage(dojo.byId(this._linkId));
		},
		
		_onEndAnimationFadeIn: function() {
			this._loadImage(dojo.byId(this._linkId));
		},
		
		_onEndAnimationClose: function () {
			this._removeEvents();
			this._destroyHTML();
		},
		
		_removeEvents: function() {
			dojo.forEach(this._eventHandlers, function(evnt){
				dojo.disconnect(evnt);
			});
			
			this._eventHandlers = [];
		},
		
		_destroyHTML: function() {
			var galleryBig = dojo.byId(this._baseHolderId);
			if(galleryBig) {
				galleryBig.parentNode.removeChild(galleryBig);
			}
		}

	});