//Functions to manipulate the images based upon selection
//Uses the prototype framework - in js/protoype.js docs on prototypejs.org

function filterRugCat(elem, type)
{  //Hide images not in the selected category
    $(type).childElements().each(function(child)
    {
        child.show();
    });
    $(type).childElements().each(function(child)
    {
        if(child.getAttribute('mycat')!=elem.value && elem.value!=0) child.hide();
    });
}

function loadImage(id, image)
{  //Function to load the floor and rug images and update the calculation
    window[id]=image.getAttribute('mymain');  //Set the global var to the chosen image
    if(id=="outer") $(id).style.backgroundImage="url("+image.getAttribute('mymain')+")"; //Outer borders are easy.  Just swap!
    if(id=="rug" && window.inner=="theme/inner.jpg")
    {  //No inner border selected so just show the rug option
        $("rug").style.left="97px";
        $("rug").style.top="97px";
        $(id).style.backgroundImage="url("+image.getAttribute('mymain')+")";
    } else if(id=="inner" || id=="rug") 
    { //Inner border selected so use GD toolkit to merge images via image.php
        $("rug").style.left="97px";
        $("rug").style.top="97px";
        $("rug").style.backgroundImage="url(img.php?i="+window.inner+"&r="+window.rug+")";
    }
    
    //Calculate the cost
    if(id!="floor")
    {
        $("cost"+id).value=image.getAttribute('myprice');  //Populate the form fields for calculation and sending
        $("name"+id).value=image.getAttribute('myname');  //Populat ethe form fields with the chosen design name
        calculate();
    }
}

function clearInner()
{  //Remove the inner border, re-positioning the center if necessary 
    $("inner").style.backgroundImage="url(theme/inner.jpg)";
    $("rug").style.backgroundImage="url("+window.rug+")";
    window.inner="theme/inner.jpg";
    if(window.rug=="theme/rug.php")
    {  //Still the default centre so re-position to show the "inner choice" border
        $("rug").style.left="138px";
        $("rug").style.top="138px";
    }
    $("costinner").value=0;
    calculate();
}

function sizeCheck()
{
    if($("width").value>400 || $("length").value>700)
    {
        alert("Please Note:\nThe maximum width is 400cm and the maximum length is 700cm.");
    }
/*    if($("width").value<200 && $("length").value>400)
    {
        alert("Please Note:\nThere is a 25% surcharge for widths\nless than 200cm and lengths greater than 400cm.");
    } 
*/

}

function calculate()
{   //Calculate the cost.
    var area=new Number();
    var cost=new Number();
    var perimeter=new Number();
    var costout=new String();
    
    if($("width").value!="" && $("width").value!="0" && $("length").value!="" && $("length").value!="0"
    && $("costrug").value!="0" && $("costouter").value!="0")
    {
        area=($("width").value/100)*($("length").value/100);  //Area needed for rug and intec cost calc.  Cost is per m sq.  Form is in cms!
        perimeter=(($("width").value/100)*2)+(($("length").value/100)*2); //Perimeter needed for border costs
        cost=(area*$("costrug").value); //Rug cost
        if($("intec").checked) cost=cost+(area*$("costintec").value);  //Add intec cost
        cost=cost+(perimeter*$("costouter").value)+(perimeter*$("costinner").value); //Add borders
        if($("width").value<200 && $("length").value>400)
        {
            cost=cost*1.25;  //25% surcharge for certain sizes
        } 
        cost=Math.round(cost*100);  //Convert to pennies
        costout=cost.toString();
        //Create a 2 decimal place string for display.  (Yuk, I know!)
        if(costout.length>2)
        {
            costout=costout.slice(0,(costout.length-2))+"."+costout.slice((costout.length-2),costout.length)
        } else if(costout.length==2) {
            costout="0."+costout;
        } else {
            costout="0.0"+costout;
        }
        $("cost").value=costout;
    } else {
        $("cost").value="";
    }
}
 
function fillTooltipText(elem, measure)
{ //Function to load the tooltip div with text prior to its display
    var text="<table>";
    text=text+"<tr><th>Name: </th><td>" + elem.getAttribute('myname')+"</td></tr>";
    text=text+"<tr><th>Design: </th><td>" + elem.getAttribute('mydesign')+"</td></tr>";
    text+="<tr><th>Colour: </th><td>" + elem.getAttribute('mycolour')+"</td></tr>";
    text+="<tr><th>Fibre: </th><td>" + elem.getAttribute('myfibre')+"</td></tr>";
    text+="<tr><th>Reference: </th><td>" + elem.getAttribute('myreference')+"</td></tr>";
    text+="<tr><th>Width: </th><td>" + elem.getAttribute('mywidth')+"</td></tr>";
    text+="<tr><th>Price: </th><td>&pound;" + elem.getAttribute('myprice')+" "+measure+"</td></tr>";
    text=text+"</table>";
    $("tooltip").innerHTML=text;
}

function initEvents()
{  //Function to initialise the events on the page
    $("step1_category").onchange=function () {filterRugCat(this,'centres');};
    $("step2_category").onchange=function () {filterRugCat(this,'outers');};
    $("step3_category").onchange=function () {filterRugCat(this,'inners');};
    
    //Loop through the selectable images and add onclick and hover events
    $("centres").childElements().each(function(child)
        {
            child.onclick=function () {loadImage('rug',this)};  //Update the master image
            child.onmouseover=function () {fillTooltipText(this,"per m<sup>2</sup>")};  //This loads the tooltip div with text prior to the display
            var my_tooltip = new Tooltip(child.id, 'tooltip');  //Display the tooltip
        });
    $("outers").childElements().each(function(child)
        {
            child.onclick=function () {loadImage('outer',this)};  //Update the master image
            child.onmouseover=function () {fillTooltipText(this,"per linear m")};  //This loads the tooltip div with text prior to the display
            var my_tooltip = new Tooltip(child.id, 'tooltip');  //Display the tooltip
        });
    $("inners").childElements().each(function(child)
        {
            child.onclick=function () {loadImage('inner',this)};  //Update the master image
            child.onmouseover=function () {fillTooltipText(this,"per linear m")};  //This loads the tooltip div with text prior to the display
            var my_tooltip = new Tooltip(child.id, 'tooltip');  //Display the tooltip
        });
    $("floors").childElements().each(function(child)
        {
            child.onclick=function () { $("floor").style.backgroundImage="url("+this.getAttribute('src')+")";};  //Update the master image
        });
    $("width").onkeyup=function () {calculate();};
    $("length").onkeyup=function () {calculate();};
    $("width").onchange=function () {sizeCheck();};
    $("length").onchange=function () {sizeCheck();};
    $("intec").onchange=function () {calculate();};
    
    //Store the selected image in a global variable which will change when a new item is selected
    window.outer="theme/outer.jpg";
    window.inner="theme/inner.jpg";
    window.rug="theme/rug.jpg";

}