var DeptPage = function() {
	var va = YUD.hasClass(document.getElementsByTagName('body')[0], 'viewall');
	var prods = !va ? YUD.getElementsByClassName("deptCell", "table", $("deptImgs")) : YUD.getElementsByClassName("vaLi", "li", $("viewallContainer"));
	var prodCount = prods.length;
	var contentWidth = !va ? prodCount * 266 : prods.length < 7 ? (prodCount * 150) + 30 : (((parseInt(prods.length/2) + prods.length % 2) * 150) + 160);
	
	function fixClip(){
		var bw = YUD.getViewportWidth() - 134;
		if(!va){ 
			displayDept();
		}else{
			displayVA();
		}
		$('contentMask').style.clip = 'rect(0px,' + bw + 'px, 400px, 0px)';
		$('contentMask').style.width = bw + 'px';
		$('deptContent').style.width = contentWidth+'px';			
	}
	
	function scrollMe(sw){
		// speed, dragwidth, trackWidth, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
		myScroll = new ScrollObj(6,sw,342,"track","up","down","drag","contentMask","deptContent");
	}
	
	function getScroll(){
		YUE.on($("frameBotElements"), "mouseover", function(e,el){ HTB.toggle.onoff(YUE.getTarget(e)); });
		YUE.on($("frameBotElements"), "mouseout", function(e,el){ HTB.toggle.onoff(YUE.getTarget(e)); });
		
		var drag = $("drag");
		var cmReg = YUD.getRegion($("contentMask"));
		var dcReg = YUD.getRegion($("deptContent"));
		var dcWidth = dcReg.right - dcReg.left;
		var cmWidth = cmReg.right - cmReg.left;
		var d = dcWidth - cmWidth
		var sw = Math.floor(((342*cmWidth)/dcWidth));
		YUD.setStyle($("drag"), "width", sw + "px");
		
		var filler = (sw - 17) / 2;

		YUD.setStyle($("scrollMidLeft"), "width", filler + "px");
		YUD.setStyle($("scrollMidRight"), "width", filler + 1 + "px");
		YUD.setStyle($("drag"), "width", sw + "px");
		
		if(!va){
			if(prodCount > 3){
				scrollMe(sw);
				if(!noScroll){
					$("scrollCntnr").style.display = 'block';
				}
			}
		}else{
			if(prodCount >= 12){
				scrollMe(sw);
				if(!noScroll){
					$("scrollCntnr").style.display = 'block';
				}
			}
		}
	}
	
	function displayVA(){
		$('viewallContainer').style.width = contentWidth + "px";
		
		for(var i=0; i < prods.length; i++){
			YUE.on(prods[i], 'mouseover', function(e,el){ HTB.toggle.visibility(el); },YUD.getElementsByClassName("vaNamePrice","div",prods[i])[0]);
			YUE.on(prods[i], 'mouseout', function(e,el){ HTB.toggle.visibility(el); },YUD.getElementsByClassName("vaNamePrice","div",prods[i])[0]);
			if(prodCount < 7){
				if(YUD.hasClass(prods[i],'vaLiTop')){
					prods[i].style.margin = '100px 6px 0 0'
				}
				else{
					prods[i].style.margin = '100px 0 0 5px';
				}
				prods[i].style.left = '0px';
				prods[i].style.cssFloat = 'left';
				prods[i].style.styleFloat = 'left';
			}
		}
		if (prodCount <= 12){
			$('deptContent').style.margin = '0px auto 0px auto';
			$('deptContent').style.position = 'relative';
		} 
	}

	function displayDept(){
		for(var i=0; i < prods.length; i++){
			YUE.on(prods[i], 'mouseover', function(e,el){ YUD.setStyle(el, 'visibility', 'visible'); }, YUD.getElementsByClassName('deptNamePrice','div',prods[i])[0]);
			YUE.on(prods[i], 'mouseout', function(e,el){ YUD.setStyle(el, 'visibility', 'hidden'); }, YUD.getElementsByClassName('deptNamePrice','div',prods[i])[0]);
			YUE.on(prods[i], 'mouseover', function(e,el){ YUD.setStyle(el, 'visibility', 'visible'); }, YUD.getElementsByClassName('deptSwatchCell','td',prods[i])[0]);
			YUE.on(prods[i], 'mouseout', function(e,el){ YUD.setStyle(el, 'visibility', 'hidden'); }, YUD.getElementsByClassName('deptSwatchCell','td',prods[i])[0]);
			YUD.getElementsByClassName("deptSwatchCell", "td", prods[i], function(el){ 
					YUE.on(el,"click",chngDeptImg);
					/*YUD.getElementsByClassName("deptSwatch","img",el,function(sw){
							YUD.setStyle(sw,"opacity",".5");
						});*/
					YUE.on(el,"mouseover",togSwatch);
					YUE.on(el,"mouseout",togSwatch);
				 });
		}
		if(prodCount <= 3) {
			$('contentMask').style.width = '859px';
		}
	}
	
	function togSwatch(e){
		var t = YUE.getTarget(e);
		if(YUD.hasClass(t, "deptSwatch")){
			if(!YUD.hasClass(t,"highlight") && !YUD.hasClass(t,"selected")){
				YUD.addClass(t, "highlight");
			}else if(!YUD.hasClass(t,"selected")){
				YUD.removeClass(t,"highlight");
			}
		}else{
			return true;
		}
	}
	function selectSwatch(el){
		var sibs = YUD.getElementsByClassName("deptSwatch","img",el.parentNode);
		for(var i=0; i<sibs.length; i++){
			YUD.removeClass(sibs[i],"selected");
		}
		YUD.addClass(el,"selected");
		YUD.removeClass(el,"highlight");
	}
	function chngDeptImg(e){
		var t = YUE.getTarget(e);
		if(YUD.hasClass(t, "deptSwatch")){
			var d = t.id.split("_");
			var id = d[1];
			var coll = d[2];
			var seq = d[3];
			var newImage = new Image(253, 253);
			newImage.onload = function(e){
					$("deptProdImg_" + coll).src = newImage.src;
					$("prodLink_" + coll).href = '/webapp/wcs/stores/servlet/ProductDisplay?storeId=' + globalStoreId + '&catalogId=' + globalCatalogId + '&productId=' + id + '&langId=-1&categoryId=' + categoryId + '&parentCategoryId=' + parentCategoryId + '&colorSequence=' + seq;
					selectSwatch(t);
				};
			newImage.src = collPath + coll + "_" + seq + "_253_x.jpg";
		}else{
			return true;
		}
	}
	
	this.init = function(){
		fixClip();
		YUE.on(window, "resize", fixClip);
		getScroll();
	}
}

YUE.on(window, 'load' , function(e){ (new DeptPage).init() });