var iData = "0";
var interval = null;
var map;
var geocoder;
var totalcount = 0;
var position = 0;
var tireData = null;
var set_as = new Image();
set_as.src = "images/set_as_over.jpg";
var vehicleIsSet = false;
var makeSet = false;
var modelSet = false;
var yearSet = false;
var tiptext = "";
var details = new Array();

// position of the tooltip relative to the mouse in pixel //
var offsetx = 12;
var offsety = 8;

function newelement(newid)
{ 
    if(document.createElement)
    { 
        var el = document.createElement('div'); 
        el.id = newid;     
        with(el.style)
        { 
            display = 'none';
            position = 'absolute';
            background = '#ffffff';
            paddingTop = '5px';
            paddingBottom = '5px';
            paddingLeft = '5px';
            paddingRight = '5px';
        } 
        el.innerHTML = ' '; 
        document.body.appendChild(el); 
    } 
} 
var ie5 = (document.getElementById && document.all); 
var ns6 = (document.getElementById && !document.all); 
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function getmouseposition(e)
{
    if(document.getElementById)
    {
        var iebody=(document.compatMode && 
        	document.compatMode != 'BackCompat') ? 
        		document.documentElement : document.body;
        pagex = (isapple == 1 ? 0:(ie5)?iebody.scrollLeft:window.pageXOffset);
        pagey = (isapple == 1 ? 0:(ie5)?iebody.scrollTop:window.pageYOffset);
        mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
        mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;

        var lixlpixel_tooltip = document.getElementById('tooltip');
        lixlpixel_tooltip.style.left = (mousex+pagex+offsetx) + 'px';
        lixlpixel_tooltip.style.top = (mousey+pagey+offsety) + 'px';
    }
}
function tooltip(tip)
{
    if(!document.getElementById('tooltip')) newelement('tooltip');
    var lixlpixel_tooltip = document.getElementById('tooltip');
    lixlpixel_tooltip.innerHTML = tip;
    lixlpixel_tooltip.style.display = 'block';
    document.onmousemove = getmouseposition;
}
function exit()
{
    document.getElementById('tooltip').style.display = 'none';
}
// tooltip

function serverCallBack(query) {
    // for non-IE browsers
    if (window.XMLHttpRequest) {
        http_req = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        try {
            http_req = new ActiveXObject("Msxml12.XMLHTTP");
        }
        catch (e) {
            try {
                http_req = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
            }
        }
    }
    // verify the request variable is set
    if (!http_req) {
        return false;
    }
    else {
        // continue processing
        http_req.onreadystatechange = function() {
            if (http_req.readyState == 4) {
                if (http_req.status == 200) {
                    iData = http_req.responseText;
                }
                else {
                    return false;
                }
            }
        }
        http_req.open('GET', query, true);
        http_req.send(null);
    }
}

