var LambChopPerKilo = new Number();
var LambChopPerKilo = 22.95-22.95*.1;
var LambSausagePerKilo = new Number();
var LambSausagePerKilo = 18.50-18.50*.1;
var ChopWeight;
var SausWeight;
var TotalChopsCost;
var TotalSaussCost;
function getStylePx(css,value) {
	<!--      Written By: The Master Code Limited.                                  -->
	<!--    Date Written: January 3rd 2010.                                 -->
	<!--   Last Modified: January 3rd 2010 10:48pm by Daniel@themastercode. -->
	<!--      References: www.w3schools.com                                 --> 
	
	<!-- USED ONLY FOR CSS VALUES IN PIXELS eg. width:100px; -->
	<!-- finds the value of a css Param in a css string -->
	<!-- Example Usage: getStyle("Border:1px solid black; color:#000; padding:10px;",'padding') -->
	<!-- would return 10-->
    
	<!-- making the variable (i) the new string using slice to Remove all the charcters from charcter one to the first charcter of the css pram we are looking for (value)-->
	var i = css.slice(css.indexOf(value));

	<!-- use substring to set the variable ii as a string containing all the charcters from the first one in i to the first accurance of the charcter ; in i  -->
	<!-- var (ii) will then be a single css attribute eg. color:#000 --> 
	var ii = i.substring(0,i.indexOf(';')   );
			
	<!-- use substring to set the value if (iii) to only the value of the css attribute, split the string at one charcter higher than the index of : -->
	<!-- var (iii) will then be only the value of the css -->
	var iii = ii.substring(ii.indexOf(':')+1,ii.length);
	<!-- revomve the 'px' from the end of the vale and assign is to (iiii) -->
	var iiii = iii.substring(0,iii.indexOf('px'));
	<!-- Return the VALUE we just found to the program that called this function using return -->
	return iiii;
}
<!-- This function updates the price in the price box based on the selection mad ewith the a scroll bar -->
function udPrice() {
	<!--      Written By: The Master Code Limited.                                  -->
	<!--    Date Written: Febuary 15th 2010.                                 -->
	<!--   Last Modified: Febuary 15th 2010 12:38pm by Daniel@themastercode. -->
	<!--      References: www.w3schools.com  -->
	<!--         Purpose: This script was designec to update price on the lamb bbq pack applet  -->
	<!-- Sets the value of i to the current LEFT position of the scrollbar -->
	var i = Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))
	
	<!-- the value of i is higher than 12 an less than 28 -->
	if (i >= 12 && i < 28) {
		<!-- find the html tag named with the id 'amount' and set its value to 25 -->
		<!-- this tag stores the price of the meat pack selected -->
			document.getElementById('amount').value=25;
		<!-- find the html tag with the id of BBQ and set its action to order a 25 dollar lamb bbq pack -->
			document.getElementById('BBQ').action='https://order.store.yahoo.net/cgi-bin/wg-order?yhst-48012702963128+lambbbqpack';
		}
	<!-- also if the value of i is between 28 and 45 -->	
	else if (i >= 28 && i < 45) {
		<!-- find the html tag with the id of 'amount' and set its value to 30 -->
		<!-- the 'amount' represents the price of the meat pack -->
			document.getElementById('amount').value=30; 
		<!-- find the html tag with the id of 'BBQ' and set its action to order a 30 dollar lamb bbq pack -->
			document.getElementById('BBQ').action='https://order.store.yahoo.net/cgi-bin/wg-order?yhst-48012702963128+lambbbqpack1';
		}
	<!-- also if the value of i is between 45 and 62 -->
	else if (i >= 45 && i < 62) {
		<!-- find the html tag with the id of 'amount' and set its value to 35 -->
		<!-- the 'amount' represents the price of the meat pack -->
			document.getElementById('amount').value=35;
		<!-- find the html tag with the id of 'BBQ' and set its action to order a 30 dollar lamb bbq pack -->
			document.getElementById('BBQ').action='https://order.store.yahoo.net/cgi-bin/wg-order?yhst-48012702963128+lambbbqpack2';
		}
	<!-- also if the value of i is between 62 and 79 -->
	else if (i >= 62 && i < 79) {
		<!-- find the  html tag with the id of 'amount' and set its value to 40 -->
		<!-- the 'amount' represents the price of the price of the meat pack -->
			document.getElementById('amount').value=40;
		<!-- find the html tag with the id of 'BBQ' and set its action to order a 30 dollar lamb bbq pack -->
			document.getElementById('BBQ').action='https://order.store.yahoo.net/cgi-bin/wg-order?yhst-48012702963128+lambbbqpack3'; 
		
		}
	<!-- also if the value of i is between 79 and 96 -->
	else if (i >= 79 && i <= 96) {
		<!-- find the html tag with the id of 'amount' and set its value to 45 -->
		<!-- the 'amou nt' represents the price of the meat pack  -->
			document.getElementById('amount').value=45; 
		<!-- find the html tag with the id of 'BBQ' and set its action to order a 30 dollar lamb bbq pack -->
			document.getElementById('BBQ').action='https://order.store.yahoo.net/cgi-bin/wg-order?yhst-48012702963128+laambbbqpack';
		
		}
	<!-- update the weight desplayed on the applet to reflect the changes to the meat pack selected -->
	upweight()
}

