$(document).ready(function() {
        // current selection
        var current_selection = {
                                "object"    : 0,
                                "ansicht"   : 0,
                                "teil"      : 0,
                                "farbe"     : 0
                                };

        var _bl_out = '';
        var _pfad = '';
        var server_pfad = '/fileadmin/user_upload/Bilder/Produkte/';

        var block = build_strukture(my_objekte);
        $('#haus_wrap').html(block);

        /* MENU building */

        // build menu from the JSON
        var _alle_objekte = menu_levels(my_objekte);

        // assign menu to the specific HTML
        $('#objekt_w ul').html(_alle_objekte);

        // click on OBJEKT menu link
        $('#objekt_w li').live('click', function(){
            clean_farben_menu();
            clean_teil_menu();
            close_basis();

            var _an_show = $(this).attr('rel');
            current_selection.object = _an_show;

            // build TEIL submenu
            //var t = menu_levels(my_objekte[_an_show].content);
            var t = menu_levels_teil(my_objekte[_an_show].content);
            $('#teil_w ul').html(t);

            $('#teil_w ul[id*=teil_w_2] div.element_farbe ul li').each(function(my_j, my_j_var){
                    var teil_typ = $(my_j_var).parents('#teil_w_2 li').attr('id');
                    if(teil_typ.search('Wandfl_daed_che') != -1 || teil_typ.search('Panel_surface') != -1) {
                        if($(my_j_var).attr('title') == 'Reinweiss')$(my_j_var).click();
                    } else if (teil_typ.search('Rahmen_und_T_dued_r') != -1 || teil_typ.search('Frame_and_Doors') != -1){
                        if($(my_j_var).attr('title') == 'Graphitschwarz')$(my_j_var).click();
                    }
            });

            //alert(t);

            // find ansicht and show it
            $('#haus_wrap').children('#'+$(this).attr('id')+'').children('#basis').show();
            // end

            // clean the form
            $('#hidden_formular').children('input.kf').attr('value','null');

            // pass objekt id to FORM
            //$('#hidden_formular').children('#var_variante').html(my_objekte[current_selection.object].id);
            //alert(my_objekte[current_selection.object].id);
            $('#var_variante').attr('action','index.php?id='+_send_seiten[my_objekte[current_selection.object].id]);

      $('#var_variante input[rel*=wandflaeche]').attr('name','tx_powermail_pi1[uid'+_send_seiten_var_wandflaeche[my_objekte[current_selection.object].id]+']');
      $('#var_variante input[rel*=rahmen_und_tuer]').attr('name','tx_powermail_pi1[uid'+_send_seiten_var_rahmen[my_objekte[current_selection.object].id]+']');

            $('#objekt_w li').removeClass('active_element');
            $(this).toggleClass('active_element');

        });

        
        // click on FARBE menu link
        $('#teil_w div.element_farbe li').live('click', function(){
            if($(this).attr('id')!='') {
                // find farbe and show it
                var parent_element = $(this).parent().parent().parent();

                // pass Farbe id to FORM
                //$('#hidden_formular').children('div[id*='+parent_element.attr('id')+']').html($(this).attr('id'));
                $('#hidden_formular input[id*=var_'+parent_element.attr('id')+']').attr("value", ''+$(this).attr('title')+'');
                //,''+$(this).attr('id')+''
                //alert($(this).attr('title')+' '+parent_element.attr('id')+'  '+$('#hidden_formular input[id*=var_'+parent_element.attr('id')+']').attr('id'));
//alert($(this).attr('title'));
                $('#haus_wrap').children('#'+my_objekte[current_selection.object].id).children('#'+parent_element.attr('id')).children('.farbe_bild').hide();
                $('#haus_wrap').children('#'+my_objekte[current_selection.object].id).children('#'+parent_element.attr('id')).children('#'+$(this).attr('id')+'').show();
                // end

                parent_element.find('li').removeClass('active_element');
                $(this).toggleClass('active_element');
            }
        });

        // hides all BASIS_BILD
        function close_basis() {
            $('.basis_bild').hide();
        }

        // hides all FARBE_BILD
        function close_farbe() {
            $('.farbe_bild').hide();
        }

        // empties ANSICHT menuarea
        function clean_ansicht_menu() {
            $('#ansicht_w ul').html('');
        }

        // empties TEIL menuarea
        function clean_teil_menu() {
            $('#teil_w ul').html('');
            close_farbe();
        }

        function clean_farben_menu() {
            $('#farben_menu ul').html('<li class=\'small_hint\'>wahlen Sie bitte einen Element</li>');
            close_farbe();
        }

        // gives and builds <LI> Entries from specified level
        function menu_levels(level){
            var i=0;
            var j;
            var _menu_out = '';
            for(j=0; j<level.length; j++) {
                if(level[j].file == undefined) {
                    // folder
                    //console.log(level[j]);
//                    alert(level[j]);
                    _menu_out += '<li id="'+level[j].id+'" rel="'+j+'">'+level[j].name+'';
                    _menu_out += '</li>';
                    i++;
                    //menu_levels(level[i].content);
                }

            }
            return _menu_out;
        }

        function menu_levels_teil(level){
            var i=0;
            var j;
            var _menu_out = '';
            for(j=0; j<level.length; j++) {
                if(level[j].file == undefined) {
                    // folder
                    //console.log(level[j]);
                    //alert(level[j]);
                    _menu_out += '<li id="'+level[j].id+'" rel="'+j+'"><div class="element_name">'+level[j].name+'</div>';
                    _menu_out += '<div class="element_farbe"><ul>';
                    _menu_out += menu_levels_farbe(my_objekte[current_selection.object].content[j].content);
                    //alert(menu_levels_farbe(my_objekte[current_selection.object].content[j].content));
                    _menu_out += '</ul></div>';
                    _menu_out += '</li>';
                    i++;
                    //menu_levels(level[i].content);
                }

            }
            //alert(_menu_out);
            return _menu_out;
        }

        // gives and builds <LI> Entries from specified FARBE level (works with FILES and NOT DIRs)
        function menu_levels_farbe(level){
            var i=0;
            var j;
            var _menu_out = '';
            //console.log(level);
            for(j=0; j<level.length; j++) {
                if(level[j].file != undefined) {
                    // folder
                    //console.log(level[j]);
                    var _farbe_bild = level[j].color;
                    _menu_out += '<li id="'+level[j].id+'" title="'+level[j].color+'" rel="'+j+'"><img src="'+server_pfad+'farben/'+_farbe_bild.toLowerCase()+'.png">&nbsp;&nbsp;'+level[j].name+'';
                    _menu_out += '</li>';
                    //i++;
                    //menu_levels(level[i].content);
                }

            }
            return _menu_out;
        }

        // builds all the HTML strukture for the KONFIGURATOR
        function build_strukture(level){
            var i;
            for(i=0; i<level.length; i++) {
                //console.log(level[i].id);
                if(level[i].file != undefined){
                    if(level[i].id == 'basis')_bl_out += '<div id="'+level[i].id+'" class="basis_bild">';
                    else _bl_out += '<div id="'+level[i].id+'" class="farbe_bild">';
                }
                else _bl_out += '<div id="'+level[i].id+'">';

                if(level[i].content != undefined) {
                    // folder
                    build_strukture(level[i].content);
                } else {
                    // images
                    if(level[i].id == 'basis')_bl_out += '<img src="'+level[i].file+'" class="bild_variante_basis">';
                    else _bl_out += '<img src="'+level[i].file+'" class="bild_variante">';
                }

                _bl_out += '</div>';

            }
            return _bl_out;
        }

        $('#objekt_w li:first').click();



});

  function submit_formular() {
            //$('#objekt_w li:first').click();
            var final_link;
            final_link = $('#hidden_formular').children('#var_variante').attr('action');

      var var_sprache = $('#var_sprache').attr('value');
      
            //var var_wandflaeche = $('#var_Wandflaeche').attr('value');
            //var var_rahmen_und_tuer = $('#var_Rahmen_und_Tuer').attr('value');
            
            var var_wandflaeche = $('#hidden_formular input[rel*=wandflaeche]').attr('value');
            var var_rahmen_und_tuer = $('#hidden_formular input[rel*=rahmen_und_tuer]').attr('value');
            
            var var_wand = $('#hidden_formular input[rel*=wandflaeche]').attr('name');            
            var var_rahmen = $('#hidden_formular input[rel*=rahmen_und_tuer]').attr('name');

            final_link = final_link+'&'+var_wand+'='+var_wandflaeche;
            final_link = final_link+'&'+var_rahmen+'='+var_rahmen_und_tuer;

      final_link = final_link+'&L='+var_sprache;
           // alert(final_link);
           // alert('http://www.faist.de/'+final_link);
            
            opener.window.location.href = 'http://www.faist.de/'+final_link;
            window.self.close();
            
        }