// vehicle make
function getMake() {
    document.getElementById('model').length = 0;
    document.getElementById('model').disabled = true;
    document.getElementById('options').length = 0;
    document.getElementById('options').disabled = true;
    document.getElementById('tirelist').innerHTML = "";

    var query = "dbutility.aspx?reqtype=tires&make=get&model=&year=&options=";
    serverCallBack(query);
    interval = setInterval("setMake()", 100);
}
function setMake() {
    if (iData != "0") {
        clearInterval(interval);
        var makeData = iData.split(",");
        iData = "0";

        var make = document.getElementById('make');
		var selectOpt = document.createElement('option');
		selectOpt.text = "";
	selectOpt.value = "false";
            make.options.add(selectOpt);

        for (var i = 0; i < makeData.length; i++) {
            var selectOpt = document.createElement('option');
            selectOpt.text = makeData[i];
            make.options.add(selectOpt);
        }
	make.disabled = true;
        makeSet = true;
    }
}
// vehicle model
function getModel() {
    //document.forms['vehicle'].model.length = 0;
    //document.forms['vehicle'].year.length = 0;
    //document.forms['vehicle'].options.length = 0;
    if ("" != document.getElementById('year').value) {
        if (makeSet) {
            var make = document.getElementById('make').selectedIndex;
            make = document.getElementById('make').options[make].text;
            document.getElementById('vdetails').value = make;
            var query = "dbutility.aspx?reqtype=tires&make=" + make + "&model=get&year=" + document.getElementById('year').value + "&options";
            serverCallBack(query);
            interval = setInterval("setModel()", 100);
        }
    }
    else {
        alert("You must enter a year");
    }
}
function setModel() {
    if (iData != "0") {
        clearInterval(interval);
        var modelData = iData.split(",");
        iData = "0";

        document.getElementById('model').disabled = false;
        document.getElementById('model').length = 0;
        
        // this is so fucking weird. The EXACT same code works perfectly fine, above, but fails here.
        var model = document.getElementById('model');
	  var selectOpt = document.createElement('option');
        selectOpt.text = "";
	selectOpt.value = "false";
	model.options.add(selectOpt);
        for (var i = 0; i < modelData.length; i++) {
            var selectOpt = document.createElement('option');
            selectOpt.text = modelData[i];
            selectOpt.value = modelData[i];
            model.options.add(selectOpt);
        }

        modelSet = true;
    }
}

