// JavaScript Document
function focusfield(id){
	document.getElementById(id).focus();
	
}

function showelement(x,y){
	document.getElementById(x).style.display = "block";
	document.getElementById(y).style.display = "none";
}

function highlight_border(id){
	document.getElementById(id).style.borderColor = '#FFB016';
	document.getElementById('cart_contents').style.borderColor = '#cccccc';
}
function dehighlight_border(id){
	document.getElementById(id).style.borderColor = '#808080';	
	document.getElementById('cart_contents').style.borderColor = '#ffffff';
}

function change_div_visibility(select_name,select_id,div){//id is the id of the select box and the name of the div which you want to change the visibility of,select id id the id of the select box and div is the div that you want to make a ppear and adissappear
	var select_option = document.getElementById(select_id).options;
	var chosen_option = select_option[select_option.selectedIndex].value;
	if(chosen_option != select_name){
		document.getElementById(div).style.display = 'none';
	}else if(chosen_option == select_name){
		document.getElementById(div).style.display = 'block';
	}
}

function openWindow(x,y,url){
	window.open(url,'Image Browser');	
}

function gotopage(){
	
	var select_page_form = document.select_page.page.options;
	var chosen_page = select_page_form[select_page_form.selectedIndex].value;//this tells you what the user has selected Does it tell the name of the option?
	if(chosen_page == "select" || chosen_page =='page'){return}//don't do any thing for descriptive selecbox value. For exampl "Please select a category"
	else{window.location = chosen_page;}
}
function gotopage2(x){
	
	var select_page_form = document.getElementById(x).options;
	var chosen_page = select_page_form[select_page_form.selectedIndex].value;//this tells you what the user has selected Does it tell the name of the option?
	if(chosen_page == "select" || chosen_page =='page'){return}//don't do any thing for descriptive selecbox value. For exampl "Please select a category". How does this work?
	else{window.location = chosen_page;}
}


//add a new buying option
var counter =1; 
function add_new_buying_option(id,buying_options){
		counter ++;
		var x='';
		x += "<fieldset class='standard'><legend>Buying Option " + counter + "</legend><p><label for='buying_options'>Select Existing</label><select onchange=\"change_div_visibility('new_buying_"+counter+"','buying_options" + counter + "','div" + counter + "')\" id='buying_options"+counter+"' name='buying_options" + counter + "'><option value='undefined'>Select Buying Option</option><option value='new_buying_"+counter+"'>New Buying Option</option>";
			
		x+= buying_options;
			
        x += "</select></p> ";
		x += "<div style='display:none;' id='div" + counter + "' >";
		x += "<p><label for='add_new_buying_option'>Add new Buying Option: </label><input id='add_new_buying_option" + counter + "' type='text' name='add_new_buying_option" + counter + "' /></p>";
		
	
		x += "<p><label for='compression' >New Unit Quantity: </label><input type='text' id='compression' name='unit_quantity" + counter + "' /></p>\n";
		x += "<p><label for='buying_option_description' >Buying Option Description:</label><textarea rows='4' cols='20' id='buying_option_description'  name='buying_option_description" + counter + "'>Buying Option Description</textarea></p>\n</div>";
		x += "<p><label for='buying_price" + counter + "' >Buying Price $: </label><input id='buying_price" + counter + "' type='text' name='buying_price" + counter + "' /></p>";
		x += "</fieldset><br />";
			
		document.getElementById(id).innerHTML += x;
		document.getElementById('num_buy_ops').value = counter;//now i know how many buying options the user has entered and now i know how many times to loop through them
		
}

