var pidRecTracking = 0; /* track number of items per row style */

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

	setInfo: function(ele) {
//		return new Df.Box(ele).getWrapper();
	},

	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">Sale: ' + 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">Sale: ' + prices.min().dollars() + ' - ' + prices.max().dollars() + '</div>'
			}
		}
		html +='<div class="breakerActive"></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
	},
/*
	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 DETAIL VIEW
	pidDetail: function(index, data){
		//create holder
		var pidRec = document.createElement('div')
		pidRec.id = 'pidRec-'+data.productId
		
			pidRec.className = 'pidRec'+((index + 1) % 4)+' pidOut';
		
		if(index>7){
		    pidRec.style.top = (2 *306) + 'px'
		    pidRec.style.left = ((index-8)*167) + index-10 + 'px'
		}else if(index>3){
		    pidRec.style.top = (1 *306) + 'px'
		    pidRec.style.left = ((index-4)*167) + index-5 + 'px'
		}else{
		    pidRec.style.top = 0 + 'px'
		    pidRec.style.left = (index*167) + index + 'px'
		}

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

		//var thumbBack = Df.e('div',pidRec,{className:'thumbBack'})
		var thumbBack = $(pidRec).e('div','bottom',{className:'thumbBack'})
		thumbBack.style.backgroundImage = 'url(' + thumb + ')'

		//content holder
		var content = document.createElement('div')
		content.className = 'content'

/*
		//add product title
		var title = Df.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 = Df.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'})

		}

		//long Title and Fragrance
		var lTitle = views.getMoreProdInfo(data,"longTitle") || ""
		var longT = $(content).e('div','bottom',{innerHTML:lTitle, className:"longTitle"})
		longT.observe('click', function(e){
			window.location= '/product/index.jsp?productId='+ data.productId
		})

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

		//get promo
		var html = views.getPromo(data)
		if(html){
			var promo = $(content).e('div','bottom',{className:'promo fB redLink', innerHTML:html+"**"})
			promo.promoId = data.promoId
			promo.promoTitle = data.promoTitle
			promo.onclick = function(){
				views.showPromo(this.promoTitle,this.promoId)
			}
		}
		//ratings
		if(hasPowerReviews){
			var ratingHolder = Df.e('div', {className:'ratingHolder'})
			var rating = Df.e('div', {className:'rating'})
			//document.write('<!-- hidden rating: data.averageReviewRating -->');
			if(data.averageReviewRating == 0){
				rating.style.display = 'none';
			}else{
				rating.style.width = data.averageReviewRating * 19 + 'px'
				content.appendChild(ratingHolder)
				ratingHolder.appendChild(rating)
			}
			
		}
		views.buildCompare(data,pidRec)

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

	buildCompare: function(data,pidRec){

			var thumb = views.pullImage(data,'main','T130')
			var thumbFront = $(pidRec).e('div','bottom',{className:'thumb'})
			thumbFront.style.backgroundImage = 'url(' + thumb + ')'
			var tipImgSrc = views.pullImage(data,"main","REG")
			
			// start :: SMP 4600 - Use the store attrib "expressShopActive" to conditional turn this on and off
			if(isESActive === 'true'){
				var thumbTip = thumbFront.tip({
						data: $(document.createElement('div')).insert('<div style="background-image:url(\''+ tipImgSrc +'\')" class="tipImg"></div><div class="tipDetails"><div class="tipHead">'+ data.longTitle +'</div><div class="tipBody">'+ data.shortDescription +'</div><a href="/product/index.jsp?productId='+ data.productId +'" class="learnMore">Learn More</a></div><br clear="all"/>').box().getWrapper(),
						pointerOrientation: 'top',
						xOffsetPointer: -60,
						yOffsetPointer: -9,
						xOrientation: 'center',
						yOrientation: 'top',
						animate: {
							time:200,
							opacity:1
						}
				});
			} else {
				var thumbTip = thumbFront.tip({ });
			}
			// end :: SMP 4600 
			thumbTip.holder.setStyle({opacity:0});

			thumbFront.observe('click', function(e){
				window.location= '/product/index.jsp?productId='+ data.productId
			})
			var mask = new Df.Ui($(thumbFront).e('div','bottom', {className:'mask'}),{animate: {opacity: .25}})
			mask.getElement().createNS('df').ui = mask

			thumbFront.df_ui = new Df.Ui(thumbFront);

			//check compgrid array
			if(Utility.valTest(dw.comp, data.productId)){
				pars.eventType = false
				mask.show()
			}
	},
	//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(){
		views.buildPaginationControls('paginationTop')
		views.buildPaginationControls('paginationBottom')
	},

	buildPaginationControls: function(pagEle){
		var node = $(pagEle)
		var total = dw.vars.totalPages;
		$(pagEle).innerHTML = '';

		if(total > 1){

			var prev = node.e('div','bottom',{className:"leftArrowOff"});
			prev.onclick = function(){
				if(dw.vars.currentPage > 0){
					dw.vars.currentPage--

					display.innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + total;
					dw.goToPage(dw.vars.currentPage)

					$$('.rightArrowOff').each(function(v){
						v.className = 'rightArrowOn'
					})
					if(dw.vars.currentPage == 0){
						$$('.leftArrowOn').each(function(v){
							v.className = 'leftArrowOff'
						})
					}else{
						$$('.leftArrowOff').each(function(v){
							v.className = 'leftArrowOn'
						})
					}
				}
			}

			var html = 'Page ' + (dw.vars.currentPage+1) + ' of ' + total;
			var display = node.e('div','bottom',{innerHTML:html})

			var next = node.e('div','bottom',{className:"rightArrowOn"});
			next.onclick = function(){
				if(dw.vars.currentPage+1 < total){
					dw.vars.currentPage++
					display.innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + total;
					dw.goToPage(dw.vars.currentPage)

					$$('.leftArrowOff').each(function(v){
						v.className = 'leftArrowOn'
					})

					if(dw.vars.currentPage+1 == total){
						$$('.rightArrowOn').each(function(v){
							v.className = 'rightArrowOff'
						})
					}
				}
			}

			node.e('div','bottom',{innerHTML:"Go to page"})
			var gotoInput = node.e('input','bottom',{className:"gotoInput"})
			var gotoBtn = node.e('div','bottom',{className:"gotoBtn"})
			gotoBtn.onclick = function(){
				page = this.select('.gotoInput')[0].value;
				this.value = '';
				if(page){
					if(parseInt(page)){
						if(page>total){
							page = total
						}else if(page<1){
							page = 1
						}
						dw.vars.currentPage = page-1

						display.innerHTML = 'Page ' + (dw.vars.currentPage+1) + ' of ' + total;
						dw.goToPage(dw.vars.currentPage)

						$$('.leftArrowOff').each(function(v){
							v.className = 'leftArrowOn'
						})

						$$('.rightArrowOff').each(function(v){
							v.className = 'rightArrowOn'
						})

						if(dw.vars.currentPage+1 == total){
							$$('.rightArrowOn').each(function(v){
								v.className = 'rightArrowOff'
							})
						}
						if(dw.vars.currentPage == 0){
							$$('.leftArrowOn').each(function(v){
								v.className = 'leftArrowOff'
							})
						}
					}
				}
			}.bind(node)
		}
	}

}