// JavaScript Document
var mySlide_custom2;
var mySlide_custom;
var mySlide_footstool;
var mySlide;
var id_array;
var submit_button;
var allreadydone = false;
var cust2_init = false;
var footstool_shown = false;
var submit_shown = false;
var allow_switch = true
var iscolor;
var base_our_price;
var base_sale_price;
var base_comp_price;
var image1_count = 1;
var image2_count = 1;
var image3_count = 1;
var image4_count = 1;
var image5_count = 1;
var color_cost = 0;
var default_image_hold;
window.addEvent('domready', function() {
									 
	$$('table#producttable input[type=radio]').each(function(el){
		el.addEvent('click',function(){
			get_product(el.value);
		
		}); 
	}); 	
	
	settips('.Tips2');
	
	//set the varables here so we only set them once
	mySlide_footstool = new Fx.Slide('footstool', {wait: false, mode: 'vertical',onComplete:function(){
	if(this.wrapper.offsetHeight != 0)
	this.wrapper.setStyle('height', 'auto');
	}
	});
	
	mySlide = new Fx.Slide('fabric', {wait: false, mode: 'vertical',onComplete:function(){
			if(this.wrapper.offsetHeight != 0)
			this.wrapper.setStyle('height', 'auto');
		}
	});
	

	
	mySlide_custom = new Fx.Slide('custom', {wait: false, mode: 'vertical',onComplete:function(){
	if(this.wrapper.offsetHeight != 0)
	this.wrapper.setStyle('height', 'auto');
	}
	});
	
	submit_button = new Fx.Style('donebutton', 'opacity', {duration:1000,wait: true});	
	hide_submit();

});



function get_product(idproduct){
allow_switch = true;
var url="/ajax/front_end_ajax_functions.asp";
url=url+"?action=get_prod"
url=url+"&idProduct="+idproduct;
new Ajax(url, {
		method: 'get',
		onComplete: function(response){
		response = response.split("|");
		$('our_price').setHTML('<s>Our Price: $' + (eval(response[7])).numberFormat()  + '<\/s>');
		$('sale_price').setHTML('Your Sale Price: $' + (eval(response[0])).numberFormat());
		$('comp_price').setHTML('Competitors Price: $'+ (eval(response[1])).numberFormat());
		$('our_price2').setHTML('<s>Our Price: $' + (eval(response[7])).numberFormat()  + '<\/s>');
		$('sale_price2').setHTML('Your Sale Price: $' + (eval(response[0])).numberFormat());
		$('comp_price2').setHTML('Competitors Price: $'+ (eval(response[1])).numberFormat());
		
		switch_image(response[2],"img1");
		switch_image(response[3],"img2");
		switch_image(response[4],"img3");
		switch_image(response[5],"img4");
		switch_image(response[6],"img5");
		
		base_our_price = ((eval(response[7]))); //used to be 70
		base_sale_price = (eval(response[0]));
		base_comp_price = (eval(response[1]));

	
		
		hide_custom();
		showcolors(idproduct);	
		hide_footstool();
		hide_submit();
		default_image_hold = response[2];
}
}).request();
}

//Show the colors div
function showcolors(idproduct){
var url="/ajax/front_end_ajax_functions.asp";
url=url+"?action=show_colors"
url=url+"&idProduct="+idproduct;

mySlide.slideOut().chain(function(){
	new Ajax(url, {
			method: 'get',
			update: $('fabric'),
			
			onComplete:function() {
				mySlide.slideIn();
				settips('.Tips_Colors');
				
			//get the tool tip	
			var fb_mooTip = new mooTips($$('.toolTipImgDOM'));		
			}
		}).request();
								  });
}


//hide the custom div
function hide_custom(){
	mySlide_custom.slideOut()
}

//update the price
function updateprice(priceToAdd){
	if(iscolor){
			priceToAdd = 0
	}
	$('our_price').setHTML('<s>Our Price: $' + eval(base_our_price + color_cost + priceToAdd).numberFormat()  + '<\/s>');
	$('sale_price').setHTML('Your Sale Price: $' + (eval(base_sale_price +  color_cost + priceToAdd)).numberFormat());
	$('comp_price').setHTML('Competitors Price: $'+ (eval(base_comp_price +  color_cost + priceToAdd)).numberFormat());
	$('our_price2').setHTML('<s>Our Price: $' + eval(base_our_price +  color_cost + priceToAdd).numberFormat()  + '<\/s>');
	$('sale_price2').setHTML('Your Sale Price: $' + (eval(base_sale_price +  color_cost + priceToAdd)).numberFormat());
	$('comp_price2').setHTML('Competitors Price: $'+ (eval(base_comp_price +  color_cost + priceToAdd)).numberFormat());
iscolor = false;
}

