dojo.require("ba.Util");

function initNewItemBar() {
	var queryResult = dojo.query(".new-items ul");
	
	dojo.forEach(queryResult, function(newItems){
		var newItem = new NewItemBar(newItems);
	});
	
}

dojo.addOnLoad(initNewItemBar);

dojo.declare("NewItemBar",
	null,
	{
		_baseHolderId: null,
		_eventHandles: null,
		_overflowDivId: null,
		_productImageWidth: null,
		_contentWidth: null,
		
		constructor: function(baseHolder) {
		
			if(!baseHolder.id) {
				baseHolder.id = ba.Util.generateId();
			}
			
			this._baseHolderId = baseHolder.id;
			this._eventHandles = [];
			
			if(!baseHolder.parentNode.id) {
				baseHolder.parentNode.id = ba.Util.generateId();
			}
			
			this._overflowDivId = baseHolder.parentNode.id;
			
			var queryResult = dojo.query("li a .extraInfo", baseHolder);
			
			dojo.forEach(queryResult, dojo.hitch(this, function(extraInfo) { 
				dojo.style(extraInfo, "display", "block");
				this._contentWidth = dojo.style(extraInfo, "width");
				
				var contentNode = document.createElement(extraInfo.nodeName);
				
				contentNode.innerHTML = extraInfo.innerHTML;
				extraInfo.innerHTML = "";
				
				dojo.style(extraInfo, "display", "none");
				dojo.style(contentNode, "display", "block");
				dojo.style(contentNode, "width", this._contentWidth+"px");
				dojo.place(contentNode, extraInfo, "append");

				dojo.style(extraInfo, "width", "0px");
			}));
			
			queryResult = dojo.query("li a .productImage", baseHolder);
			
			dojo.forEach(queryResult, dojo.hitch(this, function(element){
				var height = dojo.style(element, "height");
				dojo.forEach(dojo.query("img", element), function(imgElement) {
					// Evil check:
					if(dojo.isIE) {
						//~ console.debug("height: " + (height));
						//~ console.debug("height: " + dojo.style(imgElement, "height"));
						dojo.style(imgElement, "marginTop", ((height - dojo.style(imgElement, "height"))/2) + "px");
					}
				});
				this._productImageWidth = dojo.style(element, "width");
				console.debug("this._productImageWidth: " + this._productImageWidth);
			}));
			
			queryResult = dojo.query("li a .extraInfo", baseHolder);
			
			this._attachEvents();
		},
		
		_attachEvents: function(){
			var queryResult = dojo.query("ul li a");
			
			
			dojo.forEach(queryResult, dojo.hitch(this, function(imageSpanner) { 
				this._eventHandles.push(dojo.connect(imageSpanner, "mouseenter", this, this._onImageOver));
				this._eventHandles.push(dojo.connect(imageSpanner, "mouseleave", this, this._onImageOut));
			}));
		},
		
		_onImageOver: function(evnt) {
		
			var queryResult = dojo.query(".extraInfo", evnt.currentTarget);
			var isClosing;
			
			dojo.forEach(queryResult, dojo.hitch(this, function(extraInfo) {
				isClosing = dojo.hasClass(extraInfo, "closing");
				if( (this._overElement != extraInfo) || ( isClosing === true) ){
				
					if(isClosing) {
						dojo.removeClass(extraInfo, "closing");
					}
					dojo.style(extraInfo, "display", "block");
					
					var beginWidth = dojo.style(extraInfo, "width");

					var animateIn = new dojo.animateProperty({ node: extraInfo, duration:500,
						properties: {
							width: { start:beginWidth, end: this._contentWidth, units:"px"} 
						}
					});
					
					this._eventHandles.push(dojo.connect(animateIn, "onAnimate", this, this._onAnimateOver));
					this._eventHandles.push(dojo.connect(animateIn, "onEnd", this, this._onAnimateOverEnd));
					this._overElement = extraInfo;
					
					animateIn.play();
					//~ console.debug("animateOver");
				}
			}));
			
		},
		
		_onAnimateOutEnd: function() {
			if ( (this._overElement) && (dojo.hasClass(this._overElement, "closing") === true) ) {
				dojo.removeClass(this._overElement, "closing");
				dojo.style(this._overElement, "display", "none");
				this._overElement = undefined;
			}
		},
		
		_onAnimateOverEnd: function() {
			this._onAnimateOver();
		},
		
		_onAnimateOver: function(info) {

			var overflowDiv = dojo.byId(this._overflowDivId);
			var baseHolder = dojo.byId(this._baseHolderId);
			var marginLeftCorrection;
			
			if(this._overElement) {
				var rightWidth = dojo._abs(this._overElement).x - dojo._abs(baseHolder).x + dojo.style(this._overElement, "width");
				
				marginLeftCorrection = rightWidth - dojo.style(overflowDiv, "width");
				
				if(marginLeftCorrection>0) {
					marginLeftCorrection = - marginLeftCorrection - 0.05 * (-marginLeftCorrection + dojo.style(baseHolder, "marginLeft")) ;
				} else {
					marginLeftCorrection = 0.05 * dojo.style(baseHolder, "marginLeft");
				}
				
			} else {
				marginLeftCorrection = 0.05 * dojo.style(baseHolder, "marginLeft");
			}

			dojo.style(baseHolder, "marginLeft", marginLeftCorrection + "px");
		},
		
		_onImageOut: function(evnt) {
			var queryResult = dojo.query(".extraInfo", evnt.currentTarget);
			
			dojo.forEach(queryResult,dojo.hitch(this, function(extraInfo) {
				var animateOut = new dojo.animateProperty({ node: extraInfo, duration:500,
					properties: {
						width: { start:dojo.style(extraInfo, "width"), end:0, units:"px"} 
					}
				});
				
				this._eventHandles.push(dojo.connect(animateOut, "onAnimate", this, this._onAnimateOver));
				this._eventHandles.push(dojo.connect(animateOut, "onEnd", this, this._onAnimateOutEnd));
				animateOut.play();
				dojo.addClass(extraInfo, "closing");
			}));
		}
		
	}
);