/**************************************
 * HOME
 **************************************/
var HomeWindow = {
	arrCategories: null,
	arrCategoriesElements: [],
	imgCategoryPrefix: url_global + '/Banners/mn_wdw_',
	imgCategorySufix: '.gif',
	idCategoria: null,
	idProd: null,
	/**
		Gets wire html and include it the HTML.
	*/
	fetch:function($url){
		// $url = typeof($url) == 'string' ? $url : 'template_vitrine.html';
		// ajaxRun({
			// url: $url,
			// json: false,
			// method: 'GET',
			// onFinish: function(answer, extra){
				// $('windowContainer').innerHTML = answer;
				// $('windowContainer').className = 'windowContainer';
				// HomeWindow._create();
			// }
		// });
		$('windowContainer').innerHTML = '<ul id="wdwCategoryLst"> <li class="off"> <b class="tl">&nbsp;</b> <a href="javascript:;"> <img src="' + url_global + '/imagens/px.gif" alt="" title="" /> </a> <b class="tr">&nbsp;</b> </li> </ul> <div class="lstContainerBorder" id="wdwCategoryLstProducts"> <div class="lstContainer"> <a class="setaLeft" href="javascript:;"> <img src="' + url_global + '/imagens/bt_wdw_left.gif" alt="anterior" title="" /> </a> <div class="lstMask"> <ul class="lstProducts prodBlue"> <li> <p class="photo"><img src="' + url_global + '/imagens/px.gif" alt="" title="" /></p>					 <p class="prodTit"> <a href="' + url_global + '"><strong></strong></a> </p> <p class="prodPriceFrom"> De: <strike></strike> </p> <p class="prodPriceTo"> Por: R$ </p> <p class="prodPriceDiv"> </p> </li> </ul> </div> <a class="setaRight" href="javascript:;"> <img src="' + url_global + '/imagens/bt_wdw_right.gif" alt="próximo" title="" /> </a> </div><br class="cb" /> </div>';
		$('windowContainer').className = 'windowContainer';
		HomeWindow._create();
	},
	setCategoryList:function($obj){
		this.arrCategories = $obj;
	},
	/**
		Creates the category elements (<li>) cloning the fecth HTML.
	*/
	_create: function(){
		ProductsWindow.init();
		var arr = this.arrCategories.categories;
		var menu = gTag('li', $('wdwCategoryLst'))[0];
		var cloneMenu = menu.cloneNode(true);
		delElm(menu);
		var newMenu, a, img, li, n, initCat;
		for(var i=0; i<arr.length; i++){
			newMenu = cloneMenu.cloneNode(true);
			a = gTag('a', newMenu)[0];
			img = gTag('img', a)[0];
			img.alt = img.title = arr[i].name;
			img.src = this.imgCategoryPrefix + arr[i].img + '_off' + this.imgCategorySufix;
			
			pImg(img.src);
			pImg(this.imgCategoryPrefix + arr[i].img + '_on' + this.imgCategorySufix);
			
			n = $('wdwCategoryLst').appendChild(newMenu);
			var funcAddEvent = function(a, n, imgName, id, firstProdId){
				addEvent(a, 'click', function(){
					HomeWindow._changeCategory(n, imgName, id, firstProdId);
				});
			};
			funcAddEvent(a, n, arr[i].img, arr[i].id, arr[i].firstProdId);
			
			if(this.arrCategories.initialCategory){
				for(var j=0; j<arr.length; j++){
					if(arr[j].id == this.arrCategories.initialCategory){
						initCat = j;
					}
				}
			} else {
				initCat = 0;
			}
			
			if(i == initCat) this._changeCategory(n, arr[i].img, arr[i].id, arr[i].firstProdId);
			
			this.arrCategoriesElements.push(n);
		}
	},
	/**
		Resets the <li> class to off and changes the img to _off state.
	*/
	_resetCategories: function(){
		var elm, imgName, img;
		for(var i=0; i<this.arrCategoriesElements.length; i++){
			elm = this.arrCategoriesElements[i];
			elm.className = 'off';
			img = gTag('img', elm)[0];
			imgName = img.src.split('mn_wdw_')[1].split('_')[0];
			img.src = this.imgCategoryPrefix + imgName + '_off' + this.imgCategorySufix;
		}
	},
	/**
		Changes the category 
		
		@param: $elm:Object - Element <li>
		@param: imgName:String - img name whitout prefix or sufix.
		@param: id:String - img name whitout prefix or sufix.
		
	*/
	_changeCategory: function($elm, imgName, id, firstProdId){
		this.idCategoria = id;
		this.idProd = firstProdId;
		this._resetCategories();
		$elm.className = 'on';
		gTag('img', $elm)[0].src = this.imgCategoryPrefix + imgName + '_on' + this.imgCategorySufix;
		//
		var ul = gTag('ul', $('wdwCategoryLstProducts'))[0];
		ul.style.height = '311px';
		ProductsWindow.delProducts();
		ProductsWindow.getProducts(id, firstProdId);
	}
};

