Event.observe(window, 'load', function () {
    $('ctl00_ContentPlaceHolder1_year').selectedIndex = 0;
    Event.observe('ctl00_ContentPlaceHolder1_year', 'change', selectYear);
    Event.observe('division', 'change', selectDivision);
    Event.observe('sbmtStyle', 'click', getStyles);
});
function loadYears(doc) {

	//do request
    var request = getRequest();
    try {
        request.open("get", "Default_Data.aspx?data=years", false);
        request.send(null);
    } catch(e) {
        alert("An error occured while trying to process your request!");
    }
    
    //populate year dropdown and disable division and model
    fillSelect(doc.getElementById("year"), request.responseText);
    clearSelect(document.getElementById("division"));
    clearSelect(document.getElementById("model"));
    
    request.abort();

}

function selectYear() {
    var modelYear = this.options[this.selectedIndex].value;
    if(modelYear == null || modelYear == "") { // check to see if "Select One" option was selected
        clearSelect($('division'));
        clearSelect($('model'));
    } else {  
	    //do request
	    new Ajax.Request("Default_Data.aspx?data=divisions&modelYear=" + modelYear, {
	        method: 'get',
	        onSuccess: function(transport) {
	            fillSelect($('division'), transport.responseText);
                clearSelect($('model'));
	        },
            onCreate: function() {
                $('division').options[0] = new Option("Loading...", "", true, true);
            }
	    });
    }
}

function selectDivision() {
    var divisionId = this.options[this.selectedIndex].value;
    if(divisionId == null || divisionId == "") { // check to see if "Select One" option was selected
        clearSelect($('model'));
    } else {
	    //get year
        var modelYear = $('ctl00_ContentPlaceHolder1_year').value;

        //do request
        new Ajax.Request("Default_Data.aspx?data=models&modelYear=" + modelYear + "&divisionId=" + divisionId, {
	        method: 'get',
	        onSuccess: function(transport) {
	            var models = transport.responseText.split(";;");
                var modelsArray = [];
                for (var i = 0; i < models.length; i++) {
   		            modelsArray[i] = models[i];
	            }
	            modelsArray.sort();

                //populate model dropdown
                fillModelsSelect($('model'), modelsArray);
            },
            onCreate: function() {
                $('model').options[0] = new Option("Loading...", "", true, true);
            }
	    });
    }
}

function getStyles() {

	//get year, divisionId, and divisionName, and model
	var modelYear = $('ctl00_ContentPlaceHolder1_year').value;

	var divisionId = $('division').value;
	var divisionSelectElement = $('division');
	var divisionName = divisionSelectElement.options[divisionSelectElement.selectedIndex].text;

	var modelSelectElement = $('model');
	var modelName = modelSelectElement.options[modelSelectElement.selectedIndex].text;
	var modelId = modelSelectElement.options[modelSelectElement.selectedIndex].value;
    
	//do request
	var request = getRequest();
	try {
	    request.open("get", "Default_Data.aspx?data=styles&modelYear=" + modelYear + "&divisionId=" + divisionId + "&divisionName=" + divisionName + "&modelId=" + modelId + "&modelName=" + modelName, false);
  	    request.send(null);
    } catch(e) {
        alert("An error occured while trying to process your request!");
    }
  	var styles = request.responseText.split("~~");
  	
  	request.abort();
  	
    document.location = "Style.aspx";
}

function fillStyleTable(styleTable, responseText) {
 	var table = document.getElementById( "styleTable" );

 	//delete previous styles
 	clearTable( table );

 	//populate table with new styles
 	var allStyles = responseText.split(";;");
	for (var i = 0; i < allStyles.length; i++) {
		var eachStyle = allStyles[i];
		var styleParams = eachStyle.split("~~");
		var year = styleParams[0];
		var division = styleParams[1];
		var model = styleParams[2];
		var styleName = styleParams[3];
		var invoice = styleParams[4];
		var msrp = styleParams[5];
		var destin = styleParams[8];

		var row = table.insertRow(-1);
		var td = row.insertCell(-1);
		td.setAttribute("width","30%");
		td.setAttribute("align","center");
		td.innerHTML = "<img onClick='addToScrachList(this.name)' src='" + styleParams[7] + "'></>";

		var td2 = row.insertCell(-1);
		td2.setAttribute("width","40%");
		td2.setAttribute("align","center");
		td2.innerHTML = year + " " + division + " " + model + " " + styleName;

		var td3 = row.insertCell(-1);
		td3.setAttribute("width","10%");
		td3.setAttribute("align","center");
		td3.innerHTML = invoice;

		var td4 = row.insertCell(-1);
		td4.setAttribute("width","10%");
		td4.setAttribute("align","center");
		td4.innerHTML = msrp;
		
		var td5 = row.insertCell(-1);
		td5.setAttribute("width","10%");
		td5.setAttribute("align","center");
		td5.innerHTML = destin;
	}
}