// vehicle options
function getOptions() {
    //document.forms['vehicle'].options.length = 0;

    if (modelSet) {
        var make = document.getElementById('make').selectedIndex;
        make = document.getElementById('make').options[make].text;
        var model = document.getElementById('model').selectedIndex;
        model = document.getElementById('model').options[model].text;
        var year = document.getElementById('year').value;
        document.getElementById('vdetails').value += ":" + year;
        var query = "dbutility.aspx?reqtype=tires&make=" + make + "&model=" + model + "&year=" + year + "&options=get";
        serverCallBack(query);
        interval = setInterval("setOptions()", 100);
    }
}
function setOptions() {
    if (iData != "0") {
        clearInterval(interval);
        var optData = iData.split(",");
        iData = "0";

        document.getElementById('options').disabled = false;
        document.getElementById('options').length = 0;
        
        var opt = document.getElementById('options');
	var selectOpt = document.createElement('option');
	selectOpt.text = "";
	selectOpt.value = "false";
            opt.options.add(selectOpt);
        if ("false" != optData[0]) {
            for (var i = 0; i < optData.length; i++) {
                var selectOpt = document.createElement('option');
                selectOpt.text = optData[i];
                selectOpt.value = optData[i];
                opt.options.add(selectOpt);
            }

            opt.setAttribute("onchange", "javascript:setVehicleSet();");
        }
        else {
            opt.length = 0;
            var selectOpt = document.createElement('option');
            selectOpt.text = "No options";
            selectOpt.value = "false";
            document.getElementById('vdetails').value += ":false";
            opt.options.add(selectOpt, 0);
            opt.disabled = "true";

            //document.getElementById('setvehicle').style.visibility = "visible";
        }
    }
}
function setVehicleSet() {
    var opts = document.getElementById('options').selectedIndex;
    opts = document.getElementById('options').options(opts).text;
    document.getElementById('vdetails').value += ":" + opts;
    //document.getElementById('setvehicle').style.visibility = "visible";
}
function setDefault() {
    // get the selected options
    var make = document.getElementById('make').selectedIndex;
    var makeData = document.getElementById('make').options[make].text;
    var model = document.getElementById('model').selectedIndex;
    var modelData = document.getElementById('model').options[model].text;
    var year = document.getElementById('year').value;
    var opt = document.getElementById('options').selectedIndex;
    var optData = document.getElementById('options').options[opt].text;

    if (0 == make) { alert("You must select a vehicle make"); }
    else {
        if (0 == model) { alert("You must select a vehicle model"); }
        else {
            if ("" == year) { alert("You must enter a year"); }
            else {
                var tfactory;

                if ("No options" == optData) {
                    tfactory = yearData + " " + makeData + " " + modelData;
                }
                else {
                    tfactory = yearData + " " + makeData + " " + modelData + " w/" + optData;
                }

                // build a querystring
                tfactory += "|&make=" + makeData;
                tfactory += "&model=" + document.getElementById('model').options[model].value;
                tfactory += "&year=" + document.getElementById('year').value;
                tfactory += "&options=" + document.getElementById('options').options[opt].value;
                
                // set a new date
                var date = new Date();
                date.setTime(date.getTime() + (730 * 24 * 60 * 60 * 1000));
                var expires = "expires=" + date.toGMTString();
                // reset the cookie
                document.cookie = "tfactory=" + tfactory + "; " + expires + "; path=/";
            }
        }
    }  
}
function getDefault() {
    c_start = document.cookie.indexOf("tfactory=");
    if (c_start != -1) {
        c_start = c_start + 9;
        c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1) c_end = document.cookie.length;
        var tfactory = document.cookie.substring(c_start, c_end);

        var tfData = tfactory.split("|");

        document.getElementById('vehicle').innerHTML = "<img src='images/spacer.gif' width='10' height='12'><span><b>" + tfData[0] + "</b></span>";
        document.getElementById('setVehicle').innerHTML = "<img src='images/spacer.gif' width='10' height='12'><span style='color:#5f6062;'>Default Vehicle</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='javascript:resetVehicle();' class='vselect'>Choose a different vehicle</a>";

        // get the tires for the selected vehicle
        var query = "dbutility.aspx?reqtype=tires" + tfData[1];
        serverCallBack(query);
        interval = setInterval("setTires()", 100);
    }
    else {
        document.getElementById('vehicle').innerHTML = "<table cellpadding='0' cellspacing='0' border='0' width='500'><tr><td width='10' rowspan='2'><img src='../images/spacer.gif' width='10' height='1'></td><td><span>YEAR</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><input type='text' id='year' name='year' size='7' style='font-size:10px;' value='Enter year' onfocus='javascript:clearYear();'></td><td width='20'><img src='../images/spacer.gif' width='20' height='1'></td><td><span>MAKE</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='make' style='font-size:10px;' name='make' onchange='javascript:getModel();'><option value='false'>&nbsp;</option></select></td><td width='20' rowspan='2'><img src='../images/spacer.gif' width='20' height='1'></td><td width='130' align='right' rowspan='2' valign='top'><input type='button' value='GO' onclick='javascript:getTires();'/></td><td width='10' rowspan='2'><img src='../images/spacer.gif' width='10' height='1'></td></tr><tr><td><span>MODEL</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='model' style='font-size:10px;' name='model' onchange='javascript:getOptions();'><option value='false'>&nbsp;</option></select></td><td width='20'><img src='../images/spacer.gif' width='20' height='1'></td><td><span>OPTIONS</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='options' style='font-size:10px;' name='options'><option value='false'>&nbsp;</option></select></td></tr></table>";
        document.getElementById('setVehicle').innerHTML = "<img src='images/spacer.gif' width='10' height='12'><span style='color:#5f6062;'>Select your vehicle options</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='javascript:setDefault();' class='vselect'>Set options as default vehicle</a>";
        getMake();
    }
}
function resetVehicle() {
    document.getElementById('vehicle').innerHTML = "<table cellpadding='0' cellspacing='0' border='0' width='500'><tr><td width='10' rowspan='2'><img src='../images/spacer.gif' width='10' height='1'></td><td><span>YEAR</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><input type='text' id='year' name='year' size='7' style='font-size:10px;' value='Enter year' onfocus='javascript:clearYear();'></td><td width='20'><img src='../images/spacer.gif' width='20' height='1'></td><td><span>MAKE</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='make' style='font-size:10px;' name='make' onchange='javascript:getModel();'><option value='false'>&nbsp;</option></select></td><td width='20' rowspan='2'><img src='../images/spacer.gif' width='20' height='1'></td><td width='130' align='right' rowspan='2' valign='top'><input type='button' value='GO' onclick='javascript:getTires();'/></td><td width='10' rowspan='2'><img src='../images/spacer.gif' width='10' height='1'></td></tr><tr><td><span>MODEL</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='model' style='font-size:10px;' name='model' onchange='javascript:getOptions();'><option value='false'>&nbsp;</option></select></td><td width='20'><img src='../images/spacer.gif' width='20' height='1'></td><td><span>OPTIONS</span></td><td width='10'><img src='../images/spacer.gif' width='10' height='1'></td><td><select id='options' style='font-size:10px;' name='options'><option value='false'>&nbsp;</option></select></td></tr></table>";
    document.getElementById('setVehicle').innerHTML = "<img src='images/spacer.gif' width='10' height='12'><span style='color:#5f6062;'>Select your vehicle options</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='javascript:setDefault();' class='vselect'>Set options as default vehicle</a>";
    getMake();
}
// display the tires results
function getTires() {
    var make = document.getElementById('make').selectedIndex;
    make = document.getElementById('make').options[make].text;
    var model = document.getElementById('model').selectedIndex;
    model = document.getElementById('model').options[model].value;
    var year = document.getElementById('year').value;
    var opt = document.getElementById('options').selectedIndex;
    opt = document.getElementById('options').options[opt].value;
    var query = "dbutility.aspx?reqtype=tires&make=" + make + "&model=" + model + "&year=" + year + "&options=" + opt;
    serverCallBack(query);
    interval = setInterval("setTires()", 100);
}
function setTires() {
    if (iData != "0") {
        clearInterval(interval);
        if ("false" != iData) {
            tireData = iData.split("|");
            iData = "0";

            // check for a cookie
            if (document.cookie.length > 0) {
                var start = document.cookie.indexOf("tfstore");
                if (start != -1) {
                    var pos = 8;
                    var poe = document.cookie.indexOf(";", pos);
                    var cdata;
                    if (poe == -1) {
                        cdata = document.cookie.substring(pos);
                    }
                    else {
                        cdata = document.cookie.substring(pos, poe);
                    }

                    // 0:id | 1:name | 2:address | 3:phone
                    var sdata = cdata.split("|");
                    var name = sdata[1].replace("[]", "&#39;");
                    document.getElementById("savedlocation").innerHTML = "Call <b>" + name + "</b> at <b>" + sdata[3] + "</b> for pricing and availability<br><img src='images/spacer.gif' height='5' width='1'>";
                    document.getElementById("tirelist").style.height = "280px";
                }
            }
            
            var tirecount = 1;
            var display = "<table cellpadding='0' cellspacing='0' border='0' width='480'>";
            details.length = 0;
            var dlength = 0;
            for (var i = 0; i < tireData.length; i++) {
                var tData = tireData[i].split(";");
                // 0 - ID | 1 - name | 2 - brand | 3 - rating | 4 - sidewall | 5 - mileage | 6 - size | 7 - image | 8 - large image | 9 - price  | 10 - UTQG | 11 - tread depth | 12 - features

                if ("false" != tData[7]) {

                    // set the details array
                    details[dlength] = tData[0] + ";" + tData[1] + ";" + tData[2] + ";" + tData[3] + ";" + tData[4] + ";" + tData[5] + ";" + tData[6] + ";" + tData[7] + ";" + tData[8] + ";" + tData[9] + ";" + tData[10] + ";" + tData[11] + ";" + tData[12];
                    
                    // outer layer (black)
                    display += "<tr>";
                    display += "<td rowspan='5' width='1' bgcolor='#000000'><img src='images/spacer.gif' width='1' height='1'></td>";
                    display += "<td colspan='3' height='1' bgcolor='#000000'><img src='images/spacer.gif' height='1' width='1'></td>";
                    display += "<td rowspan='5' width='1' bgcolor='#000000'><img src='images/spacer.gif' width='1' height='1'></td>";
                    display += "</tr>";
                    // inner layer (white)
                    display += "<tr>";
                    display += "<td rowspan='3' width='10'><img src='images/spacer.gif' width='10' height='1'></td>";
                    display += "<td height='10'><img src='images/spacer.gif' height='10' width='1'></td>";
                    display += "<td rowspan='3' width='10'><img src='images/spacer.gif' width='10' height='1'></td>";
                    display += "</tr>";
                    // content
                    display += "<tr>";
                    display += "<td onclick='javascript:showDetail(" + dlength + ");'>";
                    display += "<table cellpadding='0' cellspacing='0' border='0' width='458'>";
                    display += "<tr>";
                    display += "<td width='100'><img src='images/tires/" + tData[7] + "' border='0' width='100'></td>";
                    display += "<td width='20'><img src='images/spacer.gif' width='20' height='1'></td>";
                    display += "<td valign='top' width='338'><span>";
                    display += "<b>BRAND:</b> " + tData[2] + "<br>";
                    display += "<b>MODEL:</b> " + tData[1] + "<br>";
                    display += "<b>SIZE: </b> " + tData[6] + "<br>";
                    display += "<b>TREAD DEPTH: </b> " + tData[11] + "<br>";
                    display += "<b>SIDEWALL: </b> " + tData[4] + "<br>";
                    display += "<b>SPEED RATING: </b> " + tData[3] + "<br>";
                    if ("0" != tData[10]) {
                        display += "<b>UTQG: </b> " + tData[10] + "<br>";
                    }
                    //display += "";
                    //display += "";
                    //display += "";
                    display += "</span></td>";
                    display += "</table>";
                    display += "</td>";
                    display += "</tr>";

                    // end inner layer
                    display += "<tr>";
                    display += "<td height='10'><img src='images/spacer.gif' height='10' width='1'></td>";
                    display += "</tr>";    
                    // end outer layer
                    display += "<tr>";
                    display += "<td colspan='3' height='1' bgcolor='#000000'><img src='images/spacer.gif' height='1' width='1'></td>";
                    display += "</tr>";

                    display += "<tr><td colspan='5' height='10'><img src='images/spacer.gif' height='10' width='1'></td></tr>";

                    dlength++;
                }
            }

            display += "</table>";
        }
        else {
            display = "<span style='color:Red;'>There are no tires to display for the current selected options</span>";
            iData = "0";
        }
        document.getElementById('tirelist').innerHTML = display;
    }
}

