var views = {
	
	showPromo: function(promoTitle,promoId){
		dw.effects.openPromo()
		$('promoTitle').innerHTML = promoTitle
		
		if(dw.cache.promos[promoId]){
			//pull from cache
			$('promoContent').innerHTML = dw.cache.promos[promoId]
		}else{
			Utility.callService({
				service:dw.config.services.getPromo.href,
				method:dw.config.services.getPromo.method,
				pars:'promoId='+promoId,
				onComplete:function(obj){
					$('promoContent').innerHTML = obj.responseText
					//add to promo cache
					dw.cache.promos[promoId] = obj.responseText
				}
			});
		}
	},
	
	getPromo: function(data){
		if(data.promoId && data.promoTitle){
			return data.promoTitle
		}else{
			return false	
		}
	},
	
	getTitle: function(data,trc){
		var string = ""
		if(data.longTitle){
			string = data.longTitle
		}else if(data.title){
			string = data.title
		}
		if(trc){
			string = Utility.truncate(string,trc)
		}
		
		return string 
	},
	
	getPrice: function(data){
		var html = ''
		if(data.priceType == 'S'){
			html = 'Our Price:<span class="fB"> ' + parseFloat(data.price).dollars() + '</span>'
		}else if(data.priceType == 'VP'){
			html = '<del>' + parseFloat(data.basePrice).dollars() + '</del> Our Price:<span class="fB"> ' + parseFloat(data.price).dollars() + '</span>'
		}else{
			//examine skews
			var prices = []
			for(var j=0; j<data.skus.length; j++){
				if(data.skus[j].price)prices.push(parseFloat(data.skus[j].price))
			}
			if(data.priceType == 'SKU'){
				html = 'Our Price:<span class="fB"> ' + prices.min().dollars() + ' - ' + prices.max().dollars()+ '</span>'
			}else{
				html = '<del>' + parseFloat(data.basePrice).dollars() +'</del> Our Price:<span class="fB"> ' + prices.min().dollars() + ' - ' + prices.max().dollars() + '</span>'
			}
		}
		return html
	},
	
	getColor: function(data){
		//examine skews
		var colors = []
		
		for(var j=0; j<data.skus.length; j++){
			if(data.skus[j].colorLabel)colors.push(data.skus[j].colorLabel)
		}
		
		colors = Utility.stripDups(colors)	
		if(colors.length>1){
			return colors
		}else{
			return false	
		}
	},
	
	pullImage: function(data,type,size){
		var thumb = false
		for(var i=0; i<data.images.length; i++){
			if(data.images[i].view == type){
				if(data.images[i].type == size){
					thumb = dw.config.absPath+data.images[i].src
				}
			}
		}
		return thumb
	},
	
	addChart: function(data,append){
		if($('chart_'+data.productId)){
			$('chart_'+data.productId).style.display = "block"
		}else{
		
				var chart = $E('div',append,{html:'Add To Comparison',className:'chart', id:'chart_'+data.productId})
					chart.carry = data.productId
					chart.onclick = function(){
						dw.comp.push(this.carry)
						dw.rebuildDropZone()
						
						//remove drag ability
						if(dw.vars.view == 0){
							var ele = $C('thumb',this.parentNode)[0]
						}else{
							var ele = $C('thumb',this.parentNode.parentNode)[0]
						}
						
						ele.parentNode.removeChild(ele)
						
						//hide icon
						this.style.display = "none"
				}
		}
	},
	
	//BEGIN LIST VIEW
	pidList: function(index, data){
		
		//create holder
		var pidRec = document.createElement('div')
		pidRec.className = 'pidRec'
		pidRec.id = 'pidRec-'+data.productId
		pidRec.style.top = (index *50)+10 + 'px'
		
		
		//add additional background style to even recs
		if(Math.ceil(index/2) == (index/2)){
			Element.addClassName(pidRec,'pidRecAlt')
		}
		
		//image
		var thumb = views.pullImage(data,'main','T50')
		
		thumbBack = $E('div',pidRec,{className:'thumbBack'})
		thumbBack.style.backgroundImage = 'url(' + thumb + ')'
		
		//check compgrid array
		if(!Utility.valTest(dw.comp,data.productId)){
			views.buildDragImagePidList(data,pidRec)
			
			//add compare icon
			views.addChart(data,pidRec)
		}
		
		//content holder
		var content = document.createElement('div')
		content.className = 'content'
		
		//more colors
		var trunc = 50
		var colors = views.getColor(data)
		if(colors){
			trunc = 40
		}
		
		//add product title
		var title = $E('span',content,{html:views.getTitle(data,trunc), className:'title'})
		title.carry = data.productId
		title.onclick = function(){
			showProductPopup(this.carry, dw.config.services.getExpressShop.pars.categoryID, '0', data.promoId, 'narrow');
		}
		
		if(colors){
			var info = ''
			for(var i=0; i<colors.length; i++){
				info += '<div>'+colors[i]+'</div>'
			}
			var color = $E('span',content,{html:'<img src="../images/WIZ_DFT_dw/more_colors.gif" />'})	
			var ins = new tip(color,{dataString:info,pointerClass:'pointer2',tipClass:'tip2',direction:'up'})
		
		}
		
		$E('div',content,{className:'spacer'})
		
		//price
		var html = views.getPrice(data)
		$E('span',content,{html:html})
		
		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('span',content,{className:'cP', html:'&nbsp;<span class="fB redLink">' + html + '</span>'})
			promo.promoId = data.promoId
			promo.promoTitle = data.promoTitle
			promo.onclick = function(){
				views.showPromo(this.promoTitle,this.promoId)
			}
		}
		
		pidRec.appendChild(content)
		
		return pidRec
	},
	
	buildDragImagePidList: function(data,pidRec){
		
		var thumb = views.pullImage(data,'main','T50')
		
		thumbFront = $E('div',pidRec,{className:'thumb'})
		thumbFront.style.backgroundImage = 'url(' + thumb + ')'
		thumbFront.carry = [new String().uId(),new String().uId()]
		thumbFront.pidId = data.productId
		thumbFront.onmouseover = function(){
			this.parentNode.style.zIndex = 2
			Size.XY(this,{X:52, Y:52, skip:1, time:100, timerVar:this.carry[0]})
		}
		thumbFront.onmouseout = function(){
			views.listImageOff(this)
		}
		//set dragging for comp grid
		dw.drag(thumbFront);
	},
	
	listImageOff: function(ele){
		var dem = 34
		if(Global.ie)dem = 40
		
		Size.XY(ele,{X:dem, Y:dem, skip:1, time:100, timerVar:ele.carry[0], onComplete: function(){
			ele.parentNode.style.zIndex = 1
		}});
		
	},
	//END LIST VIEW
	
	//BEGIN THUMB VIEW
	pidThumb: function(index, data){
		//create holder
		var pidRec = document.createElement('div')
		pidRec.id = 'pidRec-'+data.productId
		pidRec.className = 'pidRec2'
		
		if(index>3){
			pidRec.style.top = (2 *133)+10 + 'px'
		}else if(index>1){
			pidRec.style.top = (1 *133)+10 + 'px'
			Element.addClassName(pidRec,'pidRecAlt2')
		}else{
			pidRec.style.top = (0 *133)+10 + 'px'
		}
		
		//add additional background style to even recs
		if(Math.ceil(index/2) != (index/2)){
			pidRec.style.left = 265+10 + 'px'
		}
		
		//image
		var thumb = views.pullImage(data,'main','THN')
		
		thumbBack = $E('div',pidRec,{className:'thumbBack'})
		thumbBack.style.backgroundImage = 'url(' + thumb + ')'
		
		//check compgrid array
		if(!Utility.valTest(dw.comp,data.productId)){
			views.buildDragImagePidThumb(data,pidRec)
		}
		
		//content holder
		var content = document.createElement('div')
		content.className = 'content'
		
		//add product title
		var title = $E('div',content,{html:views.getTitle(data,24), className:'title'})
		title.carry = data.productId
		title.onclick = function(){
			showProductPopup(this.carry,dw.config.services.getExpressShop.pars.categoryID,'0', data.promoId, 'narrow');
		}
		
		//colors
		var colors = views.getColor(data)
		if(colors){
			var info = ''
			for(var i=0; i<colors.length; i++){
				info += '<div>'+colors[i]+'</div>'
			}
			var color = $E('div',content,{html:'<img src="../images/WIZ_DFT_dw/more_colors.gif" />'})	
			color.style.margin = '4px 0 2px 0';
			var ins = new tip(color,{dataString:info,pointerClass:'pointer2',tipClass:'tip2',direction:'up'})
		
		}
		
		//price
		var html = views.getPrice(data)
		$E('div',content,{html:html})
		
		
		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('div',content,{className:'promo', html:'<span class="fB redLink">' + html + '</span>'})
			promo.promoId = data.promoId
			promo.promoTitle = data.promoTitle
			promo.onclick = function(){
				views.showPromo(this.promoTitle,this.promoId)
			}
		}
		
		//check compgrid array
		if(!Utility.valTest(dw.comp,data.productId)){
			//add compare icon
			views.addChart(data,content)
		}
		
		pidRec.appendChild(content)
		
		return pidRec
	},
	
	buildDragImagePidThumb: function(data,pidRec){
		var thumb = views.pullImage(data,'main','THN')
		thumbFront = $E('div',pidRec,{className:'thumb'})
		thumbFront.style.backgroundImage = 'url(' + thumb + ')'
		thumbFront.pidId = data.productId
		
		//set dragging for comp grid
		dw.drag(thumbFront);
	},
	//END THUMB VIEW
	
	//BEGIN DETAIL VIEW
	pidDetail: function(index, data){
		//create holder
		var pidRec = document.createElement('div')
		pidRec.id = 'pidRec-'+data.productId
		pidRec.className = 'pidRec3'
		
		pidRec.style.left = (index*170) + 10 + 'px'
		
		//content holder
		var content2 = document.createElement('div')
		content2.className = 'content2'
		
		//add product title
		var title = $E('div',content2,{html:views.getTitle(data,50), className:'title'})
		title.carry = data.productId
		title.onclick = function(){
			showProductPopup(this.carry,dw.config.services.getExpressShop.pars.categoryID,'0', data.promoId, 'narrow');
		}
		
		//colors
		var colors = views.getColor(data)
		if(colors){
			var info = ''
			for(var i=0; i<colors.length; i++){
				info += '<div>'+colors[i]+'</div>'
			}
			var color = $E('div',content2,{html:'<img src="../images/WIZ_DFT_dw/more_colors.gif" />'})	
			color.style.margin = '4px 0 2px 0';
			var ins = new tip(color,{dataString:info,pointerClass:'pointer2',tipClass:'tip2',direction:'up'})
		
		}
		
		//price
		var html = views.getPrice(data)
		$E('div',content2,{html:html})
		
		//image
		var thumb = views.pullImage(data,'main','T130')
		
		thumbBack = $E('div',pidRec,{className:'thumbBack'})
		thumbBack.style.backgroundImage = 'url(' + thumb + ')'
		
		//check compgrid array
		if(!Utility.valTest(dw.comp,data.productId)){
			views.buildDragImagePidDetail(data,pidRec)
		}
		
		//content holder
		var content = document.createElement('div')
		content.className = 'content'
		
		//details
		var details = $E('div',content,{className:'details', html:'View Product Details'})
		details.carry = data.productId
		details.onclick = function(){
			showProductPopup(this.carry,dw.config.services.getExpressShop.pars.categoryID,'0', data.promoId, 'narrow');
		}
		
		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('div',content,{className:'promo fB redLink', html:html})
			promo.promoId = data.promoId
			promo.promoTitle = data.promoTitle
			promo.onclick = function(){
				views.showPromo(this.promoTitle,this.promoId)
			}
		}
		
		//check compgrid array
		if(!Utility.valTest(dw.comp,data.productId)){
			//add compare icon
			views.addChart(data,content)
		}
		
		
		pidRec.appendChild(content)
		pidRec.appendChild(content2)
		
		return pidRec
	},
	
	buildDragImagePidDetail: function(data,pidRec){
		var thumb = views.pullImage(data,'main','T130')
		thumbFront = $E('div',pidRec,{className:'thumb'})
		thumbFront.style.backgroundImage = 'url(' + thumb + ')'
		thumbFront.pidId = data.productId
		
		//set dragging for comp grid
		dw.drag(thumbFront);
	},
	//END DETAIL VIEW
	
	
	//Initial load message
	firstTimeLoad: function(){
		if(Global.ie6){
			$('welcome').style.backgroundImage = 'none'
			$('welcome').style.border = '1px solid #cdd9e6'
			$('welcome').style.backgroundColor = '#fcfde5'
		}
		$('welcome').style.display = 'block'
		
		setTimeout(function(){
			$('welcome').style.display = 'none'					
		},6000);
	},
	
	
	//pagination
	buildPagination: function(){
		var cur = dw.vars.currentPage;
		$('pagination').innerHTML = ''
		//write pages
		for(var i=0; i<dw.vars.totalPages; i++){
			var page = document.createElement('div')
			page.carry = i
			page.innerHTML = i+1
			page.onclick = function(){
				var nodes = $('pagination').getElementsByTagName('div');
				for(var i=0; i<nodes.length; i++){
					nodes[i].className = ""
				}
				dw.goToPage(this.carry)
				this.className = "on"
			}
			//highlight page in pagination
			if(i == cur){
				page.className = "on"
			}
			$('pagination').appendChild(page)
		}	
	}
	/*
	buildPagination: function(){
		var node = $('pagination')
		var total = dw.vars.totalPages;
		$('pagination').innerHTML = '';
		
		if(total > 1){
			$('pagination').style.display = "block";
			var prev = $E('div',node,{html:'Previous',className:"leftArrowOff"});
			prev.onclick = function(){
				if(dw.vars.currentPage > 0){
					dw.vars.currentPage--
					display.innerHTML = '<strong>Viewing Page:</strong> ' + (dw.vars.currentPage+1) + ' of ' + total;
					dw.goToPage(dw.vars.currentPage)
				
					next.className="rightArrowOn";
					if(dw.vars.currentPage == 0){
						this.className="leftArrowOff"
					}
				}
			}
		
			var next = $E('div',node,{html:'Next',className:"rightArrowOn"});
			next.onclick = function(){
				if(dw.vars.currentPage+1 < total){
					dw.vars.currentPage++
					display.innerHTML = '<strong>Viewing Page:</strong> ' + (dw.vars.currentPage+1) + ' of ' + total;
					dw.goToPage(dw.vars.currentPage)
					
					prev.className="leftArrowOn";
					if(dw.vars.currentPage == total){
						this.className="rightArrowOff"
					}
				}
			}
			
			
			var html = '<strong>Viewing Page:</strong> ' + (dw.vars.currentPage+1) + ' of ' + total;
			var display = $E('div',node,{html:html})
		}else{
			$('pagination').style.display = "none";
		}
	}*/
}