var imgAuto1 = "ctl00_cph_ContentBlock_1_imgAuto1";
var imgAuto2 = "ctl00_cph_ContentBlock_1_imgAuto2";
var imgAuto3 = "ctl00_cph_ContentBlock_1_imgAuto3";
var imgAuto4 = "ctl00_cph_ContentBlock_1_imgAuto4";
var imgAuto5 = "ctl00_cph_ContentBlock_1_imgAuto5";

var kleur = new Array();
kleur[1] = "white";
kleur[2] = "white";
kleur[3] = "white";
kleur[4] = "white";
kleur[5] = "white";

var aNavigatie = new Array();
aNavigatie[1] = true;
aNavigatie[2] = true;
aNavigatie[3] = true;
aNavigatie[4] = true;
aNavigatie[5] = true;

var noOfCars = 'ctl00_cph_ContentBlock_1_noOfCars';
var aantalBox = 'ctl00_cph_ContentBlock_1_aantalBox';
var uitvoering = 'ctl00_cph_ContentBlock_1_uitvoering';

function addCar() {
    /*** Increase number in the box ******/
    var aantal = document.getElementById(aantalBox).innerHTML;
    if (aantal > 4)
    {
        document.getElementById('opmaat').style.display = 'block';
        document.getElementById('standardForm').style.display = 'none';
        document.getElementById('totalForm').style.height = '1015px';
        aantal = parseInt(aantal) + 1;
        document.getElementById(aantalBox).innerHTML = aantal;
        return -1
    }
    aantal = parseInt(aantal) + 1;
    document.getElementById(noOfCars).value = aantal;
    document.getElementById(aantalBox).innerHTML = aantal;

    /*** Add a div ******/
    var divNaam = "auto" + aantal;
    document.getElementById(divNaam).style.display = "block";

    var imgWidth;
    if (aantal == 2) {
        document.getElementById("auto1").style.width = "265px";
        imgWidth = "155px";
        document.getElementById('bottomHr1').style.width = "186px";
        document.getElementById('bottomHr2').style.width = "186px";

        document.getElementById(imgAuto1).style.width = imgWidth;
        if (document.getElementById("stap1_bestelTekst") != null)
            document.getElementById("stap1_bestelTekst").style.width = "100%"
        
    }
    if (aantal == 3) {
        //Adjust size of div
        document.getElementById("auto1").style.width = "130px";
        document.getElementById("auto2").style.width = document.getElementById("auto1").style.width;
        
        //Adjust size of image
        imgWidth = "100px";
        document.getElementById(imgAuto1).style.width = imgWidth;
        document.getElementById(imgAuto2).style.width = imgWidth;
        //document.getElementById(imgAuto3).style.width = imgWidth;

        //adjust "HR"
        //document.getElementById('topHr1').style.width = "116px";
        //document.getElementById('topHr2').style.width = "116px";
        //document.getElementById('middleHr1').style.width = "116px";
        //document.getElementById('middleHr2').style.width = "116px";
        document.getElementById('bottomHr1').style.width = "116px";
        document.getElementById('bottomHr2').style.width = "116px";

        //adjust "gewenste kleur"-div
        /* IE */
        document.getElementById('gewensteKleurTxt1').style.styleFloat = "none";
        document.getElementById('gewensteKleurTxt2').style.styleFloat = "none";

        //document.getElementById('gewensteNavigatieTxt1').style.styleFloat = "none";
       // document.getElementById('gewensteNavigatieKeuze1').style.styleFloat = "none";
        //document.getElementById('gewensteNavigatieTxt2').style.styleFloat = "none";
        //document.getElementById('gewensteNavigatieKeuze2').style.styleFloat = "none";
        
        
        /* FF, Chrome, etc */
        document.getElementById('gewensteKleurTxt1').style.cssFloat = "none";
        document.getElementById('gewensteKleurTxt2').style.cssFloat = "none";

        //document.getElementById('gewensteNavigatieTxt1').style.cssFloat = "none";
        //document.getElementById('gewensteNavigatieKeuze1').style.cssFloat = "none";
       // document.getElementById('gewensteNavigatieTxt2').style.cssFloat = "none";
       // document.getElementById('gewensteNavigatieKeuze2').style.cssFloat = "none";
    }
}

