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 = ''

		//for zales only
		var fakePrice = ''
		if(data.supportsFakeMiddlePr=="Yes" && data.mdDisOnlyCompPrice){
			var fakePrice = ' <div>Sale ' + parseFloat(data.mdDisOnlyCompPrice).dollars(); + '</div>';
		}

		if(data.priceType == 'S'){
			html = '<div class="fB">' + parseFloat(data.price).dollars() + '</div>'
		}else if(data.priceType == 'VP'){
			html = '<div class="fB">'+ parseFloat(data.basePrice).dollars() + '</div> ' + fakePrice + ' <div class="fB redText">Now ' + parseFloat(data.price).dollars() + '</div>'
		}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 = '<div class="fB">' + prices.min().dollars() + ' - ' + prices.max().dollars()+ '</div>'
			}else{
				html = '<div class="fB">' + parseFloat(data.basePrice).dollars() +'</div> ' + fakePrice + ' <div class="redText">Now ' + prices.min().dollars() + ' - ' + prices.max().dollars() + '</div>'
			}
		}
		return html
	},

	getMoreProdInfo: function(data, subData){
		var html = data[subData];
		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,{innerHTML:'Compare',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"
				}
		}
	},

	detailPop: function(data){
		var html = ''
		html += '<img class="prodImage" src="'+views.pullImage(data,'main','V194x261')+'"/>';
		html += '<div class="title">'+views.getTitle(data)+'</div>';
		html += '<div class="price">'+views.getPrice(data)+'</div>';
		html += '<div class="des">'+data.longDescription+'</div>';
		return html;
	},

	//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('a',content,{innerHTML:views.getTitle(data,trunc), className:'title'})
		title.href = data.productBaseURL + data.productId

		var ins2 = new tip(title,{pointerClass:'pointer3',tipClass:'tip3',direction:'up',x:100,dataString:views.detailPop(data)})

		if(colors){
			var info = ''
			for(var i=0; i<colors.length; i++){
				info += '<div>'+colors[i]+'</div>'
			}
			var color = $E('span',content,{innerHTML:'<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,{innerHTML:html})

		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('span',content,{className:'cP', innerHTML:'&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>5){
			pidRec.style.top = (3 *133)+10 + 'px'
			Element.addClassName(pidRec,'pidRecAlt2')
		}else 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('a',content,{innerHTML:views.getTitle(data,1000), className:'title'})
		title.href = data.productBaseURL + data.productId

		var ins2 = new tip(title,{pointerClass:'pointer3',tipClass:'tip3',direction:'up',x:50,dataString:views.detailPop(data)})

		//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,{innerHTML:'<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,{innerHTML:html, className:"price"})


		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('div',content,{className:'promo', innerHTML:'<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'

		if(index>9){
			pidRec.style.top = (2 *370) + 'px'
			pidRec.style.left = ((index-10)*144) + index-10 + 'px'
			//$("pidHolder").style.height = (3 *370) + 'px';//"1110px";
		}else if(index>4){
			pidRec.style.top = (1 *370) + 'px'
			pidRec.style.left = ((index-5)*144) + index-5 + 'px'
			//$("pidHolder").style.height = (2 *370) + 'px'//"740px";
		}else{
			pidRec.style.top = 0 + 'px'
			pidRec.style.left = (index*144) + index + 'px'
			//$("pidHolder").style.height = "370px";
		}

		//image
		var thumb = views.pullImage(data,'main','T144x194')

		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,index)
		}

		//content holder
		var content = document.createElement('div')
		content.className = 'content'
			content.pidId = data.productId
			content.cp = cps()
			content.catId = dw.config.services.getExpressShop.pars.catId
			content.onclick = function(){
				//initLightbox();
				//showProductPopup(this.pidId,this.cp,this.catId,index);
			}

/*
		//add product title
		var title = $E('a',content,{innerHTML:views.getTitle(data,1000), className:'title'})
		title.carry = data.productId
		title.onclick = function(){
			showProductPopup(this.carry,dw.config.services.getExpressShop.pars.catId,'0', data.promoId, 'narrow');
		}
*/
		//title.href = data.productBaseURL + data.productId

		//var ins2 = new tip(title,{pointerClass:'pointer3',tipClass:'tip3',direction:'up',x:50,dataString:views.detailPop(data)})

		//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,{innerHTML:'<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'})

		}
		var wrapperLinkTag = $E('a',content,{rel:"lightbox",href:"javascript:void(0);"});
		var divBtn = $E('div',wrapperLinkTag,{id:"wrapperDiv",className:"holderEmpty"});
			divBtn.pidId = data.productId
			divBtn.cp = cps()
			divBtn.catId = dw.config.services.getExpressShop.pars.catId
			divBtn.coreMet = dw.config.services.getExpressShop.pars.giftWizard
			divBtn.onclick = function(){
//				initLightbox();
				GSI.showExpressShop(this.pidId,this.cp,this.catId,index, this.coreMet)
			//	arcProdDetails(this.pidId);
			//	showProductPopup(this.pidId,this.cp,this.catId,index, this.coreMet);
			}
		//brand
		var html = views.getMoreProdInfo(data,"bbwBrand")


		$E('div',divBtn,{innerHTML:html, className:"brand"})

		//long Title and Fragrance
		var lTitle = views.getMoreProdInfo(data,"longTitle") || ""
		var longT = $E('div',divBtn,{innerHTML:lTitle, className:"longTitle"})
		var frag = views.getMoreProdInfo(data,"bbwFragranceClr") || "";
		var longT = $E('div',divBtn,{innerHTML:frag, className:"frag"})

		//price
		var html = views.getPrice(data)
		$E('div',divBtn,{innerHTML:html, className:"price"})




		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $E('div',divBtn,{className:'promo fB redLink', innerHTML: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)

		return pidRec
	},
	hasOverflow: function(el) {
		var h1 = Element.getHeight(el);
		Element.setStyle(el,{overflow:"hidden",whiteSpace:"nowrap"});
		var h2 = Element.getHeight(el);
		Element.setStyle(el,{overflow:"visible",whiteSpace:"normal"});
		return ( h1 > h2 );
	},

	buildDragImagePidDetail: function(data,pidRec,index){
		cps = function(){
			var cp
			for(ii=0;ii<data.primaryPathCategory.length;ii++){
				if (ii<1){
					cp = data.primaryPathCategory[ii].id;
				}else{
					cp += "."+data.primaryPathCategory[ii].id;
				}
			}
			if (cp == undefined){
				cp = "";
			}
			return cp;
		}
		var wrapperLinkTag2 = $E('a',pidRec,{rel:"lightbox",href:"javascript:void(0);"});
		var divBtn2 = $E('div',wrapperLinkTag2,{id:"wrapperDiv",className:"holderEmpty"});
			divBtn2.pidId = data.productId
			divBtn2.cp = cps()
			divBtn2.catId = dw.config.services.getExpressShop.pars.catId
			divBtn2.coreMet = dw.config.services.getExpressShop.pars.giftWizard
			divBtn2.onclick = function(){
//				initLightbox();
				GSI.showExpressShop(this.pidId,this.cp,this.catId,index, this.coreMet)
				//arcProdDetails(this.pidId);
			//	showProductPopup(this.pidId,this.cp,this.catId,index, this.coreMet);
			}
		var thumb = views.pullImage(data,'main','T144x194')
		thumbFront = $E('div',divBtn2,{className:'thumb'})
		thumbFront.style.backgroundImage = 'url(' + thumb + ')'
		//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 = '<div class="pagText">PAGE</div>'
		//write pages
		for(var i=0; i<dw.vars.totalPages; i++){
			var page = document.createElement('div')
			page.carry = i
			page.innerHTML = i+1
			page.className = "pagination_linked";
			page.onclick = function(){
				var nodes = $('pagination').getElementsByTagName('div');
				for(var i=0; i<nodes.length; i++){
					nodes[i].className = "pagination_linked"
				}
				dw.goToPage(this.carry)
				this.className = "pagination_nothot"
			}
			//highlight page in pagination
			if(i == cur){
				page.className = "pagination_nothot"
			}
			$('pagination').appendChild(page)
		}
	}
	*/

	buildPagination: function(){
		var total = dw.vars.totalPages;
		var nodes = $$('#holder .pagination')
		
		nodes.each(function(v){
			v.innerHTML = '';
		})

		if(total > 1){
			nodes.each(function(v){
				
				var display = $E('div',v,{innerHTML: ('Page ' + (dw.vars.currentPage+1) + ' of ' + total) })
				var prev = $E('div',v,{className:"leftArrowOff"});
				var next = $E('div',v,{className:"rightArrowOn"});
				$E('div', v, {innerHTML:"Go to page"})
				var gotoInput = $E('input', v, {className:"gotoInput"})
				var gotoBtn = $E('div', v, {className:"gotoBtn"})
				
				prev.observe('click', function(e){
					if(dw.vars.currentPage > 0){
						dw.vars.currentPage--
						
						nodes.each(function(v){
							v.down('div').innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + this.total;
							v.down('div').next('div').className="leftArrowOn";
							v.down('div').next('div').next('div').className="rightArrowOn";
							if(dw.vars.currentPage+1 == this.total){
								v.down('div').next().next('div').className="rightArrowOff"
							}
							if(dw.vars.currentPage == 0){
								v.down('div').next('div').className="leftArrowOff"
							}
						}.bind({total: this.total}))
						
						dw.goToPage(dw.vars.currentPage)
						
					}
				}.bind({display: display, next: next, prev:prev, gotoBtn: gotoBtn, total:total, nodes:nodes}));
				
				next.observe('click', function(e){
					if(dw.vars.currentPage+1 < total){
						dw.vars.currentPage++
						
						nodes.each(function(v){
							v.down('div').innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + this.total;
							v.down('div').next('div').className="leftArrowOn";
							v.down('div').next('div').next('div').className="rightArrowOn";
							if(dw.vars.currentPage+1 == this.total){
								v.down('div').next('div').next('div').className="rightArrowOff"
							}
							if(dw.vars.currentPage == 0){
								v.down('div').next('div').className="leftArrowOff"
							}
						}.bind({total: this.total}))
						
						dw.goToPage(dw.vars.currentPage)
						
					}
				}.bind({display: display, next: next, prev:prev, gotoBtn: gotoBtn, total:total, nodes:nodes}));
			
				gotoBtn.observe('click', function(e){
					page = this.gotoInput.value;
					this.gotoInput.value = '';
					if(page){
						if(parseInt(page)){
							if(page>this.total){
								page = this.total
							}else if(page<1){
								page = 1
							}
							dw.vars.currentPage = page-1
	
							nodes.each(function(v){
								v.down('div').innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + this.total;
								v.down('div').next('div').className="leftArrowOn";
								v.down('div').next('div').next('div').className="rightArrowOn";
								if(dw.vars.currentPage+1 == this.total){
									v.down('div').next('div').next('div').className="rightArrowOff"
								}
								if(dw.vars.currentPage == 0){
									v.down('div').next('div').className="leftArrowOff"
								}
							}.bind({total: this.total}))
							
							dw.goToPage(dw.vars.currentPage)
						}
					}
				}.bind({display: display, next: next, prev:prev, gotoBtn: gotoBtn, gotoInput: gotoInput, total:total, nodes:nodes}));
			})
		}
	}
}