/* global vars */

var colorID = '';
var designID = '';
var materialID = '';
var dispGuideResultsPlaceholder = 'ajaxLookupProduct';
var errorMsg = 'Sorry, an error occurred. Please click the "Reset" button and try your query again.';
var errorDetails = '';

/* preload progress spinner images */

var progressSpinner = new Image();
progressSpinner.src = '/Transitions_MCMS/images/progressSpinner.gif';
var spacerImg = new Image();
spacerImg.src = '/Transitions_MCMS/images/spacer.gif';

/* formfield onchange event handlers */

function colorChanged(chosenColorID) { //load material dropdown with valid choices
    try {
        if(chosenColorID != '')
        {
            /*
            if(chosenColorID == '1') {
                setStyleById('color1', 'border', '1px solid yellow');
                setStyleById('color2', 'border', '1px solid transparent');
            }
            else {
                setStyleById('color1', 'border', '1px solid transparent');
                setStyleById('color2', 'border', '1px solid yellow');
            }
            
            */
            
            colorID = $F(colorField);
            startSpinner('materialProgress');
            clearDropdown(materialField);
            clearDropdown(designField);
            clearResults();
            // make ajax request to get materials
            var url = '/Transitions_MCMS/ajax/lookupProduct2008.ashx';
            var pars = 'action=getMaterials&dispGuide_color_id=' + colorID;
            var myAjax = new Ajax.Request(url, {method: 'post', postBody: pars, onSuccess: loadMaterials, onFailure: reportError });
        }
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function materialChanged(chosenMaterialID) { //load design dropdown with valid choices
    try {
        if(chosenMaterialID != '')
        {
            materialID = $F(materialField);
            startSpinner('designProgress');
            clearDropdown(designField);
            clearResults();
            // make ajax request to get designs
            var url = '/Transitions_MCMS/ajax/lookupProduct2008.ashx';
            var pars = 'action=getDesigns&dispGuide_material_id=' + materialID + '&dispGuide_color_id=' + colorID;
            var myAjax = new Ajax.Request(url, {method: 'post', postBody: pars, onSuccess: loadDesigns, onFailure: reportError });
        }
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function designChanged(chosenDesignID) { //get results table based on choices from three dropdowns
    try {
        if(chosenDesignID != '')
        {
            designID = $F(designField);
            startSpinner('resultProgress');
            Element.hide(dispGuideResultsPlaceholder);
            // make ajax request to get results table
            var url = '/Transitions_MCMS/ajax/lookupProduct2008.ashx';
            var pars = 'action=getResults&dispGuide_color_id=' + colorID + '&dispGuide_design_id=' + designID +'&dispGuide_material_id=' + materialID;
            var myAjax = new Ajax.Updater(dispGuideResultsPlaceholder, url, { method: 'post', postBody: pars, onSuccess: loadResults, onFailure: reportError });
        }
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

/* ajax event hadlers */

function loadMaterials(originalRequest) { // fill materials dropdown with results from ajax request
    try {
        materialDropdown = $(materialField);
        //eval newOptions array contained in ajax response
        eval(originalRequest.responseText);
        fillDropdown(materialDropdown,newOptions);
        stopSpinner('materialProgress');
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function loadDesigns(originalRequest) { // fill designs dropdown with results from ajax request
    try {
        designDropdown = $(designField);
        //eval newOptions array contained in ajax response
        eval(originalRequest.responseText);
        fillDropdown(designDropdown,newOptions);
        stopSpinner('designProgress');
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function loadResults(originalRequest) { // results have been successfully loaded in placeholder, so turn off spinner
    try {
        stopSpinner('resultProgress');
        new Effect.Appear(dispGuideResultsPlaceholder);
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function reportError(originalRequest) { // report any ajax errors
    errorDetails = originalRequest.responseText;
    showProductError();
}

/* utility functions */

function startSpinner(imgID) {
   $(imgID).src = progressSpinner.src;
}

function stopSpinner(imgID) {
   $(imgID).src = spacerImg.src;
}

function fillDropdown(dropdownField, optionsArray) {
    try {
        var i = 0;
        for(i = 0; i<optionsArray.length; i++)
        {
            dropdownField.options[i] = new Option(optionsArray[i][1],optionsArray[i][0]);
        }
        dropdownField.options[0].selected = true;
        dropdownField.disabled = false; 
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function clearDropdown(dropdownField) {
    try {    
        dropdownField = $(dropdownField);
        dropdownField.options.length = 0;
        //dropdownField.options[0] = new Option('-SELECT ONE-','');
        dropdownField.disabled = true;
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function clearResults() {
    try {
        var resultsPlaceholder = $(dispGuideResultsPlaceholder);
        resultsPlaceholder.innerHTML = "";
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function resetProductsForm() {
    try {
        colorDropdown = $(colorField);
        colorDropdown.options[2].selected = true;
        clearDropdown(designField);
        clearDropdown(materialField);
        var resultsPlaceholder = $(dispGuideResultsPlaceholder);
        resultsPlaceholder.innerHTML = "";
    }
    catch(err) {
        errorDetails = err.description;
        showProductError();
    }
}

function showProductError() {
    try {
        stopSpinner('materialProgress');
        stopSpinner('designProgress');
        stopSpinner('resultProgress');
        var errorPlaceholder = $(dispGuideResultsPlaceholder);
        errorPlaceholder.innerHTML = "<span class=\"formErrorMsg\">" + errorMsg +"</span>";
        new Effect.Appear(errorPlaceholder);
        alert(errorDetails);
    }
    catch(err) {
        errorDetails = err.description;
    }
}