$(document).ready(function(){

    $('.hidden').hide();
    $('.toggle').addClass("arrup");


    $("#layoutsplace").each(function (i) {
        //create_list("s2");
        //$('.s1').hide();
    })

    $("#pics_box").each(function (i) {
        load_pics("abstract");
        $("#pics_categories>#abstract").addClass("selected");
    })

    $("#compareplace").each(function (i) {
        //load_compare("default");
        $("#choice_props>div>div>#full").addClass("selected");
    })
    var boxname;
    $(".toggle").toggle(

        function () {
            boxname = "."+$(this).attr("id");
            //alert(boxname);
            $(boxname).slideDown("slow");
            $(this).removeClass("arrup");
            $(this).addClass("arrdown");
            $("#s2Bold").text("Во всех S2-стилях можно:");

        },
        function () {
            boxname = "."+$(this).attr("id");
            $(boxname).slideUp("slow");
            $(this).removeClass("arrdown");
            $(this).addClass("arrup");
            $("#s2Bold").text("Во всех S2-стилях можно...");

        });
    

    //----------------------------------------------------------------
   
   $(".nav span").each(function (i) {
        var dises_id = $(this).attr("id");
        get_count(dises_id);
    });
    
    
   var current_tags = {
       "system":"s2"
   };
   
   var tag_group = ["system","layout","color","theme"];
   
   // если в адресе есть решётка
    if(document.location.href.split('#').length > 1) {
     hookLink() 
    };
    
    function hookLink(){
	var href = document.location.href.split('#')[1];
	var link_arr = href.split('&');
        var out = "";

        var tag = "";
        
        for(var i=0; i<link_arr.length; i++){
                var split = link_arr[i].split('=');

                //alert(out);
                for(var x in tag_group){
                    if(split[0] == tag_group[x]){
                        tag = split[1];
                        if(tag != ''){
                            select_tag(tag);
                            current_tags[tag_group[x]] = tag;
                        }
                    }
                }
                
        }
        //alert(current_tags);
        create_list(current_tags);
        show_list(current_tags);
        
        //get_by_type(type,char_id,search,tax,tax_selects_out);
        //alert(out);
}
   
   
    
    
//------ выбор тегов ------ 

    $(".nav span").click(
        function () {
            var tagname = $(this).attr("id");
            //current_tags.push(id);
            
           
            var parnt = $(this).parent();
            var group = "";
            
            //alert(parnt.attr("class"));
            for(var x in tag_group){
                //alert(tag_group[x]);
                if(parnt.hasClass(tag_group[x])){
                        group = tag_group[x];// определяем группу тегов
                    }
                }
            
            if($(this).hasClass("selected")){// если был активным, выключаем
                $(this).removeClass("selected active-"+tagname);
                //delete o.test
                delete current_tags[group];
            }
            else{// иначе делаем активным, выключаем предыдущий активный у этого родителя
                var oldselect = $(".selected",parnt).attr("id");
                $("#"+oldselect).removeClass("selected active-"+oldselect);
                //delete current_tags[group];
                current_tags[group] = tagname;

                select_tag(tagname);// добавляем класс текущему
            }
            
            
            //alert(current_tags.tagname);
            //current_tags - ассоц массив выбранных тегов
            
            create_list(current_tags);
            change_href(current_tags);
            show_list(current_tags);
            
        });
        
function select_tag(id) {
    $("#"+id).addClass("selected active-"+id);

    // если S1 - сбрасываем выбор группы стилей 
    if(id == "s1"){
        var layselect = $(".layout .selected").attr("id");
        //alert(layselect);
        $("#"+layselect).removeClass("selected active-"+layselect);
        delete current_tags["layout"];
    }
    
    var parnt = $("#"+id).parent();
    //var parent_class = $(parnt).attr("class");
    if($(parnt).hasClass("layout")){
        //alert("***");
        $("#s1").removeClass("selected active-s1");
        $("#s2").addClass("selected active-s2");
        //delete current_tags["s1"];
        current_tags["system"] = "s2";
    }
}   


//$("#choice").hide();

function show_list(tags){
    
    var tags_count = length(tags);
    
    var layouts_list = "<b>Вы выбрали:</b>  ";//<strong>Выбрано:</strong>
    var x;
    var counter = 0;
    
    for(var x in tag_group){
        var tag = "";
        var content = "";
        var group = tag_group[x];
        if(current_tags[group] != '' && current_tags[group] != null){
            tag = current_tags[group];
            //alert(x);
            content = $("#"+current_tags[group]+" span").html();
            if(content == null){
                content = $("#"+current_tags[group]).html();
            }

            layouts_list += "<span class=\"active-"+tag+"\"><span class=\""+group+"-item\">"+content+"</span></span>";

            if(counter < tags_count-1){
                layouts_list += " <strong>+</strong> "
            }
            counter++;
        }
    
    }
    

    $.post("/common.php", {
            tag: current_tags,
            counter: true
        },
        function(data){
            //var src = data;
            var mystr = data;
            //alert(data);
            $("#count-results").fadeIn("slow"); 
            $("#count-results").html(mystr);
        }
        );

    $("#choice").fadeIn("slow");
    $("#choice").html(layouts_list);
    
        
    
    
    
}  



function change_href(tags){
    
    var tags_count = length(tags);
    
    var href = "http://yoksel.ru/designs/#"
    var x;
    var counter = 0;
    for (x in tags){
        if(tags[x] != ''){
        href += x+"="+tags[x];
        
         if(counter < tags_count-1){
            href += "&";
        }
        counter++;
        }
        
    }
    document.location.href = href
}  

function length(obj) {
    var size = 0;
    $.each(obj, function(i, elem) { size++; });
    return size;
}

    //----------------------------------------------------------------

function create_list(tag){
        //alert(tag);

        var rand = Math.random() * (200 - 1) + 1;

        $.post("/common.php", {
            tag: tag
        //bg_color: $bg_color
        },
        function(data){
            //var src = data;
            var mystr = data;
            //alert(data);
            $("#layoutsplace").html(mystr);
        }
        );
}
    //----------------------------------------------------------------

    function get_count(tag){
        //alert(tag);
        var mystr = "*";
        $.post("/common.php", {
            tag: tag,
            counter: true
        },
        function(data){
            var mystr = data;
            var elem = ".tags>#"+tag;
            var sText = '<span>'+$(elem).text()+'</span><sup>'+mystr+'</sup>';

            $(elem).html(sText);
        //alert(data);
        }

        )
    //return mystr;
   
    }
    //----------------------------------------------------------------
    
    
    $("#pics_categories>span").click(
        function () {
            $(".selected").removeClass("selected");

            //$("#pics_box > img").hide();

            $(this).addClass("selected");

            var pics = $(this).attr("id");
            //alert(dises);
            load_pics(pics);

        //$("."+dises).show();
        }

        );
    //----------------------------------------------------------------
    function load_pics(pics){
        //alert(pics);
        mystr = "Загрузка..."
        $("#pics_box").html(mystr);

        $.post("/common.php", {
            category: pics
        //bg_color: $bg_color
        },
        function(data){
            var src = data;
            var mystr = data;
            //alert(data);
            $("#pics_box").html(mystr);
        }
        )
    }
    
    //----------------------------------------------------------------
    
    function load_compare(props){
        //alert(pics);
        mystr = "Загрузка..."
        $("#compareplace").html(mystr);

        $.post("/common.php", {
            props: props
        //bg_color: $bg_color
        },
        function(data){
            var src = data;
            var mystr = data;
            //alert(data);
            $("#compareplace").html(mystr);

var $anchor = $("#selectorsBox");

//var oTop = $anchor.offset().top;
//alert(oTop);

$('html, body').stop().animate({
    scrollTop: $anchor.offset().top
}, 1,'easeInExpo');





            $(".short>div").each(function (i) {
                $(this).css("background","#f5f5f5");
            });

            $(".short>div").hover(
                
                
                function () {
                    var colorsMy = ["#FFFCDF","#EFF5FF","#FFEFFC","#EFFFFC",
                        "#FAFFEF","#F2EFFF","#FFF2EF","#F0FFEF","#EFFFFF"];

                    var choice = Math.floor(Math.random() * (colorsMy.length + 1));
   

                    var bgcolor = colorsMy[choice];
                    
                    //alert(choice+" from "+colorsMy.length);
                    $(this).css("background", bgcolor);
                },
                function () {
                    //alert("-");
                    $(this).css("background","#f5f5f5");

                });
        }
        )
    }



    //----------------------------------------------------------------

    function get_props() {
        //alert("CHANGE");
        var props = $("form").serialize();

        if(props == ''){
            props = "default";
        }
        load_compare(props)

    //$("."+dises).show();
    }

    $("#choice_props>div>div>input").change(
        function () {
            get_props();
        }
        );
    $("#choice_props>div>div>span").click(
        function () {
            $("#choice_props>div>div>.selected").removeClass("selected");
            $(this).addClass("selected");

            var is_desc = $(this).attr("id");
            
            $("#layout_desc").val(is_desc);
            get_props();
        //alert($("#layout_desc").val());
        }

        );

//----------------------------------------------------------------



});