var currentOptionText = [];
var currentOptionIndex = [];

function initializeOptions() {

    var attributesCount = [];
    var countAttributes = [];
    var i = 0;
    jQuery('.super-attribute-select').each(function() {
        var attributeId = jQuery(this).attr('id');
        attributesCount[attributeId] = i;
        countAttributes[i] = attributeId;
        i++;
    })

    jQuery('.attribute-option').live('click', (function() {
        var fullOptionId = jQuery(this).attr('id');
        var fullOptionIdArray = fullOptionId.split('-');
        var attributeId = fullOptionIdArray[1];
        currentOptionText[attributeId] = undefined;
        currentOptionIndex[attributeId] = undefined;
        updateOption(jQuery(this), attributesCount, countAttributes);
    }))

    jQuery('.attribute962').live('mouseover', (function() {
        var imgSrc = jQuery(this).children('img').attr('src');
        var imgSrcArray = imgSrc.split('.png');
        var newImg = imgSrcArray[0] + '_hover.png';
        jQuery(this).children('img').attr('src', newImg);
    }))

    jQuery('.attribute962').live('mouseout', (function() {
        var imgSrc = jQuery(this).children('img').attr('src');
        var imgSrcArray = imgSrc.split('_hover.png');
        var newImg = imgSrcArray[0] + '.png';
        jQuery(this).children('img').attr('src', newImg);
    }))

    var firstOptionId = 'li-' + countAttributes[0] + '-1';
    var firstOption = document.getElementById(firstOptionId);
    updateOption(firstOption, attributesCount, countAttributes);

}

function updateOption(element, attributesCount, countAttributes) {
    var productId = jQuery('#currentId').html();
    var fullOptionId = jQuery(element).attr('id');
    var fullOptionIdArray = fullOptionId.split('-');
    var attributeId = fullOptionIdArray[1];
    var attributeIdNumberArray = attributeId.split('attribute');
    var attributeIdNumber = attributeIdNumberArray[1];
    var optionsList = document.getElementById(attributeId).options;
    var optionIndexSrc = parseInt(fullOptionIdArray[2]);
    var optionTextSrc = optionsList[optionIndexSrc].text;
    var container = jQuery('#container-' + attributeId);
    var previousOptionText = currentOptionText[attributeId];
    var optionData = getOptionData(previousOptionText, optionIndexSrc, optionTextSrc, optionsList);
    
    currentOptionIndex[attributeId] = optionData['index'];
    currentOptionText[attributeId] = optionData['text'];

    jQuery(container).empty();

    for(var loopIndex = 0; loopIndex < optionsList.length; loopIndex++) {
        if(loopIndex % 6 == 0) {
            if(loopIndex == 0) {
                loopIndex = 1;
                var ulIndex = 1;
            }
            else {
                ulIndex++;
            }
            var divHtml = document.createElement('div');
            var ulHtml = document.createElement('ul');
            divHtml.setAttribute('id','div-' + attributeId + '-' + ulIndex);
            ulHtml.setAttribute('id','ul-' + attributeId + '-' + ulIndex);
            ulHtml.setAttribute('class','associated-products-options');
        }
        else {
            divHtml = document.getElementById('div-' + attributeId + '-' + ulIndex);
            uHtml = document.getElementById('ul-' + attributeId + '-' + ulIndex);
        }
        var html = document.createElement('li');
        html.setAttribute('id','li-' + attributeId + '-' + loopIndex);
        html.setAttribute('class','attribute-option option-inactive ' + attributeId);
        var imgProduct = document.createElement('img');
        imgProduct.setAttribute('src','http://www.powerbalancefrance.com/skin/frontend/LucidFusion/productBySoon/images/pictos/' + productId + '/' + attributeIdNumber + '/' + optionsList[loopIndex].text + '.png');
        html.appendChild(imgProduct);
        ulHtml.appendChild(html);
        divHtml.appendChild(ulHtml);
        jQuery(container).append(divHtml);
    }

    document.getElementById(attributeId).selectedIndex = optionData['index'];
    updateCurrentOption(attributeId, optionData['index']);

    if(countAttributes[attributesCount[attributeId] + 1] != undefined) {
        spConfig.reconfigureElement(countAttributes[attributesCount[attributeId]]);
        var newElement = document.getElementById('li-' + countAttributes[attributesCount[attributeId] + 1] + '-1');
        updateOption(newElement, attributesCount, countAttributes);
    }
    else {
        updatePicture(productId);
    }
}

