jQuery(function($)
{
    var path = '/fileadmin/contents/tuerkonfigurator/';

    // localization strings
    var locallang = [];
    locallang['de'] = {
        head_entrance: '1. Wählen Sie Ihren Hauseingang.',
        head_housedoor: '2. Suchen Sie sich Ihre FeBa-Haustür aus:  ',
        head_preview: '3. Ihre neue Feba-Haustür:',
        printlink:'Ansicht drucken',
        label_model:'Modell'
    };
    locallang['en'] = {
        head_entrance: '1. Choose your house entrance.',
        head_housedoor: '2. Find your FeBa house door:  ',
        head_preview: '3. Your new FeBa house door:',
        printlink:'Print this view',
        label_model:'Model'
    };
    locallang['nl'] = {
        head_entrance: '1. Kies uw portaal.',
        head_housedoor: '2. Zoek uw FeBa-voordeur uit:  ',
        head_preview: '3. Uw nieuwe FeBa-voordeur:',
        printlink:'Print this view',
        label_model:'Modell'
    };
    
    // Abfrage der Seitensprache per parameter L= oder Sprachverzeichnis als 1. url segment
    var $lang = '';
    var param1 = jQuery.url.param("L");
    var ll_path = jQuery.url.segment(0);
    
    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;
        }
    }
    
    var structures = [];
    structures['de'] = [
        'Aktion Sommerfrische@@@110',
        'Aktion Sommerfrische@@@120',
        'Aktion Sommerfrische@@@130',
        'Aktion Sommerfrische@@@140',
        'Aktion Sommerfrische@@@150',
        'Aktion Sommerfrische@@@160',
        'Aktion Weiß im Trend@@@501',
        'Aktion Weiß im Trend@@@502',
        'Aktion Weiß im Trend@@@503',
        'Aktion Weiß im Trend@@@504',
        'Aktion Weiß im Trend@@@505',
        'Aktion Weiß im Trend@@@506',
        'Aktion Weiß im Trend@@@507',
        'Aktion Weiß im Trend@@@508',
        'Aktion Weiß im Trend@@@509',
        'Aktion Weiß im Trend@@@510',
        'Aktion Weiß im Trend@@@511',
        'Aktion Weiß im Trend@@@512',
        'Sommeraktion@@@KU/AL20',
        'Sommeraktion@@@KU/AL30',
        'Sommeraktion@@@KU/AL50',
        'Sommeraktion@@@KU/AL60',
        'Sommeraktion@@@KU/AL70',
        'Sommeraktion@@@KU/AL80',
        'Aluminium Haustüren@@@4020',
        'Aluminium Haustüren@@@4040',
        'Aluminium Haustüren@@@4050',
        'Aluminium Haustüren@@@4070',
        'Aluminium Haustüren@@@4110',
        'Aluminium Haustüren@@@4120',
        'Aluminium Haustüren@@@4140',
        'Aluminium Haustüren@@@4150',
        'Aluminium Haustüren@@@4180',
        'Aluminium Haustüren@@@4190',
        'Aluminium Haustüren@@@2000_grau',
        'Aluminium Haustüren@@@2020',
        'Aluminium Haustüren@@@2030_grau',
        'Aluminium Haustüren@@@2030',
        'Aluminium Haustüren@@@2050_grau',
        'Aluminium Haustüren@@@2070',
        'Aluminium Haustüren@@@2080_rot',
        'Aluminium Haustüren@@@2080',
        'Aluminium Haustüren@@@2100',
        'Aluminium Haustüren@@@2150',
        'Aluminium Haustüren@@@2170_rot',
        'Aluminium Haustüren@@@2170',
        'Aluminium Haustüren@@@2190',
        'Aluminium Haustüren@@@2200',
        'Aluminium Haustüren@@@2210',
        'Aluminium Haustüren@@@2220',
        'Aluminium Haustüren@@@2240',
        'Aluminium Haustüren@@@2250',
        'Aluminium Haustüren@@@2260',
        'Aluminium Haustüren@@@2270',
        'Aluminium Haustüren@@@2300',
        'Aluminium Haustüren@@@2320',
        'Standard Katalog@@@kanada',
        'Standard Katalog@@@korinth',
        'Standard Katalog@@@mauritius',
        'Standard Katalog@@@nena',
        'Standard Katalog@@@portugal'
    ];
    
    structures['en'] = [
        'Summer freshness campaign@@@110',
        'Summer freshness campaign@@@120',
        'Summer freshness campaign@@@130',
        'Summer freshness campaign@@@140',
        'Summer freshness campaign@@@150',
        'Summer freshness campaign@@@160',
        'White in fashion campaign@@@501',
        'White in fashion campaign@@@502',
        'White in fashion campaign@@@503',
        'White in fashion campaign@@@504',
        'White in fashion campaign@@@505',
        'White in fashion campaign@@@506',
        'White in fashion campaign@@@507',
        'White in fashion campaign@@@508',
        'White in fashion campaign@@@509',
        'White in fashion campaign@@@510',
        'White in fashion campaign@@@511',
        'White in fashion campaign@@@512',
        'Summer freshness campaign@@@KU/AL20',
        'Summer freshness campaign@@@KU/AL30',
        'Summer freshness campaign@@@KU/AL50',
        'Summer freshness campaign@@@KU/AL60',
        'Summer freshness campaign@@@KU/AL70',
        'Summer freshness campaign@@@KU/AL80',
        'Aluminium house doors@@@4020',
        'Aluminium house doors@@@4040',
        'Aluminium house doors@@@4050',
        'Aluminium house doors@@@4070',
        'Aluminium house doors@@@4110',
        'Aluminium house doors@@@4120',
        'Aluminium house doors@@@4140',
        'Aluminium house doors@@@4150',
        'Aluminium house doors@@@4180',
        'Aluminium house doors@@@4190',
        'Aluminium house doors@@@2000_grau',
        'Aluminium house doors@@@2020',
        'Aluminium house doors@@@2030_grau',
        'Aluminium house doors@@@2030',
        'Aluminium house doors@@@2050_grau',
        'Aluminium house doors@@@2070',
        'Aluminium house doors@@@2080_rot',
        'Aluminium house doors@@@2080',
        'Aluminium house doors@@@2100',
        'Aluminium house doors@@@2150',
        'Aluminium house doors@@@2170_rot',
        'Aluminium house doors@@@2170',
        'Aluminium house doors@@@2190',
        'Aluminium house doors@@@2200',
        'Aluminium house doors@@@2210',
        'Aluminium house doors@@@2220',
        'Aluminium house doors@@@2240',
        'Aluminium house doors@@@2250',
        'Aluminium house doors@@@2260',
        'Aluminium house doors@@@2270',
        'Aluminium house doors@@@2300',
        'Aluminium house doors@@@2320',
        'Standard catalogue@@@kanada',
        'Standard catalogue@@@korinth',
        'Standard catalogue@@@mauritius',
        'Standard catalogue@@@nena',
        'Standard catalogue@@@portugal'
    ];
    
    structures['nl'] = [
        'Actie zomerfris@@@110',
        'Actie zomerfris@@@120',
        'Actie zomerfris@@@130',
        'Actie zomerfris@@@140',
        'Actie zomerfris@@@150',
        'Actie zomerfris@@@160',
        'Actie trendy wit@@@501',
        'Actie trendy wit@@@502',
        'Actie trendy wit@@@503',
        'Actie trendy wit@@@504',
        'Actie trendy wit@@@505',
        'Actie trendy wit@@@506',
        'Actie trendy wit@@@507',
        'Actie trendy wit@@@508',
        'Actie trendy wit@@@509',
        'Actie trendy wit@@@510',
        'Actie trendy wit@@@511',
        'Actie trendy wit@@@512',
        'Actie zomerfris@@@KU/AL20',
        'Actie zomerfris@@@KU/AL30',
        'Actie zomerfris@@@KU/AL50',
        'Actie zomerfris@@@KU/AL60',
        'Actie zomerfris@@@KU/AL70',
        'Actie zomerfris@@@KU/AL80',
        'Aluminium house doors@@@4020',
        'Aluminium house doors@@@4040',
        'Aluminium house doors@@@4050',
        'Aluminium house doors@@@4070',
        'Aluminium house doors@@@4110',
        'Aluminium house doors@@@4120',
        'Aluminium house doors@@@4140',
        'Aluminium house doors@@@4150',
        'Aluminium house doors@@@4180',
        'Aluminium house doors@@@4190',
        'Aluminium house doors@@@2000_grau',
        'Aluminium house doors@@@2020',
        'Aluminium house doors@@@2030_grau',
        'Aluminium house doors@@@2030',
        'Aluminium house doors@@@2050_grau',
        'Aluminium house doors@@@2070',
        'Aluminium house doors@@@2080_rot',
        'Aluminium house doors@@@2080',
        'Aluminium house doors@@@2100',
        'Aluminium house doors@@@2150',
        'Aluminium house doors@@@2170_rot',
        'Aluminium house doors@@@2170',
        'Aluminium house doors@@@2190',
        'Aluminium house doors@@@2200',
        'Aluminium house doors@@@2210',
        'Aluminium house doors@@@2220',
        'Aluminium house doors@@@2240',
        'Aluminium house doors@@@2250',
        'Aluminium house doors@@@2260',
        'Aluminium house doors@@@2270',
        'Aluminium house doors@@@2300',
        'Aluminium house doors@@@2320',
        'Standard catalogue@@@kanada',
        'Standard catalogue@@@korinth',
        'Standard catalogue@@@mauritius',
        'Standard catalogue@@@nena',
        'Standard catalogue@@@portugal'
    ];

    var houses = [
        '5105',
        '5202',
        '5286',
        '5311',
        '5335',
        '5420',
        '5784',
        '5890'
    ];

    var imgPreviewHouse = $('<img>').attr(
        {
            src: path + houses[0] + '.png',
            title: '',
            alt: houses[0],
            id: 'preview-house'
        }
    );
    var imgPreviewMask = $('<img>').attr(
        {
            src: path + houses[0] + '.png',
            title: '',
            alt: '',
            id: 'preview-mask'
        }
    );
    var imgPreviewLoading = $('<img>').attr(
        {
            src: '/fileadmin/layouts/main/public/gfx/loadingAnimation.gif',
            title: '',
            alt: '',
            id: 'preview-loading'
        }
    );

    $('#content-text')
        .width('610px')

        .prepend(
              '<div class="door-configuration">'
            + '    <div class="csc-header"><h2>'+ locallang[$lang]['head_entrance'] +'</h2></div>'
            + '    <div class="houses-nav prev houses-nav-prev"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="prev" /></div>'
            + '    <ul id="houses"></ul>'
            + '    <div class="houses-nav next houses-nav-next"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="next" /></div>'
            + '    <div class="csc-header"><h2>'+ locallang[$lang]['head_housedoor'] +'<span class="selected-color"></span></h2></div>'
            + '    <div class="structures-nav prev structures-nav-prev"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="prev" /></div>'
            + '    <ul id="structures"></ul>'
            + '    <div class="structures-nav next structures-nav-next"><img src="/fileadmin/contents/farbkonfigurator/gfx/sprite-arrows.png" alt="next" /></div>'
            + '    <div id="structure-detail-info"></div>'
            + '    <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>'
            + '    <div id="preview"></div>'
            + '</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[$lang],function(index, item)
        {
            item = item.split('@@@');
            file = item[1].replace('\/','');
            $('#structures')
                .append($( '<li><img src="' + path + 'icons_farben/' + file + '.jpg" alt="' + item[0] + ' ' +locallang[$lang]["label_model"] + ' ' + item[1] + '" width="47" height="90" title="' + file + '" /></li>' ));
                
        }
    );
    
    
    /*
    $.each
    (
        structures['de'],function(index,item)
        {
            item = item.split('@@@');
            file = item[1].replace('\/','');
            $('#structures li img')
                .attr('src', path + 'icons_farben/' + file +'.jpg');
        }
    );
    */

    //houses klein
    $.each
    (
        houses,function(index, item)
        {
            $('#houses').append($( '<li><img src="' + path + item  + '_klein.png" 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: 10,
        scroll: 5,
        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') + '.png').attr('alt', $(this).find('img').attr('alt'))
                .load
                (
                    function()
                    {
                        $('#preview-loading').hide();
                        $('#preview-mask').hide();
                    }
                );
        }
    );

    $('#structures li')
    .click(
        function()
        {
            var selectedStructure = $(this).children().attr('alt');
        var selectedStructureId = $(this).find('img').attr('title');

        var $detail = $('#door-detail-' + selectedStructureId);
        $('#structure-detail-info').empty().append($detail.clone());
        // FIXME styling mit #structure-detail-info in CSS Styling regeln

            $('#structures li').removeClass('act');
            $(this).addClass('act');
            $('#preview-loading').show();
            $('.selected-color').html(selectedStructure);


            $('#preview-mask')
                .attr('src', path + $('#preview-house').attr('alt') + '_' + selectedStructureId + '.png')
                .load
                (
                    function()
                    {
                        $(this).show();
                        $('#preview-loading').hide();
                    }
                );
        }
    /*
    )
    .hover(
        function()
        {
            var 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;
        }
    */
    );


});