jQuery(document).ready(function(){
	// get all index from an element
	jQuery.fn.getIndex = function() {
    	var $p = jQuery(this).parent().children();
    	return $p.index(this);
	}
});

// initial function for first attribute and event lister
function initAttrBlocks()
{
    jQuery(".product-options select").each(function(){
        // generate info block
        var info = jQuery("<div>").addClass("attrInfo").html("Bitte &uuml;bergeordnete Option w&auml;hlen");
        // add options block and append info block
        jQuery(this).before(jQuery("<div>").addClass("product-options " + jQuery(this).attr("id")).append(info));
        // add clearer
        jQuery(this).before(jQuery("<div>").addClass("clearer"));
        // hide select field
        jQuery(this).hide();
    });

    // get attribute values from first attribute
    getAttrValues(jQuery(".super-attribute-select:first").attr("id"));

    // event lister to get other attributes on change of a select field
    jQuery(".super-attribute-select").bind("change", function(event){
        jQuery("select").not(":first").not("#" + event.target.id).each(function(){
            getAttrValues(this.id);
        });
    });
}

// function to get all values
function getAttrValues(select_id)
{
    // remove all old values
    jQuery("." + select_id + " .option-value").remove();

    // count values and build a block for every value
    optionsCount = jQuery("#" + select_id + " option").length;
    for(var i = 0; i < optionsCount; i++)
    {
        option = jQuery("#" + select_id + " option")[i];
        if(option.selected == true)
        	var isActive = true;
        else
        	var isActive = false;

        buildAttrBlock(select_id, jQuery(option).text(), jQuery(option).getIndex(), isActive);
    }

    // add hover to value block
    jQuery("." + select_id + " .option-value").hover(
        function(){ jQuery(this).addClass("hover"); },
        function(){ jQuery(this).removeClass("hover"); }
    );

    // remove info block and add it again if needed
    jQuery("." + select_id + " .attrInfo").remove();
    if(optionsCount <= 1)
        jQuery("." + select_id).prepend(jQuery("<div>").addClass("attrInfo").html("Bitte &uuml;bergeordnete Option w&auml;hlen"));
}

// function to build a block for a value
function buildAttrBlock(select_id, attrText, attrIndex, isActive)
{
    // ignore value "Option w�hlen"
    if(attrText == "Option w\u00e4hlen..." || attrText == "Choose an Option...")
        return;
	
	if(isActive == false)
    	var option = jQuery("<div>").addClass("option-value").html(attrText);
    else
    	var option = jQuery("<div>").addClass("option-value active").html(attrText);
    
    option.click(function(event){
        event.preventDefault();
        // change select to clicked index
        jQuery('#' + select_id).get(0).selectedIndex = attrIndex;

        // remove active from every other block and add it to clicked block
        jQuery("." + select_id + " .option-value").removeClass("active");
        jQuery(this).addClass("active");

        // fire change event two times for IE
        fireEvent(document.getElementById(select_id), "change");
        jQuery("#"+select_id).trigger("change");
    });
    
    // append block
    jQuery("." + select_id).append(option);
}

// function to correctly fire the event in every browser
function fireEvent(element, event)
{
    var evt;
    //IE bis 8
    if(document.createEventObject && typeof document.documentElement.style.opacity == 'undefined')
    {
        evt = document.createEventObject(window.event);
        return element.fireEvent("on" + event, evt);
    }//IE ab 9 und alle anderen Browser
    else
    {
        evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true);
        return !element.dispatchEvent(evt);
    }
}