$(document).ready(function()
{
    
    var path = '/fileadmin/contents/farbkonfigurator/';

    // localization strings
    var locallang = [];
    locallang['de'] = {
        head_house: 'Haus wählen:',
        head_color: 'Fenster- und Türenfarbe wählen:  ',
        head_preview: 'Voransicht:',
        printlink:'Ansicht drucken'
    };
    locallang['en'] = {
        head_house: 'Choose the house:',
        head_color: 'Choose window and door colour:  ',
        head_preview: 'Preview:',
        printlink:'Print this view'
    };
    locallang['nl'] = {
        head_house: 'Huis kiezen:',
        head_color: 'Raam- en deurkleur kiezen:  ',
        head_preview: 'Vooraanzicht:',
        printlink:'TRANSLATE to NL:Print this view'
    };    
    
    var $lang = '';
    var param1 = jQuery.url.param("L");
    var ll_path = jQuery.url.segment(0);
    
    // Abfrage der Seitensprache per parameter L= oder Sprachverzeichnis als 1. url segment
    if (param1 == null) {
        switch (ll_path) {
            default :
                $lang = 'de';
                break;
            case 'en':
                $lang = 'en';
                break;
            case 'nl':
                $lang = 'nl';
                break;
        };
    } else {
        switch (param1) {
            case '1' :
                $lang = 'en';
            break;
            case '2' :
                $lang = 'nl';
            break;
        }
    }
    
    structures = [
        '11_braun',
        '80_irish_oak',
        '81_rustic_cherry',
        '18_nevada',
        '19_toscana',
        '21_nussbaum',
        '22_mahagoni',
        '24_kirschdouglasie',
        '33_eiche',
        '34_mooreiche',
        '35_eiche_hell',
        '41_bergkiefer',
        '43_oregon',
        '47_cremeweiss',
        '48_golden_oak',
        '02_anthrazit_glatt',
        '96_basaltgrau_glatt',
        '84_weinrot',
        '92_signalgrau_glatt',
        '52_grau_glatt',
        '66_gruen',
        '76_brillant_blau',
        '67_moosgruen',
        '82_soft_cherry',
        '83_cherry_blossom',
        '78_stahlblau',
        '88_rot',
        '94_lichtgrau',
        '99_grau'
    ];

    houses = [
        'haus_01',
        'haus_02',
        'haus_03',
        'haus_04',
        'haus_05'
    ];    
    
    imgPreviewHouse = $('<img>').attr(
        {
            src: path + houses[0] + '.jpg',
            title: '',
            alt: houses[0],
            id: 'preview-house'
        }
    );
    imgPreviewMask = $('<img>').attr(
        {
            src: path + houses[0] + '_weiss.png',
            title: '',
            alt: '',
            id: 'preview-mask'
        }
    );   
    imgPreviewLoading = $('<img>').attr(
        {
            src: '/fileadmin/layouts/main/public/gfx/loadingAnimation.gif',
            title: '',
            alt: '',
            id: 'preview-loading'
        }
    );
    imgPreviewMaterial = $('<img>').attr(
        {
            src: path + 'material/weiss_material.png',
            title: '',
            alt: '',
            id: 'preview-material'
        }
    );
    imgPreviewLoadingMaterial = $('<img>').attr(
        {
            src: '/fileadmin/layouts/main/public/gfx/loadingAnimation.gif',
            title: '',
            alt: '',
            id: 'preview-loading-material'
        }
    );
                   
        
    $('#content-text')
        .width('610px')
        
        .append('<div class="csc-header"><h2>'+ locallang[$lang]['head_house'] +'</h2></div>')
        
        .append('<div class="houses-nav prev"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="prev" /></div>')
        .append('<ul id="houses"></ul>')
        .append('<div class="houses-nav next"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="next" /></div>')
        
        .append('<div class="csc-header"><h2>'+ locallang[$lang]['head_color'] +'<span class="selected-color"></span></h2></div>')
        
        .append('<div class="structures-nav prev"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="prev" /></div>')
        .append('<ul id="structures"></ul>')
        .append('<div class="structures-nav next"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="next" /></div>')
        
        .append(imgPreviewMaterial)    
        
        .append('<div class="csc-header"><h2 id="preview-header">'+ locallang[$lang]['head_preview'] +'</h2><h2 id="print"><a href="javascript:window.print()"><img src="/fileadmin/layouts/main/public/gfx/icon-print.gif" width="14" height="12" border="0" alt="">'+ locallang[$lang]['printlink'] +'</a></h2></div>')
        .append('<div id="preview"></div>');

        
    $('#structures').wrap('<div id="structures-outer"></div>');
    
    $('#preview-material').wrap('<div id="material"></div>');
    $('#material').append(imgPreviewLoadingMaterial);
    
    $('#houses').wrap('<div id="houses-outer"></div>');
    
    $('#preview').append(imgPreviewHouse);
    $('#preview').append(imgPreviewMask);
    $('#preview').append(imgPreviewLoading);
    
    //$('#preview-loading').wrap('div id="preview-loading-outer"></div>');
    
    
    //structures
    $.each
    (
        structures,function(index, item)
        {
            $('#structures').append($( '<li><img src="' + path + 'icons_farben/' + item  + '.png" alt="' + item + '" width="22" height="22"' + item + '" /></li>' ));
        }
    );
    
    //houses klein
    $.each
    (
        houses,function(index, item)
        {
            $('#houses').append($( '<li><img src="' + path + item  + '_klein.jpg" alt="' + item + '" /></li>' ));
        }
    );
    
    
    
    //carousel
    $("#houses-outer").jCarouselLite({
        btnNext: '.houses-nav.next',
        btnPrev: '.houses-nav.prev',
        visible: 3,
        scroll: 1,
        speed: 500
    });
    
    $("#structures-outer").jCarouselLite({
        btnNext: '.structures-nav.next',
        btnPrev: '.structures-nav.prev',
        visible: 20,
        scroll: 10,
        speed: 500
    });
    
    
    //events
    $('#houses li').click(
        function()
        {
            $('#houses li').removeClass('act');
            $(this).addClass('act');
            $('#preview-loading').show();
            
            $('#preview-house')
                .attr('src', path + $(this).find('img').attr('alt') + '.jpg').attr('alt', $(this).find('img').attr('alt'))
                .load
                (
                    function()
                    {
                        $('#preview-loading').hide();
                        $('#preview-mask').hide();
                    }
                );
        }
    );
    
    $('#structures li')
    .click(
        function()
        {
            selectedStructure = $(this).children().attr('alt');
            
            $('#structures li').removeClass('act');
            $(this).addClass('act');
            $('#preview-loading').show();
            $('.selected-color').html(selectedStructure);
            
            
            $('#preview-mask')
                .attr('src', path + $('#preview-house').attr('alt') + '_' + $(this).find('img').attr('alt') + '.png')
                .load
                (
                    function()
                    {
                        $('#preview-loading').hide();
                        $(this).show();
                    }
                );
        }
    )
    .hover(
        function()
        {
            selectedStructure = $(this).children().attr('alt');
            
            $('#preview-loading-material').show();
            
            $('#preview-material')
                .attr('src', path + 'material/' + $(this).find('img').attr('alt') + '_material.png')
                .load
                (
                    function()
                    {
                        $('#preview-loading-material').hide();
                        $(this).show();
                    }
                );
        },
        function()
        {
            return false;
        }
    );
    
    
});