function returnToList() {
    var display = "<table cellpadding='0' cellspacing='0' border='0' width='480'>";
    
    for (var i = 0; i < details.length; i++) {
        var tData = details[i].split(";");
        // 0 - ID | 1 - name | 2 - brand | 3 - rating | 4 - sidewall | 5 - mileage | 6 - size | 7 - image | 8 - large image | 9 - price  | 10 - UTQG | 11 - tread depth | 12 - features

        if ("false" != tData[7]) {

            // outer layer (black)
            display += "<tr>";
            display += "<td rowspan='5' width='1' bgcolor='#000000'><img src='images/spacer.gif' width='1' height='1'></td>";
            display += "<td colspan='3' height='1' bgcolor='#000000'><img src='images/spacer.gif' height='1' width='1'></td>";
            display += "<td rowspan='5' width='1' bgcolor='#000000'><img src='images/spacer.gif' width='1' height='1'></td>";
            display += "</tr>";
            // inner layer (white)
            display += "<tr>";
            display += "<td rowspan='3' width='10'><img src='images/spacer.gif' width='10' height='1'></td>";
            display += "<td height='10'><img src='images/spacer.gif' height='10' width='1'></td>";
            display += "<td rowspan='3' width='10'><img src='images/spacer.gif' width='10' height='1'></td>";
            display += "</tr>";
            // content
            display += "<tr>";
            display += "<td onclick='javascript:showDetail(" + i + ");'>";
            display += "<table cellpadding='0' cellspacing='0' border='0' width='458'>";
            display += "<tr>";
            display += "<td width='100'><img src='images/tires/" + tData[7] + "' border='0' width='100'></td>";
            display += "<td width='20'><img src='images/spacer.gif' width='20' height='1'></td>";
            display += "<td valign='top' width='338'><span>";
            display += "<b>BRAND:</b> " + tData[2] + "<br>";
            display += "<b>MODEL:</b> " + tData[1] + "<br>";
            display += "<b>SIZE: </b> " + tData[6] + "<br>";
            display += "<b>TREAD DEPTH: </b> " + tData[11] + "<br>";
            display += "<b>SIDEWALL: </b> " + tData[4] + "<br>";
            display += "<b>SPEED RATING: </b> " + tData[3] + "<br>";
            if ("0" != tData[10]) {
                display += "<b>UTQG: </b> " + tData[10] + "<br>";
            }
            display += "</span></td>";
            display += "</table>";
            display += "</td>";
            display += "</tr>";

            // end inner layer
            display += "<tr>";
            display += "<td height='10'><img src='images/spacer.gif' height='10' width='1'></td>";
            display += "</tr>";
            // end outer layer
            display += "<tr>";
            display += "<td colspan='3' height='1' bgcolor='#000000'><img src='images/spacer.gif' height='1' width='1'></td>";
            display += "</tr>";

            display += "<tr><td colspan='5' height='10'><img src='images/spacer.gif' height='10' width='1'></td></tr>";
        }
    }

    display += "</table>";

    document.getElementById('tirelist').innerHTML = display;
}