function removeCar() {
    /*** Decrease the number in the box ***/
    var aantal = document.getElementById(aantalBox).innerHTML;
    if (aantal < 2 ) {
        return -1
    }
    if (aantal == 6)
    {
        document.getElementById('opmaat').style.display = 'none';
        document.getElementById('standardForm').style.display = 'block';
        document.getElementById('totalForm').style.height = '660px';
    }
    
    if (aantal > 5)
    {
        aantal = parseInt(aantal) - 1;
        document.getElementById(noOfCars).value = aantal;
        document.getElementById(aantalBox).innerHTML = aantal;
        return 0;
    }

    aantal = parseInt(aantal) - 1;
    document.getElementById(noOfCars).value = aantal;
    document.getElementById(aantalBox).innerHTML = aantal;

    /*** Remove a div ***/
    var divNaam = "auto" + (aantal + 1)
    document.getElementById(divNaam).style.display = "none"
    if (aantal == 1) {
        document.getElementById("auto1").style.width = "530px";
        document.getElementById(imgAuto1).style.width = "270px";  
        if (document.getElementById("stap1_bestelTekst") != null)
            document.getElementById("stap1_bestelTekst").style.width = "250px"  
    }
    if (aantal == 2) {
        document.getElementById("auto1").style.width = "265px";
        document.getElementById("auto2").style.width = document.getElementById("auto1").style.width
        imgWidth = "155px";
        document.getElementById(imgAuto1).style.width = imgWidth;
        document.getElementById(imgAuto2).style.width = imgWidth;

        //adjust "HR"
       // document.getElementById('topHr1').style.width = "100%";
      //  document.getElementById('topHr2').style.width = "100%";
        //document.getElementById('middleHr1').style.width = "100%";
        //document.getElementById('middleHr2').style.width = "100%";
        document.getElementById('bottomHr1').style.width = "100%";
        document.getElementById('bottomHr2').style.width = "100%";

        //adjust "gewenste kleur"-div
        /** IE **/
        document.getElementById('gewensteKleurTxt1').style.styleFloat = "left";
        document.getElementById('gewensteKleurTxt2').style.styleFloat = "left";

       // document.getElementById('gewensteNavigatieTxt1').style.styleFloat = "left";
       // document.getElementById('gewensteNavigatieKeuze1').style.styleFloat = "left";
       // document.getElementById('gewensteNavigatieTxt2').style.styleFloat = "left";
       // document.getElementById('gewensteNavigatieKeuze2').style.styleFloat = "left";

        /** FF, Chrome, etc **/
        document.getElementById('gewensteKleurTxt1').style.cssFloat = "left";
        document.getElementById('gewensteKleurTxt2').style.cssFloat = "left";

       // document.getElementById('gewensteNavigatieTxt1').style.cssFloat = "left";
       // document.getElementById('gewensteNavigatieKeuze1').style.cssFloat = "left";
       // document.getElementById('gewensteNavigatieTxt2').style.cssFloat = "left";
       // document.getElementById('gewensteNavigatieKeuze2').style.cssFloat = "left";
    }
}


/*** Bovenstaand voor stap 1 ************/
/*** Onderstaand voor de vervolgstappen ****/

function addCarStap2()
{
    if (document.getElementById(aantalSmarts).innerHTML > 4)
    {
        alert('Via de website kunt u maximaal 5 autos bestellen');
        return -1
    }
    document.getElementById(aantalSmarts).innerHTML = parseInt(document.getElementById(aantalSmarts).innerHTML) + 1
    var aantalAutosStap2 = document.getElementById(aantalSmarts).innerHTML 
    if (aantalAutosStap2 == 2)
        document.getElementById(divCar2).style.display = 'block'; 
    if (aantalAutosStap2 == 3)
        document.getElementById(divCar3).style.display = 'block';    
    if (aantalAutosStap2 == 4)
        document.getElementById(divCar4).style.display = 'block';
    if (aantalAutosStap2 == 5)
        document.getElementById(divCar5).style.display = 'block';
}