var ProductsWindow = {
	returnProductsUrl: 'RetornaProdutos.aspx',
	productNode: null,
	setaLeft: null,
	setaRight: null,
	_hasInit: false,
	_lastProduct: null,
	_lastCategory: null,
	_arrCurrentProducts: null,
	_currentProd:0,
	t1: new Tweener(),
	_defaultWidth: 504,
	_defaultProductWidth: 168,
	/**
		Inits the ProductsWindow class once.
	*/
	init: function(){
		if(!this._hasInit){
			var li = gTag('li', $('wdwCategoryLstProducts'))[0];
			this.productNode = (this.productNode == null) ? li.cloneNode(true) : this.productNode; // defines the MASTER node
			delElm(li);
			this._hasInit = true;
			
			this.setaLeft = gClass('setaLeft','a',$('wdwCategoryLstProducts'))[0];
			this.setaRight = gClass('setaRight','a',$('wdwCategoryLstProducts'))[0];
			
			var _this = this;
			var addClick = function(elm, func){
				elm.href = 'javascript:;';
				addEvent(elm, 'click', function(){
					func(_this);
				});
			};
			addClick(this.setaRight, this.nextProd);
			addClick(this.setaLeft, this.prevProd);
		}
	},
	/**
		Moves the slider RIGHT to LEFT
		
		@param: _this:Class - ProductsWindow class
	*/
	nextProd: function(_this){
		// var extremeRight = _this.getExtremeRightElement();
		// var imGoingTo = extremeRight + _this._defaultWidth;
		
		// trace(" --> extremeRight = " + extremeRight + "< imGoingTo = " + imGoingTo);
		// if(extremeRight <= imGoingTo) {
		_this.getProducts(_this._lastCategory, _this._lastProduct, 'right', true); // add new products nedded
		// } else {
			// _this._move('right'); // just slide
		// }
	},
	/**
		Moves the slider LEFT to RIGHT
		
		@param: _this:Class - ProductsWindow class
	*/
	prevProd: function(_this){
		// var extremeLeft = parseInt(_this._arrCurrentProducts[0].style.left);
		// var firstElemet = parseInt(_this._arrCurrentProducts[_this._currentProd-3].style.left) - _this._defaultProductWidth;
		
		// trace("left = " + firstElemet + " extremeLeft = " + extremeLeft);
		// if(firstElemet < extremeLeft) {
		_this.getProducts(_this._lastCategory, _this._lastProduct, 'left', true); // addNew products nedded
		// } else {
			// _this._move('left'); // just slide
		// }
	},
	/**
		Moves the slider
		
		@param: orientation:String - left or right
	*/
	_move: function(orientation){

		var currPos = (!parseInt(this._ul.style.left) ? 0 : parseInt(this._ul.style.left));
		var newPos;
		if(orientation == 'right'){
			newPos = currPos - this._defaultWidth;
		} else if(orientation == 'left'){
			newPos = currPos + this._defaultWidth;
		}

		this.t1.onComplete = function(obj, end){};
		this.t1.run(this._ul, newPos, 'left', 'px');
	},
	/**
		Gets products using ajax and create elements if everything is ok.
		
		@param: idCategoria:String - Category
		@param: idProduto:String - First product ID
		@param: orientation:String - left or right
	*/
	getProducts: function(idCategoria, idProduto, orientation, clickFromSeta){
		this._lastCategory = idCategoria;
		var _orientation = orientation || 'none';
		var _this = this;
		ajaxRun({
			parameters:{
				idCategoria: idCategoria || '',
				idProduto: idProduto || '',
				orientation: orientation || 'right'
			},
			encrypt: false,
			url: this.returnProductsUrl,
			onFinish: function(answer, extra){
				if(answer[0]){
					_this._addProducts(answer[1], _orientation);
					// _this._ul.style.height = 'auto';
					if(clickFromSeta) _this._move(_orientation);
				} else {
					alert(answer[1]);
				}
			}
		});
	},
	/**
		Removes the products into <ul>.
	*/
	delProducts: function(){
		this.t1.stop();
		this._ul = gTag('ul', $('wdwCategoryLstProducts'))[0];
		this._ul.style.left = '0px';
		var arrToDelete = [];
		for(var i=0; i<this._ul.childNodes.length; i++){
			if(this._ul.childNodes[i].nodeType == 1){
				arrToDelete.push(this._ul.childNodes[i]);
			}
		}
		for(var i=0; i<arrToDelete.length; i++){
			delElm(arrToDelete[i]);
		}
		this._arrCurrentProducts = [];
		this._arrowClicked = 0;
	},
	/**
		Adds the products into <ul>.
		
		@param: $obj:JSON - Object JSON with product information.
	*/
	_maxHeight: 200,
	_addProducts: function($obj, orientation){
		var arrProds = $obj.products;
		var _this = this;
		// this._ul.style.width = '10000px';
		var newProd, n, img, tit, priceFrom, priceTo, div, stamps;
		for(var i=0; i<arrProds.length; i++){
			newProd = this.productNode.cloneNode(true);
			img = gTag('img', gClass('photo', 'p', newProd)[0])[0];
			tit = gTag('strong', gClass('prodTit', 'p', newProd)[0])[0];
			priceFrom = gTag('strike', gClass('prodPriceFrom', 'p', newProd)[0])[0];
			priceTo = gClass('prodPriceTo', 'p', newProd)[0];
			div = gClass('prodPriceDiv', 'p', newProd)[0];
			
			newProd.id = arrProds[i].id;
			if(arrProds[i].imgPath)
				img.src = arrProds[i].imgPath;
			
				img.width = 120;
				img.height = 120;
				img.alt = img.title = unescape(arrProds[i].name);
				
			if(arrProds[i].name){
				tit.innerHTML = unescape(arrProds[i].name);//  + ' (' + this._arrCurrentProducts.length + ')'; // TODO: remove this
			}
			if(arrProds[i].link){
				tit.parentNode.href = arrProds[i].link;
			}
			if(arrProds[i].priceFrom){
				sDiv(priceFrom.parentNode);
				priceFrom.innerHTML = 'R$' + arrProds[i].priceFrom;
			}else{
				hDiv(priceFrom.parentNode);
			}
			if(arrProds[i].priceTo){
				sDiv(priceTo);
				priceTo.innerHTML = 'Por: R$' + arrProds[i].priceTo;
			}else{
				hDiv(priceTo);
			}
			if(arrProds[i].priceDiv){
				div.innerHTML = arrProds[i].priceDiv;
			}
			stamps = arrProds[i].stamps;
			if(stamps){
				for(var j=0; j<stamps.length; j++){
					createElm(newProd,
						['p', {'class':'ico'},
							['img', {alt:unescape(stamps[j].name), title:unescape(stamps[j].name), src:stamps[j].imgPath}]
						]
					);
				}
			}
			var addClickToAll = function(elm, link){
				addEvent(elm, 'click', function(){
					window.location.href = link;
				});
				addEvent(elm, 'mouseover', function(){
					elm.className += ' on';
				});
				addEvent(elm, 'mouseout', function(){
					elm.className = elm.className.replace(/on/,'');
				});
				elm.style.cursor = 'pointer';
			};
			addClickToAll(newProd, arrProds[i].link);
			
			if(orientation == 'left'){
				n = this._ul.insertBefore(newProd, this._ul.firstChild);
				// n.style.left = ((this._arrCurrentProducts.length - 2) * -this._defaultProductWidth) + 'px';
				n.style.left = (this.getExtremeLeftElement() - this._defaultProductWidth) + 'px';
				this.insertBeforeArray(n);
			} else { // right and none
				n = this._ul.appendChild(newProd);
				n.style.left = (this.getExtremeRightElement() + this._defaultProductWidth) + 'px';
				this._arrCurrentProducts.push(n);
			}
			
			if(i == arrProds.length-1) {
				this._lastProduct = arrProds[i].id; // last product called.
			}
			
			setTimeout(function(){
			// if(n.offsetHeight > this._maxHeight) {
				_this._maxHeight = n.scrollHeight;
				_this._ul.style.height = (_this._maxHeight + 72)  + 'px';
				//trace(_this._ul.style.height);
			// }
			},150);
		}
		// trace("addProducts");
	},
	insertBeforeArray: function(elm){
		var tmp = [elm];
		for(var i=0; i<this._arrCurrentProducts.length; i++){
			tmp.push(this._arrCurrentProducts[i]);
		}
		this._arrCurrentProducts = tmp;
	},
	getExtremeRightElement: function(){
		var r = -this._defaultProductWidth;
		for(var i=0; i<this._arrCurrentProducts.length; i++){
			if(parseInt(this._arrCurrentProducts[i].style.left) > r) r = parseInt(this._arrCurrentProducts[i].style.left);
		}
		return r;
	},
	getExtremeLeftElement: function(){
		var r = 0;
		for(var i=0; i<this._arrCurrentProducts.length; i++){
			if(parseInt(this._arrCurrentProducts[i].style.left) < r) r = parseInt(this._arrCurrentProducts[i].style.left);
		}
		return r;
	}

};

var trace = function(s){
	if(window['console']) console.info(s);
};