window.addEvent('domready', function() {
	Shop.start();
});


var Shop = {

	start : function(){
		if ($('program')) Shop.parseKwicks();
		if($('btn_buy')) Shop.buy();
		if($('blades_id')) dynSelect("blades_id", "shafts_id", "paddle_lengths");
	},

	
	Load: function() {
		this.initialize();
		this.element = $(el);
		if (this.element && this.element.rel) options = $merge(options || {}, Json.evaluate(this.element.rel));
		this.setOptions(this.presets, options);
		this.assignOptions();
		this.url = (this.element ? (this.options.url || this.element.href) : el) || '';

		if (this.options.handler) {
			var handler = this.options.handler;
			return this.setContent(handler, this.parsers[handler].call(this, true));
		}
		var res = false;
		for (var key in this.parsers) {
			if ((res = this.parsers[key].call(this))) return this.setContent(key, res);
		}
		return this;
	},

	CartAccept:function() {
		var acceptlbl=$('accept');
		var is_checked=$('acceptance').checked;
		if(is_checked == false) {
			alert('You should accept Terms and Conditions of Sale');
			return false;
		}
		else {
			$('lost').submit();
		}
	
	},

	parseKwicks: function(){

		var slidefxs = [];
		var showhide = [];
		var kwicks = $$('#program .kwick');
		var fx = new Fx.Elements(kwicks, {wait: false, duration: 200});
		//var fx = new Fx.Elements(kwicks, {wait: false, duration: 200, transition: Fx.Transitions.quadOut});
		kwicks.each(function(kwick, i){
			kwick.addEvent('mouseenter', function(e){
				var model= kwick.getLast();
				slidefxs[i] = new Fx.Styles(model, {
					duration: 200,
					/*transition: Fx.Transitions.quadOut,*/
					wait: false
				});
				slidefxs[i].start({
					'opacity' : 1,
					'margin-left' : 100
				});
				var obj = {};
				obj[i] = {
					'width': [kwick.getStyle('width').toInt(), 339]
				};
				kwicks.each(function(other, j){
					if (other != kwick){
						var othermodel= other.getLast();
						slidefxs[i] = new Fx.Styles(othermodel, {
							duration: 200,
							/*transition: Fx.Transitions.quadOut,*/
							wait: false
						});
						slidefxs[i].start({
							'opacity' : .5,
							'margin-left' : 125
						});
						var w = other.getStyle('width').toInt();
						if (w != 189) obj[j] = {'width': [w, 189]};
					}
				});
				fx.start(obj);
			});
		});
		
		$('program').addEvent('mouseleave', function(e){
			var obj = {};
			kwicks.each(function(other, j){

				obj[j] = {'width': [other.getStyle('width').toInt(), 239]};
				var othermodel= other.getLast();
				slidefxs[j] = new Fx.Styles(othermodel, {
					duration: 200,
					/*transition: Fx.Transitions.quadOut,*/
					wait: false
				});
				slidefxs[j].start({
					'opacity' : 0.2,
					'margin-left' : 125
				});
			});
			fx.start(obj);
		});
	},

	buy : function () {
		// let's first hide the cartselect form
		var formcart= $('formcart');
		var formcarthtml=formcart.innerHTML;
		formcart.empty();
		var cartchooser=$('cartchooser');
		var buycontainer=$('buycontainer');
		var buys = $$(".buy");
		var fxtwo= formcart.effects({duration:0, wait:false});
		fxtwo.start({
			'display': 'none',
			'opacity': 0
		});
		var fxthree= $('cartchooser').effects({duration:750, wait:false});
		fxtwo.start({
			'display': 'none',
			'opacity': 0
		});
		var fx= buycontainer.effects({duration:750, wait:false});
		// get parent for resizing effect
		fx.start({
			'display': 'block',
			'opacity': 1
		});
		$('btn_buy').addEvent('click', function() {
			fx.start({
				'opacity': 0
				}).chain(function(){
					buycontainer.setHTML(formcarthtml);
					var newheight=$('cartselect').getStyle('height').toInt();
					fxthree.start({
						'height': newheight+50
					}),
					this.start({
						'opacity': 1
					})
					
				}).chain(function(){
					this.start({
					})
					dynSelect("blades_id", "shafts_id", "paddle_lengths");
				})
		});
	},
	
	Checklength : function () {
		// let's first check if paddle_lengths = $('paddle_lengths').value;
		if($('paddle_lengths').value==0) {
			if($('lengthcustom').value.trim() !='') {
				// check if is int
				if ($('lengthcustom').value.toInt()) {
					$$('p.steps.four').removeClass('warn');
					return true;
				}
				else {
					$$('p.steps.four').addClass('warn');
					return false;
				}
			}
			else {
				$$('p.steps.four').addClass('warn');
				return false;
			}
		}
		else {
			$$('p.steps.four').removeClass('warn');
			return true;
		}
	},

	CheckAngle : function () {
		// let's first check if paddle_lengths = $('paddle_lengths').value;
		if($('crossing_angle').value.trim() !='') {
			// check if is int
			if ($('crossing_angle').value.toInt()) {
				$$('p.steps.five').removeClass('warn');
				return true;
			}
			else {
				$$('p.steps.five').addClass('warn');
				return false;
			}
		}
		else {
			$$('p.steps.five').addClass('warn');
			return false;
		}
	},
	
	AddtoCart : function(kind) {
		// we should build both product combo of prodid / itemid / combid /price
		// and we need to check if all elements needed are ok...
		if ($('prodid')) 
			var prodid = $('prodid').value;

		if(kind=='paddle') {
			// everything is ok before checking process;
			var blade=true;
			var shaft=true;
			var length=true;
			var crossing=true;
			var angle=true;

			if ($('blades_id'))
				var blades_id = $('blades_id').value;
				var step1=$$('p.steps.one');
			if ($('shafts_id'))
				var shafts_id = $('shafts_id').value;
				var step2=$$('p.steps.two');

			if ($('price'))
				var price = $('price').value;
				var step3=$$('p.steps.three');

			if($('paddle_lengths')) 
				var paddle_lengths = $('paddle_lengths').value;
				var step4=$$('p.steps.four');
				if(paddle_lengths==0) {
					step4.addClass('warn');
				}
				else {
					step4.removeClass('warn');
				}

			if($('lengthcustom'))  {
				var checklength=Shop.Checklength();
				if(!checklength) {
					step4.addClass('warn');
				}
				else {
					step4.removeClass('warn');
				}
			}
			if($('crossing_angle'))  {
				var crossing_angle = $('crossing_angle').value;
				var checkangle=Shop.CheckAngle();
			}
			if($('crossing_right'))  {
				if ($('crossing_right').getProperty('checked')==true) {
					var crossingvalue='right';
				}
			}
			if($('crossing_left'))  {
				if ($('crossing_left').getProperty('checked')==true) {
					var crossingvalue='left';
				}
			}
			var step5=$$('p.steps.five');
			if(!crossingvalue) {
				crossing=false;
				step5.addClass('warn');
			}
			else {
				crossing=true;
				step5.removeClass('warn');
			}

			if ($('combo')) {
				var combo = $('combo');
				var combovalue = combo.value;
				var combid=combo.options[combo.selectedIndex].className;
				$('combid').value=combid;
				$('product').value='0/0/'+combid+'/'+$('price').value;
			}
			if(blades_id==0) {
				step1.addClass('warn');
				blade=false;
			}
			else {
				step1.removeClass('warn');
				blade=true;
			}
			if(shafts_id==0) {
				step2.addClass('warn');
				shaft=false;
			}
			else {
				step2.removeClass('warn');
				shaft=true;
			}

			if(paddle_lengths==0 && !checklength)  {
				step4.addClass('warn');
				length=false;
			}
			else {
				step4.removeClass('warn');
				length=true;
				var lengthvalue=(paddle_lengths==0) ? $('lengthcustom').value : paddle_lengths;
			}
			if($('crossing_angle'))  {
				if(!blade || !shaft || !length || !crossing || !angle ) {
					return false;
				}
				else {
					// let's build specs...
					$('specs').value=lengthvalue+'/'+crossing_angle+'/'+crossingvalue;
					$('cartselect').submit();
				}
			}
			else {
				if(!blade || !shaft || !length ) {
					return false;
				}
				else {
					// let's build specs...
					$('specs').value=lengthvalue;
					$('cartselect').submit();
				}
			}
		}
	},

	refreshprice : function (sel1, sel2) {
		
		var prodid = $('prodid').value;

		var bladesid=sel1.options[sel1.selectedIndex].value;

		var shaftsid=sel2.options[sel2.selectedIndex].value;
		var combo= prodid+"-"+bladesid+"|"+shaftsid;

		var combsel = document.getElementById('combo');
		var combsel = document.getElementById('combo');
		var combseloptions = combsel.getElementsByTagName("option");
		for(s=0;s<combseloptions.length;s++) {
			if(combseloptions[s].value==combo) {
				var fullprice='Paddle Price : '+' '+combseloptions[s].text+' '+unescape('EUROS') ;
				$('showprice').setHTML(fullprice);
				$('price').value=combseloptions[s].text;
				combsel.selectedIndex=s;
				break;
			}
			else {
				$('showprice').setHTML('Your paddle\'s price will be available once selected the blade and the kind of shaft. Please proceed step 1 and 2 to get the price.');
				$('price').value='0';
			}
		}
	}

};