<!-- Declears a global string variable so the script knows that the mouse was held and moved over element-classname:scroller  -->
var Scrolling = new String('no') ;
<!-- declear a global number variable to contain the X-coordants of the point where the mouse was held down over the element-classname:Scroller -->
var Xstart = new Number(0)  ;
<!-- when the mouse was held and moved over element-classname:scroller Scrolling will be set to "avtive"  -->
function ScrollNow(event) {
	<!--      Written By: The Master Code Limited.                                  -->
	<!--    Date Written: January 15rd 2010.                                 -->
	<!--   Last Modified: January 15rd 2010 3:20am by Daniel@themastercode. -->
	<!--      References: www.w3schools.com  -->
	<!--         Purpose: THis script was designed as part of a solution for the lack of a scrollbar tag in html forms -->
	
	<!-- Scrolls a HTML element with the class name scroller by one pixel to the left or right when the use click-holds and moves the mouse over the element  -->
	<!-- check that the variable Scrolling was set to active by holding the mouse button down on element-classname:scroller -->
	if ( Scrolling == "active" ) {
		<!-- becuase the variable was set byt the correct element check if the the mouse was moved to a coordant high or lower that the original coordants stored in the variable Xstart -->
		<!-- by using event.clientX we can get the new coordants of the mouse -->
		if (event.clientX > Xstart && Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))+1 <= 96) {
			<!-- The mouse moved to a higher coordant than Xstart so move the element-classname:scroller one coordant higher on the x axis -->
			<!-- identify the element by its class name and set the stlyes left property one pixel higher than its previous value -->
			<!-- getStyle is a custom function used to get a propertys value from a string of css code -->
			document.getElementById('scroller').style.left=Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))+1+'px';
			<!-- udPrice is a custom function to update a input text box element with a price relevent to the position of scollbar. -->
			udPrice()
		}
		<!-- Check if the mouse was moved to a lower coordant than Xstart so move the element-classname:scroller one coordant lower on the x axis -->
		else if (event.clientX < Xstart && Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))-1 >= 12) {
			<!-- The mouse moved to a lower coordant than Xstart so move the element-classname:scroller one coordant lower on the x axis -->
			<!-- identify the element by its class name and set the stlyes left property one pixel lower than its previous value -->
			<!-- getStyle is a custom function used to get a propertys value from a string of css code -->
			document.getElementById('scroller').style.left=Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))-1+'px';
			<!-- udPrice is a custom function to update a input text box element with a price relevent to the position of scollbar. -->
			udPrice()						
		}

	}
}
function ClickLess() {
	<!--      Written By: The Master Code Limited.                          -->
	<!--    Date Written: January 15rd 2010.                                -->
	<!--   Last Modified: January 15rd 2010 3:20am by Daniel@themastercode. -->
	<!--      References: www.w3schools.com  								-->
	<!--         Purpose: THis script was designed as part of a solution for the lack of a scrollbar tag in html forms -->
	var i = Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))-21;
	if (i >= 12) {
		document.getElementById('scroller').style.left=i+'px' ; 
	}
	else if (i < 33) {
		document.getElementById('scroller').style.left=12+'px' ; 
	}	
	udPrice()
}
function ClickMore() {
	var i = Number(getStylePx(document.getElementById('scroller').getAttribute('style'),'left'))+21;
	if (i <= 96) {
		document.getElementById('scroller').style.left=i+'px';
	}
	else if (i > 33) {
		document.getElementById('scroller').style.left=96+'px' ; 
	}
	udPrice();
}