function add_new_buying_option2(id,buying_options,counter){
		counter ++;
		var x='';
		x += "<fieldset class='standard'><legend>Buying Option " + counter + "</legend><p><label for='buying_options'>Select Existing</label><select onchange=\"change_div_visibility('new_buying_"+counter+"','buying_options" + counter + "','div" + counter + "')\" id='buying_options"+counter+"' name='buying_options" + counter + "'><option value='undefined'>Select Buying Option</option><option value='new_buying_"+counter+"'>New Buying Option</option>";
			
		x+= buying_options;
			
        x += "</select></p> ";
		x += "<div style='display:none;' id='div" + counter + "' >";
		x += "<p><label for='add_new_buying_option'>Add new Buying Option: </label><input id='add_new_buying_option" + counter + "' type='text' name='add_new_buying_option" + counter + "' /></p>";
		
		x += "<p><label for='compression" + counter + "' >Unit Quantity: </label><input type='text' id='compression" + counter + "' name='unit_quantity" + counter + "' /></p>";
		x += "<p><label for='buying_option_description" + counter + "' >Buying Options Description:</label><textarea id='buying_option_description" + counter + "'  name='buying_option_description" + counter + "'>Buying Option Description</textarea></p></div>";
		x += "<p><label for='buying_price' >Buying Price $: </label><input id='buying_price' type='text' name='buying_price" + counter + "' /></p>";
		x += "</fieldset><br />";
			
		document.getElementById(id).innerHTML += x;
		document.getElementById('num_buy_ops').value = counter;//now i know how many shipping options the user has entered and now i know how many times to loop through them
		document.getElementById('new_buying_op').innerHTML = "Note: Only one new buying option can be added at a time when updating products";
}

var counter2 = 1;
function add_new_shipping_option(id,shipping_options){
		counter2++;
		var x='';
		x += "<fieldset class='standard'><legend>Shipping Option "+counter2+"</legend><p><label for='shipping_options"+counter2+"'>Use Existing</label><select onchange=\"change_div_visibility('new_shipping_"+counter2+"','shipping_options"+counter2+"','divv"+counter2+"')\" id='shipping_options"+counter2+"' name='shipping_options"+counter2+"'><option value='undefined'>Select Shipping Option</option><option value='undefined'></option><option value='new_shipping_"+counter2+"'>Create Shipping Option</option>";
		x +=  shipping_options;	
        x += "</select></p>";
		x += "<div style='display:none;' id='divv"+counter2+"' ><p><label for='add_new_shipping_option"+counter2+"'>Create New Option</label><input id='add_new_shipping_option"+counter2+"' type='text' name='add_new_shipping_option"+counter2+"' /></p>";
		x += "<p><label for='shipping_option_description"+counter2+"'>Shipping Option Description</label><textarea rows='4' cols='20' id='shipping_option_description"+counter2+"' name='shipping_option_description"+counter2+"'>Shipping Option Description</textarea></p></div>";//need to come up with a way that javascript can add multiple instances of this field.
		x += "<p><label for='shipping_price"+counter2+"'>Shipping Price $:</label><input id='shipping_price"+counter2+"' type='text' name='shipping_price"+counter2+"' /></p>";
		x +="</fieldset><br />";
	
		document.getElementById(id).innerHTML += x;
		document.getElementById('num_ship_ops').value = counter2;//now i know how many shipping options the user has entered and now i know how many times to loop through them
	
}


function add_new_shipping_option2(id,shipping_options,counter2){
		counter2++;
		var x='';
		x += "<fieldset class='standard'><legend>Shipping Option "+counter2+"</legend><p><label for='shipping_options"+counter2+"'>Use Existing</label><select onchange=\"change_div_visibility('new_shipping_"+counter2+"','shipping_options"+counter2+"','divv"+counter2+"')\" id='shipping_options"+counter2+"' name='shipping_options"+counter2+"'><option value='undefined'>Select Shipping Option</option><option value='undefined'></option><option value='new_shipping_"+counter2+"'>Create Shipping Option</option>";
		x+=  shipping_options;	
         x += "</select></p>";
		x += "<div style='display:none;' id='divv"+counter2+"' ><p><label for='add_new_shipping_option"+counter2+"'>Create New Option</label><input id='add_new_shipping_option"+counter2+"' type='text' name='add_new_shipping_option"+counter2+"' /></p>";
		x += "<p><label for='shipping_option_description"+counter2+"'>Shipping Option Description</label><textarea rows='4' cols='20' id='shipping_option_description"+counter2+"' name='shipping_option_description"+counter2+"'>Shipping Option Description</textarea></p></div>";//need to come up with a way that javascript can add multiple instances of this field.
		x += "<p><label for='shipping_price"+counter2+"'>Shipping Price $:</label><input id='shipping_price"+counter2+"' type='text' name='shipping_price"+counter2+"' /></p>";
		x +="</fieldset><br />";
	
		document.getElementById(id).innerHTML += x;
		document.getElementById('num_ship_ops').value = counter2;//now i know how many shipping options the user has entered and now i know how many times to loop through them
		document.getElementById('new_shipping_op').innerHTML = "Note: Only one new Shipping option can be added at a time when updating products";
}	