function addToScrachList( styleName ) {
	//break down style parameters
	var styleParams = styleName.split("~~");
	var year = styleParams[0];
	var division = styleParams[1];
	var model = styleParams[2];
	var trim = styleParams[3];
	var styleId = styleParams[6];
	var optionCodes = styleParams[7];
	
	var request = getRequest();
    request.open("get", "ACCS_Sample_ScratchList.aspx?cmd=add&styleId=" + styleId, false);
    request.send(null);

    //get response
	var scratchListId = request.responseText;
    if( scratchListId != "fail" )
    {
	    //add style to scratchlist table
	    var table = document.getElementById( "scratchListTable" );
 	    var row = table.insertRow(-1);
	    var td = row.insertCell(-1);
	    td.setAttribute("width","5%");
	    td.setAttribute("align","center");
	    td.innerHTML = "<input type='checkbox' onClick='updateScratchListButtons()' name='scratchListCheckboxes' value='" + scratchListId + "'></>";
	    var td2 = row.insertCell(-1);
	    td2.innerHTML = year + " " + division + " " + model + " " + trim;

	    //show scratchlist table
	    var div = document.getElementById("scratchListDiv");
	    div.style.visibility = "visible";

	    updateScratchListButtons();
	}
}

function updateScratchListButtons() {
	var numChecked = 0;

	var checkBoxes = document.getElementsByName("scratchListCheckboxes");
	for (var i = 0; i < checkBoxes.length; i++) {
	  if ( checkBoxes[i].checked )
	      ++numChecked;

      if ( numChecked == 2 )
      	break;
	}

	if( numChecked == 0 ) {
		document.getElementById("configureButton").disabled = true;
		document.getElementById("compareSBSButton").disabled = true;
		document.getElementById("compareABCButton").disabled = true;
		document.getElementById("removeButton").disabled = true;
		document.getElementById("removeAllButton").disabled = false;
	}
	else if( numChecked == 1 ) {
		document.getElementById("configureButton").disabled = false;
		document.getElementById("compareSBSButton").disabled = true;
		document.getElementById("compareABCButton").disabled = true;
		document.getElementById("removeButton").disabled = false;
		document.getElementById("removeAllButton").disabled = false;
	}
	else {
		document.getElementById("configureButton").disabled = true;
		document.getElementById("compareSBSButton").disabled = false;
		document.getElementById("compareABCButton").disabled = false;
		document.getElementById("removeButton").disabled = false;
		document.getElementById("removeAllButton").disabled = false;
	}
}

function removeScratchListRow() {
	var checkBoxes = document.getElementsByName("scratchListCheckboxes");
	var table = document.getElementById("scratchListTable");
	var rows = table.rows;
	for( var i = rows.length - 1; i >= 0; --i )	{
		if( checkBoxes[i].checked )
  			table.deleteRow( i );
	}

	//hide table if no more rows
	table = document.getElementById("scratchListTable");
	rows = table.rows;
	var div = document.getElementById("scratchListDiv");
	if ( rows.length < 1 ) {
		div.style.visibility = "hidden";
	}
	else {
		div.style.visibility = "visible";
		updateScratchListButtons();
	}
}

function removeScratchListAll() {
	var table = document.getElementById("scratchListTable");
	clearTable( table );

	//hide table
	var div = document.getElementById("scratchListDiv");
	div.style.visibility = "hidden";
}

function clearTable(tableElm) {
	var rows = tableElm.rows;
	for( var i = rows.length - 1; i >= 0; --i )
  		tableElm.deleteRow( i );
}

function clearSelect(selectElm) {
    if (selectElm.options != null) {
        selectElm.options.length = 0;
    }
    selectElm.disabled = true;
}

function fillSelect(selectElm, responseText) {
    selectElm.options.length = 0;
    selectElm.options[0] = new Option("Select Make", "", true, true);
    var response = responseText.split(";;");
    
    for (var i = 0; i < response.length; i++) {
        var style = response[i].split("~~");
        
        if(style[1] != null) {
       	    selectElm.options[selectElm.options.length] = new Option(style[1], style[0], false, false);
       	}
    }
    selectElm.disabled = false;
}

function fillModelsSelect(selectElm, modelsArray) {
    selectElm.options.length = 0;
    selectElm.options[0] = new Option("Select Model", "", true, true);
    for (var i = 0; i < modelsArray.length; i++) {
        var style = modelsArray[i].split("~~");
        selectElm.options[selectElm.options.length] = new Option(style[0], style[1], false, false);
    }
    selectElm.disabled = false;
}

// -->