var ColorSelector = Class.create(SelectControl, {
    writeLabel: function(key) {
        var oData = this.optionalData[key];
        var colors = oData.colors[0].split(',');
        var colorContainer = new Element('tr');
        colorContainer.insert(
            new Element('td', { width: '100%' }).addClassName("selectLabelText").insert(
                new Element('span').insert(this.data[key])
            )
        );
        var i = 0;
        colors.each(function(color) {
            var className = 'colorSwatch colorSwatch' + colors.length;
            if (i == 0) className += " firstSwatch";
            colorContainer.insert(
                 new Element('td').addClassName(className)
                  .insert(
                    new Element('img', { src: '/App_/ROOT/Tofu.gif' })
                        .setStyle({ background: '#' + color })
                   )
            );
            i++;
        });

        return new Element('table', { width: '100%' })
                .addClassName('colorContainer colorContainer' + colors.length)
                .insert(
                    new Element('tbody').insert(
                        colorContainer
                    )
                );
    },
    updateLabel: function(e, key) {
        var newImage = this.optionalData[key].image;
        var isAvailable = this.optionalData[key].isAvailable;
        var isNfhs = this.optionalData[key].isNfhs;
        var price = this.optionalData[key].price;


        var priceType = this.optionalData[key].priceType;
        $('priceLabel').innerHTML = priceType;

        if (priceType == 'On Sale:') {
            $('priceClassToggle').addClassName('salePrice');
        } else {
         $('priceClassToggle').removeClassName('salePrice');
        }

        if ($('basePriceDisplay')) {
            if (priceType == 'On Sale:') {
                $('basePriceDisplay').style.display = '';
            } else {
                $('basePriceDisplay').style.display = 'none';
            }
        }

        $('ProductMainImage').src = newImage;
        $('priceBox').innerHTML = price;
        if ($('AddButtonContainer')) {
            $('AddButtonContainer').style.display = (isAvailable == '1' ? '' : 'none');
        }
        if ($('SoldOutContainer')) {
            $('SoldOutContainer').style.display = (isAvailable == '1' ? 'none' : '');
        }
        if ($('NFHSBlock')) {
            $('NFHSBlock').style.display = (isNfhs == '0' ? 'none' : '');
        }

        this.updateLabelBase(e, key);
    }
});

//Event.observe('aspnetForm', 'submit', function(event) {
//    $$('#top_nav .utilityNav')[0].insert(
//        new Element('div', { id: 'cartSummary' }).insert(
//            new Element('div', {'class': 'wrapperBG'}).insert(
//                new Element('div', {id: 'cartBox', 'class': 'wrapper'})
//            )
//        )
//    );

//    $('aspnetForm').request({
//        onFailure: function() {
//            alert('failed');
//        },
//        onSuccess: function(t) {
//            //$('result').update(t.responseText);
//            $('cartBox').update(t.responseText).show();
//        }
//    });
//    Event.stop(event); // stop the form from submitting
//});