function showDetail(num) {
    var tData = details[num].split(";");
    // 0 - ID | 1 - name | 2 - brand | 3 - rating | 4 - sidewall | 5 - mileage | 6 - size | 7 - image | 8 - large image | 9 - price  | 10 - UTQG | 11 - tread depth | 12 - features

    var display = "<table cellpadding='0' cellspacing='0' border='0' width='458'>";
    display += "<tr><td colspan='3'><a href='javascript:returnToList();'>RETURN TO LIST</a></td></tr>";
    display += "<tr><td colspan='3' height='10'><img src='images/spacer.gif' height='10' width='1'></td></tr>";
    display += "<tr>";
    if ("false" != tData[8]) {
        display += "<td width='100' valign='top'><a href='javascript:showFull(" + num + ");'><img src='images/tires/" + tData[7] + "' border='0' width='100'></a><br><img src='images/spacer.gif' height='3' width='1'><br><span style='font-size:10px;'>click for larger</span></td>";
    }
    else {
        display += "<td width='100' valign='top'><img src='images/tires/" + tData[7] + "' border='0' width='100'></td>";
    }
    display += "<td width='20'><img src='images/spacer.gif' width='20' height='1'></td>";
    display += "<td valign='top' width='338'><p>";
    display += "<b>BRAND:</b> " + tData[2] + "<br>";
    display += "<b>MODEL:</b> " + tData[1] + "<br>";
    display += "<b>SIZE: </b> " + tData[6] + "<br>";
    display += "<b>TREAD DEPTH: </b> " + tData[11] + "<br>";
    display += "<b>SIDEWALL: </b> " + tData[4] + "<br>";
    display += "<b>SPEED RATING: </b> " + tData[3] + "<br>";
    if ("0" != tData[10]) {
        display += "<b>UTQG: </b> " + tData[10] + "<br>";
    }
    display += "</p>";
    if ("undefined" != tData[12] || "" != tData[12]) {
        display += "<p><b>FEATURES</b><br>" + tData[12] + "</p>";
    }
    display += "</td>";
    display += "</table>";

    document.getElementById('tirelist').innerHTML = display;
}

function showFull(num) {
    var tData = details[num].split(";");
    var display = "<a href='javascript:showDetail(" + num + ");'>RETURN TO PRODUCT DETAILS</a><br><img src='images/spacer.gif' height='10' width='1'><br><img src='images/tires/" + tData[8] + "' width='450'>";
    document.getElementById('tirelist').innerHTML = display;
}

function roll_btn(img, val) {
    if (0 == val) {
        document.getElementById(img).src = "images/" + img + "off.jpg";
    }
    else if (1 == val) {
        document.getElementById(img).src = "images/" + img + "over.jpg";
    }
}