function dynSelect(id1, id2, id3) {
	// based on bobby van der luis unobtrusive dynamic select boxes
	// http://www.bobbyvanderluis.com
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		var sel3 = document.getElementById(id3);
		// Clone the dynamic select box
		var clone2 = sel2.cloneNode(true);
		var clone3 = sel3.cloneNode(true);
		// Obtain references to all cloned options 
		var cloned2Options = clone2.getElementsByTagName("option");
		var cloned3Options = clone3.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshdynSelectOptions(sel1, sel2, sel3,  cloned2Options, "init");
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshdynSelectOptions(sel1, sel2, sel3, cloned2Options, "sel1");
			$('showprice').setHTML('Your paddle\'s price will be available once selected the blade and the kind of shaft. Please proceed step 1 and 2 to get the price.');
			if(sel1.value=="0") {
				$$('p.steps.one').addClass('warn');
			}
			else {
				$$('p.steps.one').removeClass('warn');
			}

		};
		sel2.onchange = function() {
			refreshdynSelectOptions(sel1, sel2, sel3, cloned3Options, "sel2");
			$('showprice').setHTML('Your paddle\'s price will be available once selected the blade and the kind of shaft. Please proceed step 1 and 2 to get the price.');
			Shop.refreshprice(sel1, sel2);
			if(sel2.value=="0") {
				$$('p.steps.two').addClass('warn');
			}
			else {
				$$('p.steps.two').removeClass('warn');
			}
		};
		sel3.onchange =function() {
			var inputcustomlength=document.getElementById('lengthcustom');
			inputcustomlength.value='';
			if($('paddle_lengths').value==0 )  {
				$$('p.steps.four').addClass('warn');
			}
			else {
				$$('p.steps.four').removeClass('warn');
			}
		}
	}
}
function refreshdynSelectOptions(sel1, sel2, sel3, clonedOptions, action) {
	// Delete all options of the dynamic select box

	var clone3 = sel3.cloneNode(true);
	var cloned3Options = clone3.getElementsByTagName("option");
	if(action=="init" || action=="sel1") {
		while (sel2.options.length) {
			sel2.remove(0);
			$('showprice').setHTML('Your paddle\'s price will be available once selected the blade and the kind of shaft. Please proceed step 1 and 2 to get the price.');
		}
		while (sel3.options.length) {
			sel3.remove(0);
		}
	}
	if(action=="init" || action=="sel2") {
		while (sel3.options.length) {
			sel3.remove(0);
		}
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	// Iterate through all cloned options
	if(action=="init"  || action=="sel1") {
		var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
		for (var i = 0; i < clonedOptions.length; i++) {
			// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
			if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
				// Clone the option from the hidden option pool and append it to the dynamic select box
				sel2.appendChild(clonedOptions[i].cloneNode(true));
			}
			if (clonedOptions[i].className.match(pattern1)) {
				// Clone the option from the hidden option pool and append it to the dynamic select box
				sel3.appendChild(cloned3Options[0].cloneNode(true));
			}
		}
	}
	if(action=="sel2") {
		var pattern3 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + "-" + sel2.options[sel2.selectedIndex].value + ")( |$)");
		for (var i = 0; i < clonedOptions.length; i++) {
			// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
			if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern3)) {
				// Clone the option from the hidden option pool and append it to the dynamic select box
				sel3.appendChild(clonedOptions[i].cloneNode(true));
			}
		}
	}
}