$(document).ready(function() {
    $('body').addClass('fx');
    
    /* SECTIONS */
    var sections = $('div.section');
    if (location.hash) {
        selectedSection = location.hash;
    }
    if (sections.length > 1) {
        sections.hide();
        var sectionNav = $('<ul class="sections"/>');
        sections.each(function(i) {
            $(this).data('title', $(this).attr('title')).removeAttr('title');
            sectionNav.append('<li' + (i==0 ? ' class="first"' : '') + '><a href="#' + $(this).attr('id') + '">' + $(this).data('title') + '</a></li>');
        });
        if ($('h1:first', sections).length) {
            $('h1:first', sections).after(sectionNav);
        } else {
            $(sections).prepend(sectionNav);
        }
        $('ul.sections li a').click(function(e) {
            var section = $($(this).attr('href').substr($(this).attr('href').indexOf('#')));
            if (section.length) {
                $('div.section').hide();
                section.show();
                $('ul.sections li').removeClass('selected');
                $('ul.sections li a[href="' + $(this).attr('href') + '"]').parent().addClass('selected');
            }
            e.preventDefault();
        });
    
        if (location.hash) {
            sections.eq(0).find('a[href="' + selectedSection + '"]').click();
        } else {
            sections.eq(0).find('a:first').trigger('click');
        }
        
        
    }
    
    
    
    /* COLORS */
    var group = $('#option-group-farben'); // fragile ...
    group.append('<ul id="colors"></ul><br/>');
    
    var productName = $('#productname_main').val();
    var imageURLTemplate = '/media/uploads/%(product)s/%(color)s.jpg';
    var stoererImageURLTemplate = '/media/uploads/%(product)s/stoerer.png';
    
    function imageURL(product, color) {
        return imageURLTemplate.replace('%(product)s',product).replace('%(color)s',color);
    }
    
    function stoererImageURL(product) {
        return stoererImageURLTemplate.replace('%(product)s', product);
    }
    
    var list = $('ul#colors');
    
    group.find('option').each(function() {
        list.append('<li class="color-' + $(this).val() + '" title="' + $.trim($(this).text()) + '"></li>');
        $('li:last', list).data('color', $(this).val());
    });
    $('li', list).click(function() {
        $('#colors li').removeClass('selected');
        $(this).addClass('selected');
        $('#product-image-color-img').attr('src', imageURL(productName, $(this).data('color')));
        group.find('select').find('option[value="' + $(this).data('color') + '"]').attr('selected',true);
        group.find('select').trigger('change');
    });
    $('#content div.section:first').prepend('<div id="product-image-color"><img src="' + imageURL(productName,$('li:first',list).data('color')) + '" alt="" id="product-image-color-img" /><div style="background-image: url(' + stoererImageURL(productName) + '); width: 120px; height: 76px;" class="badge" id="product-image-badge" /></div>');
    group.find('option[selected]').each(function() {
        $('li.color-' + $(this).val()).trigger('click');
    });
    
    group.find('select').parent('div.field').hide();
    
    
    
    /* PRODUCT GALLERY */
    if ($('#product-gallery img').length > 1) {
        $('#product-gallery img:not(:first)').hide();
        window.setInterval(function() {
            var current = $('#product-gallery img:visible');
            var next = current.next('img:hidden');
            if (!next.length) next = $('#product-gallery img:hidden:first');
            current.fadeOut();
            next.fadeIn();
        }, 3000);
    }
});