/*
	 * Modes:
	 * 0. initialization
	 * 1. shop
	 * 2. delivery
	 * 3. checkout/payment
	 */
vpClient.addMethods({

	initShop: function(){
		waiter();
		this.shopObj = new wps.objectShop($('basket'), this);
		this.mode = 1;
		this.deliveryCosts = 4;
		this.shopObj.cartCount = this.basketCount;
		//this.template = '';
		this.projectLinks = new Array();
		// loop through DOM
		if (this.is_ie()){
			var first = this.DOM.childNodes.item(1);
		}else{
			var first = this.DOM.firstChild;
		}
		var projectsNodes = first.childNodes;
		if (!this.template){
			this.template = this.setupShopVariables(projectsNodes);
		}

		var tmp = this.getNavigator(this.template);// get content & navigation (returned in an object)

		$('shopContainer').update(tmp.html);
		$('listContainerNavigation').update(tmp.nav);
		$('listContainerNavigation').show();
		
		// initialize events on navigator
		$$('#listContainerNavigation .item').each(
			(function(elem){
				$(elem).observe('click', this.goToShopPage.bindAsEventListener(this));	
			}).bind(this)
		)
		this.buildHeader();
		this.showHideNavArrows();
		this.assignOrderEvents(this.projects);
		this.shopObj.setBasketText();
		unWaiter();
	},

	goToShopPage : function(event){
		this.page = parseInt(event.element().id);
		var tmp = this.getNavigator(this.template);
		$$('#listContainerNavigation .item').each(
			function(elem){
				if (elem == event.element()){
					elem.className = 'item active';
				}else{
					elem.className = 'item';
				}
			}
		)
		$('shopContainer').update( tmp.html);
		this.assignOrderEvents(this.projects);
	},
	
	setupShopVariables : function(projectsNodes){
		var projects = new Array();
		var output = new Array();
		// make up a collection of project nodes, it's hard to move between nodes in a loop
		$A(projectsNodes).each(
			(function(projectNode){
				if (projectNode.nodeName == 'product') {
					var sales = this.getChildObjectByName(projectNode, 'sales');
					if (this.hasChildObjects(sales[0])){
						projects.push(projectNode);
					}
				}	
			}).bind(this)
		)
		var template= '';
		this.projects = projects;
		var projectCnt = this.projects.length;
		// now loop through the nodes the old-fashion-way
		for (var i=0;i<this.projects.length;i++){
			var template= '';
			if (i%2 == 0){
				var shopItem1 = this.drawShopItem(this.projects[i]);
				if (this.projects[i+1]) {
					var shopItem2  = this.drawShopItem(this.projects[i+1]);
				}else{
					var shopItem2  = new Object();
					shopItem2.height = 160;
					shopItem2.html = '';
				}
				if (shopItem1.height > shopItem2.height){
					var height = shopItem1.height;
				}else{
					var height = shopItem2.height;
				}
				if (height < 160) height = 160;
				template += '<div class="project" style="height:' + height + '"> ';
				template += '<div class="left">';
				template += shopItem1.html;
				template += '</div>';
				if (this.projects[i+1]){
					template += '<div class="right">';
					template += shopItem2.html; 
					template += '</div>';
				}
				template += '</div>';
				output.push(template);
			}
		}		
		return output;		
	},
	
	assignOrderEvents: function(projects){
		$A(projects).each(
			(function(projectNode){
				var objID = this.getProductProperty(projectNode, 'product_id');
				
				//$(objID).pKey = this.keyOfPrice(projectNode);
				if ($(objID))	this.addEvent($(objID), 'click', this.addToCart.bind(this));
			}).bind(this)
		)
	},

	keyOfPrice: function(medium){
		var propID ='';
		$A(medium.childNodes).each(
			(function(prop){
				var propName = new String(wps.dom.getElementValue(prop.getElementsByTagName('key').item(0)));
				if (propName.toLowerCase() == 'price'){
					propID =  wps.dom.getElementValue(prop.getElementsByTagName('property_id').item(0));
				}
			}).bind(this)
		)
		return propID;
	},
	
	drawShopItem: function(projectNode){
		var html = '';
		var pID = wps.dom.getElementValue(projectNode.getElementsByTagName('product_id').item(0));
		var title = this.getProductProperty(projectNode, 'name');
		var category = this.getProductProperty(projectNode, 'category');
		
		var runtime = this.getProductProperty(projectNode, 'Running time');
		var year = this.getProductProperty(projectNode, 'Year');
		
		var img = this.getFirstShopImage(projectNode);
		var imgHTML = img.html;
		var sales = this.getChildObjectByName(projectNode, 'sales');
		var medium = this.getProductProperty(sales[0], 'medium');
		var price = this.getProductProperty(sales[0], 'price');
		
		if (imgHTML) html += imgHTML;
		html += '<div class="content"><h1>' + title + '</h1>';
		html += '<span class="specs">' + year + ' | '  + runtime+ '  | ' + category + '</span>    <img src="images/dvd_icon_' + gDisplayColorName + '.jpg"/><br/>';
		html += '<span class="mediaSelect"><select id="mediaSelect_' + this.getProductProperty(projectNode, 'product_id')+ '">'+ this.createMediaSelect(projectNode) + '</select></span>';
		html += '<span id="' + this.getProductProperty(projectNode, 'product_id')+ '" class="orderlink">Add to cart</span></span>';
		html += '</div>';
		return {'html':html, 'height':(parseInt(img.height) + 20)};
	},
	
	createMediaSelect: function(projectNode){
		var sales = this.getChildObjectByName(projectNode, 'sales');
		sales = sales[0];
		var options = '';
		$A(sales.getElementsByTagName('product')).each(
			(function(node){
				var priceObjectID = this.getProductProperty(node, 'product_id');
				var medium = this.getProductProperty(node, 'name');
				var price = this.getProductProperty(node, 'Price');
				options += '<option value="' +  priceObjectID+ '">' + medium + ' - ' + price + '</options>';
			}).bind(this)
		);
		return options;
	},
	
	getFirstShopImage: function(node){
		var sales = this.getChildObjectByName(node, 'sales');
		var salesImage = '';
		$A(sales[0].getElementsByTagName('property')).each(
			function(prop){
				if (wps.dom.getNodeValue(prop.getElementsByTagName('key')) == 'image'){
					if (prop.getElementsByTagName('blobData').length > 0){
						salesImage = prop; 
					}
				}
			}
		)
		var imgID = '';
		var extension = '';
		var filename = '';
		var width = '';
		var height = '';

		if (salesImage){
			var imgID = wps.dom.getElementValue(salesImage.getElementsByTagName('property_id').item(0));
			var filename = wps.dom.getElementValue(salesImage	.getElementsByTagName('fileName').item(0));
			if (filename) extension = filename.substr( (filename.length - 3), filename.length);
		}else{
			var image = this.getChildObjectByName(node, 'media');
			node = image[0];	
			$A(node.childNodes).each(
				(function(childNode){
					if (childNode.nodeName == 'property'){
						var key = wps.dom.getElementValue(childNode.getElementsByTagName('key').item(0));
						if ( (key != 'name') && (imgID =='' ) ) {
							imgID = wps.dom.getElementValue(childNode	.getElementsByTagName('property_id').item(0));
							filename = wps.dom.getElementValue(childNode	.getElementsByTagName('fileName').item(0));
							var sizes = childNode.getElementsByTagName('size');
							if (sizes.length > 0){
								var thumb = filename.substring(0,(filename.length-4)) + '190.' + filename.substring((filename.length-3) , filename.length);
								$A(sizes).each(
									function(sizeNode){
										if (sizeNode.getAttribute('file') == thumb){
											width = sizeNode.getAttribute('width');
											height =  sizeNode.getAttribute('height');
										}
									}
								)
							}
							if (filename) extension = filename.substr( (filename.length - 3), filename.length);
						}
					}
				}).bind(this)
			)

		}

		if (imgID){
			if (extension == 'flv'){
				var html = '<img style="display:none;" src="&amp;action=objectWeb&amp;rpc=1&amp;subAction=getCachedBin&amp;propID='+ imgID+ '">';
				html+= '<object class="projectImage" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="z-index: 99;" data="wpsRepos2/lib/3rd/flashPlayer/flvplayer.swf" type="application/x-shockwave-flash" height="135" width="190">'
				html+= '<param value="#FFFFFF" name="bgcolor">';
				html+= '<param name="movie" value="wpsRepos2/lib/3rd/flashPlayer/flvplayer.swf">';
				html+= '<param name="flashvars" value="file=/upload/objectweb/'+imgID+'.flv&amp;showdigits=true&amp;autostart=false">';
				html+= '<param name="allowScriptAccess" value="sameDomain">';
				html+= '<embed class="projectImage" src="wpsRepos2/lib/3rd/flashPlayer/flvplayer.swf" quality="high" bgcolor="#ffffff" wmode="transparent" style="z-index: 99;" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/upload/objectweb/'+imgID+'.flv&amp;showdigits=false&amp;autostart=false&amp;displayheight=130" height="130" width="190">';
				html+= '</object>';
			}else{
				if (filename){
//					var thumb = filename.substring(0,(filename.length-4)) + '190.' + filename.substring((filename.length-3) , filename.length);
					var html ='';
					html += '<img id="' + imgID + '" src="/upload/objectweb/' + imgID + '_190.jpg" class="projectImage"></img>';
				}else{
					var html = '<img src="/wpsRepos2/images/spacer.gif" class="projectImage" height="120"></img>';
				}
			}
		}else{
			var html = '<img src="/wpsRepos2/images/spacer.gif" class="projectImage" height="120"></img>';
		}
		return {'html':html, 'height':height};
	},
	
	buildHeader: function(){
		this._buildHeader($('headerRight'), 'top');
		this._buildHeader($('headerBottom'), 'bottom');
	},
	
	_buildHeader: function(container, id){
		container.update('');
		var img = Builder.node('img', {src:'images/previous_arrow.gif', align:'left', className:'previousButton', id:'previousButton_' + id});
		container.appendChild(img);
		this.addEvent(img, 'click', this.goPrevious.bind(this));
		
		
		container.style.display = 'block';
		var tab1 = Builder.node('span', {id:'tabChooseFilms_' + id, className:"inactive"}, ['1. CHOOSE FILMS ']);
		tab1.mode = 1;
		var tab2 = Builder.node('span', {id:'tabDelivery_' + id, className:"inactive"}, ['2 DELIVERY + COSTS ']);
		tab2.mode = 2;
		var tab3 = Builder.node('span', {id:'tabPayment_' + id, className:"inactive"}, ['3 PAYMENT']);
		tab3.mode = 3;
		
		container.appendChild(tab1);
		container.appendChild(tab2);
		container.appendChild(tab3);

		this.addEvent(tab1, 'click', this.setMode.bind(this));
		this.addEvent(tab2, 'click', this.setMode.bind(this));
		this.addEvent(tab3, 'click', this.setMode.bind(this));
		
		$('tabChooseFilms_' + id).className = 'active';
		
		var img = Builder.node('img', {src:'images/next_arrow.gif', align:'right', className:'nextButton', id:'nextButton_' + id});
		container.appendChild(img);
		this.addEvent(img, 'click', this.goNext.bind(this));
	},
	
	setNavClass : function(tab, className){
		$(tab + '_top').className = className;
		$(tab + '_bottom').className = className;
	},

	navShow : function(tab){
		$(tab + '_top').show()
		$(tab + '_bottom').show();
	},
	
	navHide: function(tab){
		$(tab + '_top').hide()
		$(tab + '_bottom').hide();
	},
	
	setMode: function(event, mode){
		if (!mode){
			var elem = Event.element(event);
			mode = elem.mode
		}
		if (this.shopObj.cartCount  == 0){
			this.mode = 1; // no items in basket, user should not get to other pages.
			return;
		}
		//reset the tabs first
		this.setNavClass('tabChooseFilms', 'inactive');
		this.setNavClass('tabDelivery', 'inactive');
		this.setNavClass('tabPayment', 'inactive');
		//set views
		switch (mode) {
			case 1:
				new Effect.Appear($('basket'));
				$('listContainerNavigation').show();
				this.setNavClass('tabChooseFilms', 'active');
				$('shopContainer').show();
				$('shipmentContainer').hide();
				$('paymentContainer').hide();
				// handle view init
				this.initShop();
				break;
			case 2:
				$('listContainerNavigation').hide();
				this.setNavClass('tabDelivery', 'active');
				new Effect.Fade($('basket'));
				$('shopContainer').hide();
				$('shipmentContainer').show();
				$('paymentContainer').hide();
				this.mode = 2;
				this.initDelivery();
				break;
			case 3:
				$('listContainerNavigation').hide();
				if (this.validateForm()){
					$('shopContainer').hide();
					$('shipmentContainer').hide();
					$('paymentContainer').show();
					this.setNavClass('tabPayment', 'active');
					this.mode = 3;
					this.initPayment();
				}
				break;
		}		
		this.handleNavButtons();
	},
	
	setBottomPosition: function(){
		if ($('headerBottom')){
			//var screenSize = Element.getDimensions(document.body);
			var absBottom = $('cB').offsetTop;
			//alert(absBottom);
			//$('headerBottom').makePositioned();
			//$('headerBottom').style.bottom = (parseInt(absBottom) - 50)+'px' ;
		}
	},

	addToCart: function(event){
		var elem = Event.element(event);
		var objectID = elem.id; 
		//var pKey = elem.pKey;
		var select = $('mediaSelect_' + objectID);
		var priceObjectID = select.options[select.selectedIndex].value;
		this.shopObj.addToCart(objectID, '', priceObjectID);
	},
	
	goNext: function(){
		var newMode = this.mode+1;
		this.setMode('', newMode);
	},
	
	goPrevious: function(){
		var newMode = this.mode-1;
		this.setMode('', newMode);
	},
	
	handleNavButtons: function(){
		if (this.shopObj.cartCount > 0){
			if (this.mode == 1) {
				this.navShow('nextButton');
			}else if (this.mode < 3) {
				//this.navShow('nextButton');
			}else{
				this.navHide('nextButton');
			}
			if ( (this.mode > 1) ){
				this.navShow('previousButton');
			}else{
				this.navHide('previousButton');
			}
		}else{
			this.navHide('previousButton');
			this.navHide('nextButton');
		}
		setTimeout(this.setBottomPosition.bind(this), 1000);
	}
	
});
	
	
	/**
	 * OVERRIDES
	 */
	 // custom function
	 wps.objectShop.prototype.onUpdate=  function(){
	 	this.pob.basketCount = this.cartCount;
	 	this.pob.handleNavButtons();
	 }