//update the price
function updateOurprice(priceToAdd){
	if(iscolor){
			priceToAdd = 0
	}

	$('our_price').setHTML('<s>Our Price: $' + eval(base_our_price +  color_cost + priceToAdd).numberFormat()  + '<\/s>');
	$('sale_price').setHTML('Your Sale Price: $' + (eval(base_sale_price +  color_cost + priceToAdd)).numberFormat());
	$('our_price2').setHTML('<s>Our Price: $' + eval(base_our_price +  color_cost + priceToAdd).numberFormat()  + '<\/s>');
	$('sale_price2').setHTML('Your Sale Price: $' + (eval(base_sale_price +  color_cost +  priceToAdd)).numberFormat());
	iscolor = false;
}

//show the custom div
function show_custom(idProduct){

	
var url="/ajax/front_end_ajax_functions.asp";
url=url+"?action=show_custom"
url=url+"&idProduct="+idProduct;

mySlide_custom.slideOut().chain(function(){
	new Ajax(url, {
			method: 'get',
			update: $('custom'),
			
			onComplete:function() {
				init_custom2();
				hide_custom2(true);
				hide_footstool();
				hide_submit();
				mySlide_custom.slideIn();
				cust2_out = false;
				settips('.Tips_Custom');
				scrollToPosition('custom');
				$("pricebox2").setStyle('display', 'block');
				
				
			}
		}).request();
								  });
}


//function set up custom 2. 
function init_custom2(){
	mySlide_custom2= new Fx.Slide('custom2', {wait: false, mode: 'vertical',onComplete:function(){
		if(this.wrapper.offsetHeight != 0)
		this.wrapper.setStyle('height', 'auto');
	}
	});

}


//hide the custom2 div
function hide_custom2(hideit){
	if (hideit==true){
	mySlide_custom2.hide();
	}
		mySlide_custom2.slideOut();
}

//show the custom2 div
function show_custom2(){
	mySlide_custom2.slideIn();	
	
}

//get the custom option id numbers
function get_id_array(idProduct){
var url="/ajax/front_end_ajax_functions.asp";
url=url+"?action=get_custom_options"
url=url+"&idProduct="+idProduct;

new Ajax(url, {
	method: 'get',
	onComplete:function(returned_value) {
		id_array = returned_value;	
	
		id_array = id_array.split(',');
		
	}
}).request();
}


//scroll to the div i chooose
function scrollToPosition(elementName){
  var theElement = $(elementName); // or document.getElementById("idName")
  elemPosX = theElement.offsetLeft
  elemPosY = theElement.offsetTop;
  theElement = theElement.offsetParent;
  while(theElement != null){
    elemPosX += theElement.offsetLeft 
    elemPosY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }
  window.scrollTo(elemPosX ,elemPosY);
}

//show the footstool
var the_font = false;
function show_footstool(idProduct){
	var yes_no; 
	var radioObj;
	var the_letters = false;
	var showfoot = false;
	var theForm = document.forms['addcart'];

 
	//check the yes and no
	yes_no = $('yes_no_' + id_array[0]).value;
		try{
		if (parseInt($(id_array[2]).value.length)  > 0){
				the_letters = true;
		}
	}catch(error){
			the_letters = false;
	}
	if (yes_no == 'N'){
		showfoot = true;
		hide_custom2(false);
	}else if ((yes_no = 'Y') && (the_font == true) && (the_letters == true)){
		showfoot = true;
	}else{
			hide_footstool();
			hide_submit();
			showfoot = false;
	}



	
if ((showfoot) && (!footstool_shown)){

var url="/ajax/front_end_ajax_functions.asp";
url=url+"?action=show_foot";
url=url+"&idProduct="+idProduct;
url=url+"&junk="+ Math.random();
//location.href = url;

mySlide_footstool.slideOut().chain(function(){
	new Ajax(url, {
			method: 'get',
			update: $('footstool'),
			
			onComplete:function() {
				mySlide_footstool.slideIn();	
				settips('.Tips_Footstool');
				footstool_shown = true;
				
			
				
			
		}
		}).request();
								  });
}
	
	

	
	
}

