window.addEvent('domready', function(){
    var select_tags = $$('select');
    var exterior_selector = select_tags[0];
    var interior_selector = select_tags[1];
    if(select_tags[2]){var handle_selector = select_tags[2];}
    if(select_tags[3]){var ribbon_selector = select_tags[3];}
    
    // these three lines are to add toggle capability to the select elements on the sassybb product page.
    if(exterior_selector)
    {
        exterior_selector.addEvent('change', new Function("e","toggle_element_from_selector('exterior');"));
        interior_selector.addEvent('change', new Function("e","toggle_element_from_selector('interior');"));
        if(handle_selector){handle_selector.addEvent('change', new Function("e","toggle_element_from_selector('handle');"));}
        if(ribbon_selector){ribbon_selector.addEvent('change', new Function("e","toggle_element_from_selector('ribbon');"));}
    }
    
    // this part adds toggle capability to the swatches in the configurator.
    var purse_element_list = Array('exterior','handle','interior');
    for(i=0;i<purse_element_list.length;i++)
    {
        var list = $$('#'+purse_element_list[i]+'_swatches a');
        var element_id = 0;
        list.each(function(element){
            element_id = element.id.replace(/swatch-/, "");
            element.addEvent('click', new Function("e","toggle_element('"+purse_element_list[i]+"','"+element_id+"');"));
        });
    }
    
});

function get_url_param(strParamName){
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("?") > -1 )
    {
        var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
        var aQueryString = strQueryString.split("&");
        for ( var iParam = 0; iParam < aQueryString.length; iParam++ )
        {
            if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 )
            {
                var aParam = aQueryString[iParam].split("=");
                strReturn = aParam[1];
                break;
            }
        }
    }
    return unescape(strReturn);
}

// get the url params, if there are any.
var exterior_choice=get_url_param('exterior_choice').replace(/swatch-/, "");
var handle_choice=get_url_param('handle_choice').replace(/swatch-/, "");
var interior_choice=get_url_param('interior_choice').replace(/swatch-/, "");
var ribbon_choice=get_url_param('ribbon_choice').replace(/swatch-/, "");
if(exterior_choice>0){toggle_element('exterior', exterior_choice);}
if(interior_choice>0){toggle_element('interior', interior_choice);}
if(handle_choice>0){toggle_element('handle', handle_choice);}
if(ribbon_choice>0){toggle_element('ribbon', ribbon_choice);}

function toggle_element(purse_element,swatch_id)
{
    if($('product_id'))
    {
        var product_id = $('product_id').value;
    }
    var swatch_id = swatch_id.replace(purse_element+'-', ''); // let's turn that swatch_id into just a number.
    if($('the-'+purse_element))
    {
        $('the-'+purse_element).setStyle('background-image', 'url(http://sassybb.edopod.net/components/'+product_id+'/'+purse_element+'-'+swatch_id+'.gif)',{duration:500} );
    }
    if($(purse_element+'_choice'))
    {
        $(purse_element+'_choice').value = swatch_id;
    }
}
function toggle_element_from_selector(purse_element)
{
    var product_id = $('product_id').value;
    var select_tags = $$('select');
    var exterior_selector = select_tags[0];
    var interior_selector = select_tags[1];
    var handle_selector = select_tags[2];
    if(select_tags[3]){var ribbon_selector = select_tags[3];}

    if(purse_element=='exterior'){swatch_id=exterior_selector.value;}
    if(purse_element=='handle'){swatch_id=handle_selector.value;}
    if(purse_element=='interior'){swatch_id=interior_selector.value;}
    if(purse_element=='ribbon'){swatch_id=ribbon_selector.value;}
    $('the-'+purse_element).setStyle('background-image', 'url(http://sassybb.edopod.net/components/'+product_id+'/'+purse_element+'-'+swatch_id+'.gif)',{duration:500} );
}