function upweight() {
	<!-- set the variable amount to the same value of the html element with the id of 'amount' -->
		var amount = Number(document.getElementById('amount').value);
	<!-- set the variable ratioChop to the value of the html element with the id of 'ChopRatio' -->
		var ratioChop = Number(document.getElementById('ChopRatio').value);
	<!-- set the variable ChopPriceAmount to Amount multiplied by ratioChop divided by 100 -->
	<!-- this will calculate the percentage of the total price to be spent on chops -->
		var ChopPriceAmount = [amount*ratioChop]/100;
	<!-- set the variable ChopPricePerKilo to the the price of lambchops per kg minus 10 percent discount -->
	<!-- the multiplication is calculated before the subtraction -->
		var ChopPricePerKilo = Number(22.95-22.95*.1);
	<!-- divide the new discounted price of chops by 1000 to get the price per gram -->
		var ChopPricePerGram = Number(ChopPricePerKilo/1000);
	<!-- divide the amount of the total price of pack to be spent on chops by the discounted chop price per gram -->
	<!-- to result with the total grams of chops to be included in the pack -->
		var WeightOfChops = Number(ChopPriceAmount/ChopPricePerGram);
	<!-- go to the case for the current chop ratio within this switch statement -->
		switch(document.getElementById('ChopRatio').value) {
			case '33.3':	
				var ratioSausages = Number(66.6);
			break;
			case '66.6':
				var ratioSausages = Number(33.3);
			break;
			case '50':
				var ratioSausages = Number(50);
			break;
		}
		var SausagesPriceAmount = [amount*ratioSausages]/100;
		var SausagesPricePerKilo = Number(18.50-18.50*.1);
		var SausagesPricePerGram = Number(SausagesPricePerKilo/1000);
		var WeightOfSausages = Number(SausagesPriceAmount/SausagesPricePerGram);
			document.getElementById('test').value=	Number(Number(WeightOfSausages+WeightOfChops)/1000).toFixed(2)+' Kg';
			document.getElementById('Weight').value=Number(Number(WeightOfSausages+WeightOfChops)/1000).toFixed(2)+'kg';
			document.getElementById('Weight').innerHTML=Number(Number(WeightOfSausages+WeightOfChops)/1000).toFixed(2)+'kg';
			document.getElementById('ChopSaus').value=Number(WeightOfChops).toFixed(0)+'/'+Number(WeightOfSausages).toFixed(0)+'g';
			document.getElementById('ChopSaus').innerHTML=Number(WeightOfChops).toFixed(0)+'/'+Number(WeightOfSausages).toFixed(0)+'g';
			
}

function ChopChop(event) {
	switch(event.target.value) {
		case '33.3':
			document.getElementById('SausRatio').value='More Sausages';
			document.getElementById('ChopsR').value='Less Chops';
			document.getElementById('ChopsR').innerHTML='Less Chops';
			upweight();
		break;
		case '66.6':
			document.getElementById('SausRatio').value='Less Sausages';
			document.getElementById('ChopsR').value='More Chops';
			document.getElementById('ChopsR').innerHTML='More Chops';
			upweight();
		break;
		case '50':
			document.getElementById('SausRatio').value='50/50 Sausages';
						document.getElementById('ChopsR').value='50/50';
						document.getElementById('ChopsR').innerHTML='50/50';
			upweight();
		break;
	
	}

}