//hide the foot stool
function hide_footstool(){
	mySlide_footstool.slideOut();
	footstool_shown = false;
	
}


//debug urls
function debug(where){
		location.href=where;
}


//show the button
function show_submit(){
if (!allreadydone){
	$('donebutton').setStyles({
		display: 'block'
	});
}
if (!submit_shown){
	submit_button.start(0,1);
	submit_shown = true;
}
	
	allreadydone = true;
}

//fade out the submit button
function hide_submit(){
if (submit_shown){
 submit_button.start(1,0);
}
 submit_shown = false;
}
	 



Number.extend({

	/*
	Property: numberFormat
		Format a number with grouped thousands.

	Arguments:
		decimals, optional - integer, number of decimal percision; default, 2
		dec_point, optional - string, decimal point notation; default, '.'
		thousands_sep, optional - string, grouped thousands notation; default, ','

	Returns:
		a formatted version of number.

	Example:
		>(36432.556).numberFormat()  // returns 36,432.56
		>(36432.556).numberFormat(2, '.', ',')  // returns 36,432.56
	*/

	numberFormat : function(decimals, dec_point, thousands_sep) {
		decimals = Math.abs(decimals) + 1 ? decimals : 2;
		dec_point = dec_point || '.';
		thousands_sep = thousands_sep || ',';

		var matches = /(-)?(\d+)(\.\d+)?/.exec((isNaN(this) ? 0 : this) + ''); // returns matches[1] as sign, matches[2] as numbers and matches[2] as decimals
		var remainder = matches[2].length > 3 ? matches[2].length % 3 : 0;
		return (matches[1] ? matches[1] : '') + (remainder ? matches[2].substr(0, remainder) + thousands_sep : '') + matches[2].substr(remainder).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep) + 
				(decimals ? dec_point + (+matches[3] || 0).toFixed(decimals).substr(2) : '');
	}


});


//set up the tool tips
function settips(where){
var Tips2 = new Tips($$(where), {
	initialize:function(){
		this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
	},
	onShow: function(toolTip) {
		this.fx.start(1);
	},
	onHide: function(toolTip) {
		this.fx.start(0);
	}
});
}


//switch the image to the new one
function switch_image(img,id){
	if (!allow_switch){
		return;
	};
	var theid;
	var oldid;
	var theclass;
	if (img == '' && id !="img1") {
		img = 'misc_ClearDot.gif'
	}else if(img == '' && id =="img1"){
			img = default_image_hold;
	}
	

	if (id =="img1"){
		theid = "image1-" + (image1_count + 1);
		oldid= "image1-" + image1_count;
		image1_count = image1_count + 1;
		theclass = "image1";
	}else if(id == "img2"){
		theid = "image2-" + (image2_count + 1);
		oldid= "image2-" + image2_count;
		image2_count = image2_count + 1;
		theclass = "image2";
	}else if(id == "img3"){
		theid = "image3-" + (image3_count + 1);
		oldid= "image3-" + image3_count;
		image3_count = image3_count + 1;
		theclass = "image3";
	}else if(id == "img4"){
		theid = "image4-" + (image4_count + 1);
		oldid= "image4-" + image4_count;
		image4_count = image4_count + 1;
		theclass = "image4";
	}else if(id == "img5"){
		theid = "image5-" + (image5_count + 1);
		oldid= "image5-" + image5_count;
		image5_count = image5_count + 1;
		theclass = "image5";
	}
	
	
	var img = new Element('img').setProperties({src: '/prodimages/' + img, id: theid})
	img.addClass(theclass);
	img.setOpacity(0);
	img.injectInside($(id));

	fade_out_image(oldid);
	fade_in_image(theid);
	//$(id).setHTML('<img src="/prodimages/' + img + '" alt="" class="image' + id + '" \/>');
	
}

function fade_out_image(id){
	new Fx.Style($(id), 'opacity', {duration: 500, wait: false}).start(0);
}

function fade_in_image(id){
	new Fx.Style($(id), 'opacity', {duration: 500, wait: false}).start(1);
}


//set the front end image group so that we have the group name for the description
function setimagegroup(optiongroupdesc){
	$('optiongroupdesc').value = optiongroupdesc;
}