Ext.onReady(function(){

	window.productDescriptions = {};
	window.currentThumb = 0;
	window.currentPage = 1;
	
	var url = '/products/json'
		,params = {sort: 'name'}
		,navLeft = Ext.get('gallery').child('.art .navleft a')
		,navRight = Ext.get('gallery').child('.art .navright a')
		,thumbNavLeft = Ext.get('thumbs').child('.navleft a')
		,thumbNavRight = Ext.get('thumbs').child('.navright a')
		,productData = {}
		,paypalAddForm = Ext.get('paypal-add-form')
		,paypalAmount = Ext.get('paypal-amount')
		,paypalProductTitle = Ext.get('paypal-product-title')
		,thumbs = Ext.get('thumbs').select('.thumb')
		,productDiv = Ext.get('productdetails').child('div')
		,unavailable = Ext.get('unavailable')
		,productH = Ext.get('productdetails').child('h1')
		,photoDiv = Ext.get('gallery').child('.art').child('.frame');
		
		
	if(typeof tagFilter != "undefined")
		params.tag = tagFilter;
		
	
	Ext.Ajax.request({
		url: url
		,params: params
		,success: gotData
		,failure: noData
	});
	
	/*
	paypalAddForm.on('submit', function(ev, t) {
	
		paypalProductTitle.dom.value += ' - ' + paypalAmount.dom.options[paypalAmount.dom.selectedIndex].innerHTML;
	
	});
	*/
	
	
	function gotData(r, opt) {
		var products = Ext.decode(r.responseText).data
			,wrap = Ext.get('thumbs-wrapper').update(null)
			,spec = [];
		
		Ext.each(products, function(product){
	
			productData[product.Handle] = product;
	
			var productDom = {
				tag: 'a'
				,cls: 'thumb'
				,href: '/thumbnail/' + product.PrimaryPhotoID + '/530x359x666666'
				,'data-handle': product.Handle
				,cn: [{
					tag: 'img'
					,src: '/thumbnail/' + product.PrimaryPhotoID + '/75x50x666666'
					,alt: product.Title
				}]
			}
			
			spec.push(productDom);
		});
		
		Ext.DomHelper.overwrite(wrap, spec);
		
		thumbs = Ext.get('thumbs').select('.thumb');
		
		attachThumbEvents();
		selectThumb(Ext.get('thumbs').child('.thumb'));
		var thumbCount = thumbs.getCount();
		window.lastThumb = thumbCount - 1;
		window.lastPage = Math.floor(thumbCount / 8) + 1;
	}
	
	function noData() {
		alert('There was a problem getting art from the server. Please reload the page to try again.');
	}
	
	function attachThumbEvents() {
		thumbs.on('click', clickThumb);
	}
	
	function clickThumb(ev, t) {
		ev.preventDefault();
		var thumb = ev.getTarget('.thumb', null, true);
		selectThumb(thumb);
	}
	
	function selectThumb(thumb) {
		var thumb = Ext.get(thumb)
			,handle = thumb.getAttribute('data-handle')
			,product = productData[handle]
			,photo = thumb.getAttribute('href')
			,photoDom = { tag: 'img', src: photo, alt: product.Title, width: 530, height: 359 }
			,productDiv = Ext.get('productdetails').select('div')
			,productH = Ext.get('productdetails').select('h1');
		
		
		Ext.DomHelper.overwrite(photoDiv, photoDom);
		//productDiv.update(product.Description);
		productH.update(product.Title);
		
		// collapse tags into string array
		var productTags = [];
		Ext.each(product.tags, function(tag) {
			productTags.push(tag.Handle);
		});
		

		
		// update paypal form
		/*
		paypalProductTitle.dom.value = product.Title;
		paypalAmount.update('');
		
		
		if(productTags.indexOf('film') != -1)
		{
			// If tag='film' show all three
			paypalAmount.createChild({
				tag: 'option'
				,value: '2,500.00'
				,html: '40x60" - Print ($2,500)'
			});
			
			paypalAmount.createChild({
				tag: 'option'
				,value: '1,750.00'
				,html: '30x40" - Print ($1,750)'
			});
			paypalAmount.createChild({
				tag: 'option'
				,value: '875.00'
				,html: '20x30" - Print ($875)'
			});
		}
		else if(productTags.indexOf('digital') != -1)
		{
			// If tag='digital' only show these two
			paypalAmount.createChild({
				tag: 'option'
				,value: '1,750.00'
				,html: '30x40" - Print ($1,750)'
			});
			paypalAmount.createChild({
				tag: 'option'
				,value: '875.00'
				,html: '20x30" - Print ($875)'
			});
		}
		
		// If tag='unavailable' it should remove 'add to cart' all together
		if(productTags.indexOf('unavailable') != -1)
		{
			paypalAddForm.hide();
			unavailable.show();
		}
		else
		{
			paypalAddForm.show();
			unavailable.hide();
		}
		*/
		// If tag='installation' it should remove unavailable text
		if(productTags.indexOf('installation') != -1)
		{
			//unavailable.hide();
		}
		
		thumb.radioClass('current');
			
		window.currentThumb = thumbs.indexOf(thumb);
		
		var newThumbPage = Math.floor(currentThumb/8) + 1;
		
		if (currentPage < newThumbPage) {
			thumbScrollRight();
		} else if (currentPage > newThumbPage){
			thumbScrollLeft();
		}
	
	}
	
	navLeft.on('click', function(ev, t){
		ev.preventDefault();
		if (currentThumb > 0) {
			var prevThumb = currentThumb-1;
		} else {
			var prevThumb = currentThumb;
			// var prevThumb = lastThumb;
		}
		selectThumb(thumbs.item(prevThumb));
	});
	
	navRight.on('click', function(ev, t){
		ev.preventDefault();
		if (currentThumb < lastThumb) {
			var nextThumb = currentThumb+1;
		} else {
			var nextThumb = currentThumb;
			// var nextThumb = 0;
		}
		selectThumb(thumbs.item(nextThumb));
	});
	
	thumbNavLeft.on('click', thumbScrollLeft);
	
	thumbNavRight.on('click', thumbScrollRight);
	
	function thumbScrollLeft(ev){
		if (ev) ev.preventDefault();
		var frame = Ext.get('thumbs').child('.frame')
			,frameW = frame.getWidth()
			,wrap = Ext.get('thumbs-wrapper')
			,wrapW = wrap.getWidth()
			,wrapM = parseInt(wrap.getStyle('marginLeft'));
			
		if (wrapM + frameW <= 0) { // if a push to the right won't make the content scroll right of 0
			wrap.animate({ marginLeft: { by: frameW } }, .1, null, 'easeOut');
			currentPage--;
		} else {
			// wrap.animate({ marginLeft: { to: -(wrapW - (wrapW % frameW)) } }, .1, null, 'easeOut'); // scroll to the last 'page'
			// currentPage = lastPage;
		}
	}
	
	function thumbScrollRight(ev){
		if (ev) ev.preventDefault();
		var frame = Ext.get('thumbs').child('.frame')
			,frameW = frame.getWidth()
			,wrap = Ext.get('thumbs-wrapper')
			,wrapW = wrap.getWidth()
			,wrapM = parseInt(wrap.getStyle('marginLeft'));
			
		if (Math.abs(wrapM) + frameW < wrapW) { // if a push to the left won't make the content scroll entirely out of view
			wrap.animate({ marginLeft: { by: -frameW } }, .1, null, 'easeOut');
			currentPage++;
		} else {
			// wrap.animate({ marginLeft: { to: 0 } }, .1, null, 'easeOut');
		}
	}
	

});