function removeCarStap2()
{    
    if (document.getElementById(aantalSmarts) == null)
        return -1
    
    if (document.getElementById(aantalSmarts).innerHTML < 2 ) {
        return -1
    }
    document.getElementById(aantalSmarts).innerHTML = parseInt(document.getElementById(aantalSmarts).innerHTML) - 1
    
    var aantalAutosStap2 = document.getElementById(aantalSmarts).innerHTML 
    if (aantalAutosStap2 == 1)
        document.getElementById(divCar2).style.display = 'none'; 
    if (aantalAutosStap2 == 2)
        document.getElementById(divCar3).style.display = 'none';    
    if (aantalAutosStap2 == 3)
        document.getElementById(divCar4).style.display = 'none';
    if (aantalAutosStap2 == 4)
        document.getElementById(divCar5).style.display = 'none';    
}

/*************************** blendImage *************************/
var bBusy = false; 
var imageid = "";
var millisec = 200;
var speed = Math.round(millisec / 100); 
var timer = 0;
var plaatje = "";
var autoWit = "../_Graphics/smart-wit-fs8.jpg";
var autoZwart = "../_Graphics/smart-zwart-fs8.jpg";
        
function imgBlendImage(car, color) {    
    timer = 0;
    if (bBusy == false)
    {
        bBusy = true;
        
        var currentColor = kleur[car];
        if (color == null)
            color = kleur[car];
            
        //if (Navigatie == null)
        //    Navigatie = aNavigatie[car];     
        kleur[car] = color;
        //aNavigatie[car] = Navigatie;
        imageid = "ctl00_cph_ContentBlock_1_imgAuto" + car;
        
        //fade out image 
        for (i = 100; i > 0; i--) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
            timer++;
        }
                
        //bepaal plaatje        
        switch (color) {
            case "white": plaatje = autoWit; if(document.getElementById('ctl00_cph_ContentBlock_1_kleurAuto' + car) != null) {document.getElementById('ctl00_cph_ContentBlock_1_kleurAuto' + car).value="Wit";}break;
            case "black": plaatje = autoZwart; if(document.getElementById('ctl00_cph_ContentBlock_1_kleurAuto' + car) != null) {document.getElementById('ctl00_cph_ContentBlock_1_kleurAuto' + car).value="Zwart";}break;
        }      

        if (color != currentColor) //oftewel de kleur is veranderd
        {
            document.getElementById("ctl00_cph_ContentBlock_1_ballwhite" + car).src = "../_Graphics/ball_white.jpg";
            document.getElementById("ctl00_cph_ContentBlock_1_ballblack" + car).src = "../_Graphics/ball_black.jpg";
        }
        
        for (i = 0; i <= 100; i++) {
            if (i == 0) 
            {
                setTimeout("document.getElementById(imageid).src = '" + plaatje + "';", (timer * speed));
                if (color != currentColor)  //oftewel de kleur is veranderd
                    setTimeout("document.getElementById('ctl00_cph_ContentBlock_1_ball" + color + "" + car + "').src = '../_Graphics/ball_" + color + "_selected.jpg';", (timer * speed));
            }
            setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
            timer++;
        }  
        setTimeout("bBusy = false", (timer * speed));  
    }
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
} 

function CheckChoice(){
if(document.form1.hidColor.value != '')
    {
    document.getElementById('divBlendDiv').style.backgroundImage = "url(" + document.form1.hidColor.value + ")";
    }
 }

function makeUnselectedGrey(elementje, auto) {
    var element = elementje.replace('navigatie' + auto, '')   
    
    if (element == "geen") {
            if (document.getElementById("p" + elementje) != null)
            {
                document.getElementById("p" + elementje).style.color = 'black'; // verander de kleur van de geselecterde naar zwart
                document.getElementById("p" + elementje.replace("geen","wel")).style.color = '#aaaaaa'; // verander de kleur van de niet-geselecteerde naar grijs
                aNavigatie[auto] = false;
                //imgBlendImage(auto, null, false)
            }
        }
        else {
            if (document.getElementById("p" + elementje) != null)
            {
                document.getElementById("p" + elementje).style.color = 'black'; // verander de kleur van de geselecterde naar zwart
                document.getElementById("p" + elementje.replace("wel","geen")).style.color = '#aaaaaa'; // verander de kleur van de niet-geselecteerde naar grijs
                aNavigatie[auto] = true;
                //imgBlendImage(auto, null, true)
            }
        }

}