function getOptionData(previousOptionText, optionIndexSrc, optionTextSrc, optionsList) {
    var optionData= [];
    if(previousOptionText == undefined) {
        optionData['index'] = optionIndexSrc;
        optionData['text'] = optionTextSrc;
    }
    else {
        for(var i=1; i<optionsList.length; i++) {
            if(optionsList[i].text == previousOptionText) {
                optionData['index'] = optionsList[i].index;
                optionData['text'] = optionsList[i].text;
            }
            else {
                optionData['index'] = optionsList[1].index;
                optionData['text'] = optionsList[1].text;
            }
        }
    }
    return optionData;
}

function updateCurrentOption(attributeId, indexToUpdate) {
    var optionToActivate = '#li-' + attributeId + '-' + indexToUpdate;
    var divContainer = '#current-option-' + attributeId;
    var container = '#current-option-' + attributeId + ' img';
    var imgPointer = optionToActivate + ' img';
    var imgToUse = jQuery(imgPointer).attr('src');
    jQuery(container).attr('src',imgToUse);
    jQuery(divContainer).fadeIn();
}

function updatePicture(productId) {
    var selectedOptions = getSelectedOptions();

    jQuery('.unclicker').show();
    jQuery('.product-img-box').fadeOut();
    jQuery.ajax({
        url: '../../catalog/product/updateMedia',
        data: 'productId=' + productId + '&selectedOptions=' + selectedOptions,
        success: function(data) {
            var config = eval('(' + data + ')');
            var imageLink = config.image;
            var infoText = config.text;
            jQuery('.product-img-box .product-image-description').html(infoText);
            jQuery('.product-img-box .product-image').html(imageLink);
            jQuery('.product-img-box').fadeIn();
            jQuery('.unclicker').hide();

            jQuery(".associated-products-options li.attribute272").hover(function() {
                jQuery(this).css({
                    'z-index' : '10'
                }); /*Add a higher z-index value so this image stays on top*/
                jQuery(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
                .animate({
                    marginTop: '-2px', /* The next 4 lines will vertically align this image */
                    marginLeft: '-3px',
                    top: '50%',
                    left: '50%',
                    width: '34px', /* Set new width */
                    height: '37px', /* Set new height */
                    padding: '0 5px 0 0'
                }, 100); /* this value of "200" is the speed of how fast/slow this hover animates */

            } , function() {
                jQuery(this).css({
                    'z-index' : '0'
                }); /* Set z-index back to 0 */
                jQuery(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
                .animate({
                    marginTop: '0', /* Set alignment back to default */
                    marginLeft: '0',
                    top: '-2px',
                    left: '0',
                    width: '27px', /* Set width back to default */
                    height: '33px', /* Set height back to default */
                    padding: '0 5px 0 0'
                }, 100);
            });
            jQuery(".product-pendentif-en-silicone .associated-products-options li.attribute272").hover(function() {
                jQuery(this).css({
                    'z-index' : '10'
                }); /*Add a higher z-index value so this image stays on top*/
                jQuery(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
                .animate({
                    marginTop: '-2px', /* The next 4 lines will vertically align this image */
                    marginLeft: '-3px',
                    top: '50%',
                    left: '50%',
                    width: '34px', /* Set new width */
                    height: '37px', /* Set new height */
                    padding: '0 5px 0 0'
                }, 100); /* this value of "200" is the speed of how fast/slow this hover animates */

            } , function() {
                jQuery(this).css({
                    'z-index' : '0'
                }); /* Set z-index back to 0 */
                jQuery(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
                .animate({
                    marginTop: '0', /* Set alignment back to default */
                    marginLeft: '0',
                    top: '-2px',
                    left: '0',
                    width: '30px', /* Set width back to default */
                    height: '33px', /* Set height back to default */
                    padding: '0 5px 0 0'
                }, 100);
            });

        }
    });
}

function getSelectedOptions() {
    var selectedOptions = '{"selectedOptions":{"options": [';
    var selectCount = jQuery('.super-attribute-select').size();
    var i = 1;
    jQuery('.super-attribute-select').each(function(){
        var elementId = jQuery(this).attr('id');
        var selectedIndex = document.getElementById(elementId).selectedIndex;
        var selectedValue = document.getElementById(elementId).options[document.getElementById(elementId).selectedIndex].text;
        selectedOptions = selectedOptions + '{"attribute":"' + elementId + '","selectedIndex":"' + selectedIndex + '","selectedValue":"' + selectedValue + '"}';
        if(i < selectCount) {
            selectedOptions = selectedOptions + ',';
        }
        i++;
    })
    selectedOptions = selectedOptions + ']}}';
    return selectedOptions;
}