$(document).ready(function () {
    function OnlyNumirec(input) {

        var value = input.value;
        var rep = /[-\.\u0020;":'a-zA-Zа-яА-Я]/;
        if (rep.test(value)) {
            value = value.replace(rep, '');
            input.value = value;
        }
    }
    $('.pg_sc9_dialog_but').click(function () {
        $(".pg_sc9_dialog").hide();
        $("#pg_sc9_box1").val("Контактное лицо (ФИО)");
        $("#pg_sc9_box2").val("Телефон/факс");
        $("#pg_sc9_box3").val("Название организации");
        $("#pg_sc9_box4").val("Email/ICQ");
        $("#pg_sc9_box5").val("");
    });
    $('.pg_sc9_but').click(function () {
        if ($("#pg_sc9_box1").val() == "Контактное лицо (ФИО)") var Contact = "Неуказанно";
        else var Contact = $("#pg_sc9_box1").val();
        if ($("#pg_sc9_box2").val() == "Телефон/факс") var Company = "Неуказанно";
        else var Company = $("#pg_sc9_box2").val();
        if ($("#pg_sc9_box3").val() == "Название организации") var Phone = "Неуказанно";
        else var Phone = $("#pg_sc9_box3").val();
        if ($("#pg_sc9_box4").val() == "Email/ICQ") var ICQ = "Неуказанно";
        else var ICQ = $("#pg_sc9_box4").val();
        if ($("#pg_sc9_box5").val() == "") var Count = "Неуказанно";
        else var Count = $("#pg_sc9_box5").val();
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/main.aspx/Send",
            data: "{'SeminarTitle': '" + $(".pg_sc9_desc").html() + "','Date': '" + $(".pg_sc9_date").html() + "','Contact': '" + Contact + "','Company': '" + Company + "','Phone': '" + Phone + "','ICQ': '" + ICQ + "','Count': '" + Count + "','Email': '" + $("#pg_sc9_fieldemail").val() + "'}",
            dataType: "json",
            success: function (msg) {
                $(".pg_sc9_dialog").show();
            }
        });
    });
    $("#pg_sc9_box5").keyup(function (e) {
        if (!isNaN($(this).val())) {

            var Price = parseInt($(".pg_sc9_price span").html());
            if ($("#pg_sc9_box5").val() != "") {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/main.aspx/GetItogo",
                    data: "{'Count': '" + $("#pg_sc9_box5").val() + "','Price': '" + Price + "','IDSeminar': '" + $("#pg_sc9_fieldidseminar").val() + "'}",
                    dataType: "json",
                    success: function (msg) {
                        $(".pg_sc9_title3 span").html(msg.d[0]);
                        $(".pg_sc9_title4 span").html(msg.d[1]);
                        $(".pg_sc9_title3").show();
                        $(".pg_sc9_title4").show();
                    }
                });
            }

        }
        else {
            $("#pg_sc9_box5").val("");
            $(".pg_sc9_title3").hide();
            $(".pg_sc9_title4").hide();
        }
    });
    $('#wrap').disableTextSelect();
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/main.aspx/InitSeminarBlock",
        data: "{}",
        dataType: "json",
        success: function (msg) {
            $(".pg_sc9_price span").html(msg.d[0]);
            $(".pg_sc9_date").html(msg.d[1]);
            $(".pg_sc9_desc").html(msg.d[2]);
            $("#pg_sc9_fieldemail").val(msg.d[3]);
            $("#pg_sc9_fieldidseminar").val(msg.d[4]);
            $("#pg_sc9_link").attr("href", "/ru/seminars/" + msg.d[4]);
        }
    });
    $('#tj_videocontainer').gridnav({
        rows: 1,
        navL: '#tjvideo_prev',
        navR: '#tjvideo_next',
        type: {
            mode: 'sequpdown',
            speed: 400,
            easing: '',
            factor: 50,
            reverse: false
        }
    });
    $('#tj_container').gridnav({
        rows: 2,
        navL: '#tj_prev',
        navR: '#tj_next',
        type: {
            mode: 'sequpdown',
            speed: 400,
            easing: '',
            factor: 100,
            reverse: false
        }
    });

    $(".pg_sc8_text1").animate({ opacity: '0' }, 1);
    $(".pg_sc8_text2").animate({ opacity: '0' }, 1);
    $(".pg_sc8_text3").animate({ opacity: '0' }, 1);
    $('.pg_sc8_but1').click(function () {
        $(".pg_sc8_text1").animate({ opacity: '1' }, 300);
        $(".pg_sc8_text2").animate({ opacity: '0' }, 300);
        $(".pg_sc8_text3").animate({ opacity: '0' }, 300);
    });
    $('.pg_sc8_but2').click(function () {
        $(".pg_sc8_text2").animate({ opacity: '1' }, 300);
        $(".pg_sc8_text1").animate({ opacity: '0' }, 300);
        $(".pg_sc8_text3").animate({ opacity: '0' }, 300);
    });
    $('.pg_sc8_but3').click(function () {
        $(".pg_sc8_text3").animate({ opacity: '1' }, 300);
        $(".pg_sc8_text2").animate({ opacity: '0' }, 300);
        $(".pg_sc8_text1").animate({ opacity: '0' }, 300);
    });
    $(".pg_sc6_bg7").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg6").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg5").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg4").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg3").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg2").animate({ opacity: '0' }, 0);
    $(".pg_sc6_bg1").animate({ opacity: '0' }, 0);
    var CorrectSc6 = 0;
    var PgSc6 = 7;
    $('.pg_sc6_correct').click(function () {
        CorrectSc6 = 0;
        $(".pg_sc6_bg8").animate({ opacity: '0' }, 500);
        $(".pg_sc6_bg7").animate({ opacity: '1' }, 0);
        $(".pg_sc6_but:eq(0)").addClass("pg_sc6_but_active");
        setTimeout(function () { $(".pg_sc6_but:eq(1)").addClass("pg_sc6_but_active"); }, 500);
        setTimeout(function () { $(".pg_sc6_bg7").animate({ opacity: '0' }, 500); }, 500);
        setTimeout(function () { $(".pg_sc6_bg6").animate({ opacity: '1' }, 0); }, 500);
        setTimeout(function () { $(".pg_sc6_but:eq(2)").addClass("pg_sc6_but_active"); }, 1000);
        setTimeout(function () { $(".pg_sc6_bg6").animate({ opacity: '0' }, 500); }, 1000);
        setTimeout(function () { $(".pg_sc6_bg5").animate({ opacity: '1' }, 0); }, 1000);
        setTimeout(function () { $(".pg_sc6_but:eq(3)").addClass("pg_sc6_but_active"); }, 1500);
        setTimeout(function () { $(".pg_sc6_bg5").animate({ opacity: '0' }, 500); }, 1500);
        setTimeout(function () { $(".pg_sc6_bg4").animate({ opacity: '1' }, 0); }, 1500);
        setTimeout(function () { $(".pg_sc6_but:eq(4)").addClass("pg_sc6_but_active"); }, 2000);
        setTimeout(function () { $(".pg_sc6_bg4").animate({ opacity: '0' }, 500); }, 2000);
        setTimeout(function () { $(".pg_sc6_bg3").animate({ opacity: '1' }, 0); }, 2000);
        setTimeout(function () { $(".pg_sc6_but:eq(5)").addClass("pg_sc6_but_active"); }, 2500);
        setTimeout(function () { $(".pg_sc6_bg3").animate({ opacity: '0' }, 500); }, 2500);
        setTimeout(function () { $(".pg_sc6_bg2").animate({ opacity: '1' }, 0); }, 2500);
        setTimeout(function () { $(".pg_sc6_but:eq(6)").addClass("pg_sc6_but_active"); }, 3000);
        setTimeout(function () { $(".pg_sc6_bg2").animate({ opacity: '0' }, 500); }, 3000);
        setTimeout(function () { $(".pg_sc6_bg1").animate({ opacity: '1' }, 0); }, 3000);
        setTimeout(function () { $(".pg_sc6_but:eq(7)").addClass("pg_sc6_but_active"); }, 3500);
        $('.pg_sc6_correct').hide();
        setTimeout(function () { CorrectSc6 = 1; }, 3500);

        PgSc6 = 7;
    });

    $('.pg_sc6_but').click(function () {
        if (CorrectSc6 == 1) {
            if ($(this).attr("class") == "pg_sc6_but pg_sc6_but_active") {
                PgSc6 = PgSc6 - 1;
                $(this).removeClass("pg_sc6_but_active");
                switch (PgSc6) {
                    case 0: $(".pg_sc6_bg8").animate({ opacity: '1' }, 300); $('.pg_sc6_correct').show(); break;
                    case 1: $(".pg_sc6_bg7").animate({ opacity: '1' }, 300); break;
                    case 2: $(".pg_sc6_bg6").animate({ opacity: '1' }, 300); break;
                    case 3: $(".pg_sc6_bg5").animate({ opacity: '1' }, 300); break;
                    case 4: $(".pg_sc6_bg4").animate({ opacity: '1' }, 300); break;
                    case 5: $(".pg_sc6_bg3").animate({ opacity: '1' }, 300); break;
                    case 6: $(".pg_sc6_bg2").animate({ opacity: '1' }, 300); break;
                }
            }
            else {
                PgSc6 = PgSc6 + 1;
                $(this).addClass("pg_sc6_but_active");
                switch (PgSc6) {
                    case 1: $(".pg_sc6_bg7").show(); $(".pg_sc6_bg8").animate({ opacity: '0' }, 300); break;
                    case 2: $(".pg_sc6_bg6").show(); $(".pg_sc6_bg7").animate({ opacity: '0' }, 300); break;
                    case 3: $(".pg_sc6_bg5").show(); $(".pg_sc6_bg6").animate({ opacity: '0' }, 300); break;
                    case 4: $(".pg_sc6_bg4").show(); $(".pg_sc6_bg5").animate({ opacity: '0' }, 300); break;
                    case 5: $(".pg_sc6_bg3").show(); $(".pg_sc6_bg4").animate({ opacity: '0' }, 300); break;
                    case 6: $(".pg_sc6_bg2").show(); $(".pg_sc6_bg3").animate({ opacity: '0' }, 300); break;
                    case 7: $(".pg_sc6_bg1").show(); $(".pg_sc6_bg2").animate({ opacity: '0' }, 300); break;
                }
            }
        }

    });

    jQuery('#newskiscarousel').jcarousel({ vertical: true, scroll: 1 });
    jQuery('#dircarousel').jcarousel({ vertical: true, scroll: 1 });
    jQuery('#lawcarousel').jcarousel({ vertical: true, scroll: 1 });



    var Interval7_1;
    var Interval7_2;
    var Interval7_3;
    var But7;
    $(".pg_img10").animate({ opacity: '0' }, 1);
    $('.pg_but10').click(function () {
        $(".pg_img10").animate({ opacity: '1' }, 300);
        $(".desc10_title1").html("ВИКТОРИЯ<br />Главный бухгалтер");
        $(".desc10_title1").css("color", "#2d5daa");
        $(".desc10_body1").html("-Увеличение производи-<br />тельности на 40%<br />- Умение работать в команде");
        $(".desc10_body2").html("-Заключение выгодных стратегически сделок<br />- Нацелен на результат");
        $(".desc10_title2").html("ВАСИЛИЙ<br />Ведущий специалист");
        $(".desc10_title2").css("color", "#2d5daa");
        $(".desc10_title3").html("Увеличение производительности на 40%<br />Хорошее взаимодействие между отделами<br />Режим поступления товара не нарушается");
        $(".desc10_title3").css("color", "#2d5daa");
        $('.pg_but10').hide();
    });

    var FonarState1 = 0;
    var FonarState2 = 0;
    var FonarState3 = 0;
    var Fonar = 0;
    $(".pg_sc2_bg1").animate({ opacity: '0' }, 1);
    $(".pg_sc2_bg2").animate({ opacity: '0' }, 1);
    $(".pg_sc2_bg3").animate({ opacity: '0' }, 1);
    $(".pg_sc2_text1").animate({ opacity: '0' }, 1);
    $(".pg_sc2_text2").animate({ opacity: '0' }, 1);
    $(".pg_sc2_text3").animate({ opacity: '0' }, 1);
    $('.pg_sc2_fonar1').click(function () {
        if (FonarState1 == 0) {
            switch (Fonar) {
                case 0:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '1' }, 500);
                    // $(".pg_sc2_bg0").hide();

                    Fonar = 1;
                    break;
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '1' }, 500);

                    Fonar = 2; $(".pg_sc2_st").hide();
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '1' }, 500);

                    Fonar = 3;
                    break;
            }
            FonarState1 = 1;
            $(".pg_sc2_fonar1").addClass("pg_sc2_active1");
            $(".pg_sc2_text1").animate({ opacity: '1' }, 500);
        }
        else {
            switch (Fonar) {
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '1' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '0' }, 500);
                    Fonar = 0;
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '0' }, 500);
                    Fonar = 1;
                    break;
                case 3:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '0' }, 500);
                    Fonar = 2;
                    break;
            }
            FonarState1 = 0;
            $('.pg_sc2_fonar1').removeClass('pg_sc2_active1');
            $(".pg_sc2_text1").animate({ opacity: '0' }, 500);
        }
    });
    $('.pg_sc2_fonar2').click(function () {
        if (FonarState2 == 0) {
            switch (Fonar) {
                case 0:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '1' }, 500);
                    // $(".pg_sc2_bg0").hide();

                    Fonar = 1;
                    break;
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '1' }, 500);

                    Fonar = 2;
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '1' }, 500);

                    Fonar = 3;
                    break;
            }
            FonarState2 = 1;
            $(".pg_sc2_fonar2").addClass("pg_sc2_active2");
            $(".pg_sc2_text2").animate({ opacity: '1' }, 500);
        }
        else {
            switch (Fonar) {
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '1' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '0' }, 500);
                    Fonar = 0;
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '0' }, 500);
                    Fonar = 1;
                    break;
                case 3:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '0' }, 500);
                    Fonar = 2;
                    break;
            }
            FonarState2 = 0;
            $('.pg_sc2_fonar2').removeClass('pg_sc2_active2');
            $(".pg_sc2_text2").animate({ opacity: '0' }, 500);
        }
    });
    $('.pg_sc2_fonar3').click(function () {
        if (FonarState3 == 0) {
            switch (Fonar) {
                case 0:
                    //      $(".pg_sc2_bg0").hide();
                    //      $(".pg_sc2_bg0").animate({ opacity: '0' }, 1);
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '1' }, 500);
                    // $(".pg_sc2_bg0").hide();

                    Fonar = 1;
                    break;
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '1' }, 500);

                    Fonar = 2;
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '1' }, 500);

                    Fonar = 3;
                    break;
            }
            FonarState3 = 1;
            $(".pg_sc2_fonar3").addClass("pg_sc2_active3");
            $(".pg_sc2_text3").animate({ opacity: '1' }, 500);
        }
        else {
            switch (Fonar) {
                case 1:
                    $(".pg_sc2_st").animate({ opacity: '1' }, 500);
                    $(".pg_sc2_bg1").animate({ opacity: '0' }, 500);
                    Fonar = 0;
                    break;
                case 2:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg2").animate({ opacity: '0' }, 500);
                    Fonar = 1;
                    break;
                case 3:
                    $(".pg_sc2_st").animate({ opacity: '0' }, 500);
                    $(".pg_sc2_bg3").animate({ opacity: '0' }, 500);
                    Fonar = 2;
                    break;
            }
            FonarState3 = 0;
            $('.pg_sc2_fonar3').removeClass('pg_sc2_active3');
            $(".pg_sc2_text3").animate({ opacity: '0' }, 500);
        }
    });
    $(".pg_sc5_bg").animate({ opacity: '0' }, 1);
    $('.pg_but5').click(function () {
        $('.pg_but5').hide();
        $(".pg_sc5_bg").animate({ opacity: '1' }, 1000);
        setTimeout(function () {
            $(".pg_sc5_bg0").hide();
        }, 1000)


    });
    $('.pg_d7title5').click(function () {
        $('.pg_but7_1').show();
        $('.pg_but7_2').show();
        $(".pg_wrap7_1").hide();
        $(".pg_d7val1_1").html("0");
        $(".pg_d7val2_1").html("0");
        $(".pg_d7val3_1").html("0");
        $(".pg_d7val1").hide();
        $(".pg_d7val2").hide();
        $(".pg_d7val3").hide();
        $(".pg_d7title2").hide();
        $(".pg_d7title3").hide();
        $(".pg_d7title4").hide();
        $(".pg_d7title5").hide();
    });
    $('.pg_but7_1').click(function () {
        But7 = 1;
        $('.pg_but7_1').hide();
        $('.pg_but7_2').hide();
        $(".pg_wrap7_1").show();
        setTimeout(function () {
            $(".pg_d7title2").show();
            $(".pg_d7val1").show();
            Interval7_1 = setInterval(pg_sc7_1, 20);
        }, 500)


    });
    $('.pg_but7_2').click(function () {
        But7 = 2;
        $('.pg_but7_1').hide();
        $('.pg_but7_2').hide();
        $(".pg_wrap7_1").show();
        setTimeout(function () {
            $(".pg_d7title2").show();
            $(".pg_d7val1").show();
            Interval7_1 = setInterval(pg_sc7_1, 20);
        }, 500)


    });
    function pg_sc7_1() {

        var temp = parseInt($(".pg_d7val1_1").html());
        temp = temp + 2344;
        $(".pg_d7val1_1").html(temp);
        if (temp > 195500) {
            clearInterval(Interval7_1);
            setTimeout(function () {
                $(".pg_d7title3").show();
                $(".pg_d7val2").show();
                Interval7_2 = setInterval(pg_sc7_2, 20);
            }, 500)
        }
    }
    function pg_sc7_2() {

        var temp = parseInt($(".pg_d7val2_1").html());
        temp = temp + 4490;
        $(".pg_d7val2_1").html(temp);
        if (temp > 350000) {
            clearInterval(Interval7_2);
            setTimeout(function () {
                $(".pg_d7title4").show();
                $(".pg_d7val3").show();
                Interval7_3 = setInterval(pg_sc7_3, 20);
            }, 500)
        }
    }
    function pg_sc7_3() {

        var temp = parseInt($(".pg_d7val3_1").html());
        temp = temp + 1;
        $(".pg_d7val3_1").html(temp);
        if (temp > 94) {
            clearInterval(Interval7_3);
            if (But7 == 1) {
                $(".pg_d7title5").show();
            }
            else {
                $(".pg_d7title6").show();
            }
        }
    }
    $(".pg_cs4_text1").animate({ opacity: '0' }, 0);
    $(".pg_cs4_text2").animate({ opacity: '0' }, 0);
    $(".pg_cs4_text3").animate({ opacity: '0' }, 0);
    $(".pg_sc4_1").hover(
      function () {
          $(".pg_cs4_text1").animate({ opacity: '1' }, 200);
          $(".pg_cs4_text1").css("left", "70px");
      },
      function () {
          $(".pg_cs4_text1").animate({ opacity: '0' }, 200);
          $(".pg_cs4_text1").css("left", "900px");
      }
    );
    $(".pg_sc4_2").hover(
      function () {
          $(".pg_cs4_text2").animate({ opacity: '1' }, 200);
          $(".pg_cs4_text2").css("left", "-50px");
      },
      function () {
          $(".pg_cs4_text2").animate({ opacity: '0' }, 200);
          $(".pg_cs4_text2").css("left", "900px");
      }
    );
    $(".pg_sc4_3").hover(
      function () {
          $(".pg_cs4_text3").animate({ opacity: '1' }, 200);
          $(".pg_cs4_text3").css("left", "-60px");
      },
      function () {
          $(".pg_cs4_text3").animate({ opacity: '0' }, 200);
          $(".pg_cs4_text3").css("left", "900px");
      }
    );
    $(".pg_sc1").hover(
      function () {
          //  alert("2");
          $(".pg_sc1_img1").animate({ left: "0px" }, { queue: false, duration: 200 })
         .animate({ top: "55px" }, 200);
          $(".pg_sc1_des").animate({ right: "0px" }, 200);
      },
      function () {
          $(".pg_sc1_img1").animate({ left: "-230px" }, { queue: false, duration: 200 })
         .animate({ top: "-50px" }, 200);
          $(".pg_sc1_des").animate({ right: "-235px" }, 200);
      }
    );

    $(".pg_sc2").hover(
      function () {
          //  alert("2");
          $(".pg_sc2_img").animate({ right: "0px" }, { queue: false, duration: 200 })
         .animate({ top: "55px" }, 200);
          $(".pg_sc2_des").animate({ left: "0px" }, 200);
      },
      function () {
          $(".pg_sc2_img").animate({ right: "-230px" }, { queue: false, duration: 200 })
         .animate({ top: "-50px" }, 200);
          $(".pg_sc2_des").animate({ left: "-276px" }, 200);
      }
    );


});

$(function () {
    $("#accordion").accordion({
        event: "mouseover", active: 4, header: 'a', autoHeight: false
    });
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index', '1').stop(true, true).slideDown(200, function () {
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);
        $oe_overlay.stop(true, true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true, true).fadeTo(200, 0);

        $oe_menu_items.children('div').hide();
        $oe_overlay.hide();
    })


    /**
    * the element
    */
    var $ui = $('#ui_element');

    /**
    * on focus and on click display the dropdown, 
    * and change the arrow image
    */
    $ui.find('.sb_input').bind('focus click', function () {
        $ui.find('.sb_down')
					   .addClass('sb_up')
					   .removeClass('sb_down')
					   .andSelf()
					   .find('.sb_dropdown')
					   .show();
    });

    /**
    * on mouse leave hide the dropdown, 
    * and change the arrow image
    */
    $ui.bind('mouseleave', function () {
        $ui.find('.sb_up')
					   .addClass('sb_down')
					   .removeClass('sb_up')
					   .andSelf()
					   .find('.sb_dropdown')
					   .hide();
    });

    /**
    * selecting all checkboxes
    */
    $ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click', function () {
        $(this).parent().siblings().find(':checkbox').attr('checked', this.checked).attr('disabled', this.checked);
    });



    //index of current item
    var current = 0;
    //speeds / ease type for animations
    var fadeSpeed = 400;
    var animSpeed = 600;
    var easeType = 'easeOutCirc';
    //caching

    var $thumbScroller = $('#thumbScroller');
    var $scrollerContainer = $thumbScroller.find('.container');
    var $scrollerContent = $thumbScroller.find('.content');
    var $pg_title = $('#pg_title');
    var $pg_preview = $('#pg_preview');
    var $pg_desc1 = $('#pg_desc1');
    var $pg_desc2 = $('#pg_desc2');
    var $overlay = $('#overlay');
    //number of items
    var scrollerContentCnt = 10;
    var sliderHeight = 507;
    //we will store the total height
    //of the scroller container in this variable
    var totalContent = 1400;
    //one items height
    var itemHeight = 150;

    //First let's create the scrollable container,
    //after all its images are loaded
    var cnt = 0;
    $thumbScroller.find('img').each(function () {
        var $img = $(this);
        $('<img/>').load(function () {
            ++cnt;
            if (cnt == scrollerContentCnt) {
                //one items height
                itemHeight = 140;
                buildScrollableItems();
                //show the scrollable container
                $thumbScroller.stop().animate({ 'left': '0px' }, animSpeed);
            }
        }).attr('src', $img.attr('src'));
    });

    //when we click an item from the scrollable container
    //we want to display the items content
    //we use the index of the item in the scrollable container
    //to know which title / image / descriptions we will show
    $scrollerContent.bind('click', function (e) {
        var $this = $(this);

        var idx = $this.index();
        //if we click on the one shown then return
        if (current == idx) return;

        //if the current image is enlarged,
        //then we will remove it but before
        //we animate it just like we would do with the thumb
        var $pg_large = $('#pg_large');
        if ($pg_large.length > 0) {
            $pg_large.animate({ 'left': '350px', 'opacity': '0' }, animSpeed, function () {
                $pg_large.remove();
            });
        }

        //get the current and clicked items elements
        var $currentTitle = $pg_title.find('h1:nth-child(' + (current + 1) + ')');
        var $nextTitle = $pg_title.find('h1:nth-child(' + (idx + 1) + ')');
        var $currentThumb = $pg_preview.find('img.pg_thumb:eq(' + current + ')');
        var $nextThumb = $pg_preview.find('img.pg_thumb:eq(' + idx + ')');
        var $currentDesc1 = $pg_desc1.find('div:nth-child(' + (current + 1) + ')');
        var $nextDesc1 = $pg_desc1.find('div:nth-child(' + (idx + 1) + ')');
        var $currentDesc2 = $pg_desc2.find('div:nth-child(' + (current + 1) + ')');
        var $nextDesc2 = $pg_desc2.find('div:nth-child(' + (idx + 1) + ')');

        //the new current is now the index of the clicked scrollable item
        current = idx;

        //animate the current title up,
        //hide it, and animate the next one down
        $currentTitle.stop().animate({ 'top': '-50px' }, animSpeed, function () {
            $(this).hide();
            $nextTitle.show().stop().animate({ 'top': '25px' }, animSpeed);
        });

        //show the next image,
        //animate the current to the left and fade it out
        //so that the next gets visible
        $nextThumb.show();
        $currentThumb.stop().animate({ 'left': '600px', 'opacity': '0' }, animSpeed, function () {
            $(this).hide().css({
                'left': '520px',
                'opacity': 1,
                'z-index': 1
            });

        });

        //animate both current descriptions left / right and fade them out
        //fade in and animate the next ones right / left
        $currentDesc1.stop().animate({ 'left': '400px', 'opacity': '0' }, animSpeed, function () {
            $(this).hide();
            $nextDesc1.show().stop().animate({ 'left': '520px', 'opacity': '1' }, animSpeed);
        });
        $currentDesc2.stop().animate({ 'left': '295px', 'opacity': '0' }, animSpeed, function () {
            $(this).hide();
            $nextDesc2.show().stop().animate({ 'left': '250px', 'opacity': '1' }, animSpeed);
        });
        e.preventDefault();
    });

    //when we click a thumb, the thumb gets enlarged,
    //to the sizes of the large image (fixed values).
    //then we load the large image, and insert it after
    //the thumb. After that we hide the thumb so that
    //the large one gets displayed
    $pg_preview.find('.pg_thumb').bind('click', showLargeImage);

    //enlarges the thumb


    //resize window event:
    //the scroller container needs to update
    //its height based on the new windows height
    $(window).resize(function () {
        var w_h = $("#head_wrap2").height();
        $thumbScroller.css('height', w_h);
        sliderHeight = w_h;
    });

    //create the scrollable container
    //taken from Manos :
    //http://manos.malihu.gr/jquery-thumbnail-scroller
    function buildScrollableItems() {
        totalContent = (scrollerContentCnt - 1) * itemHeight;
        $thumbScroller.css('height', sliderHeight)
					.mousemove(function (e) {
					    if ($scrollerContainer.height() > sliderHeight) {
					        var mouseCoords = (e.pageY - this.offsetTop);
					        var mousePercentY = mouseCoords / sliderHeight;
					        var destY = -(((totalContent - (sliderHeight - itemHeight)) - sliderHeight) * (mousePercentY));
					        var thePosA = mouseCoords - destY;
					        var thePosB = destY - mouseCoords;
					        if (mouseCoords == destY)
					            $scrollerContainer.stop();
					        else if (mouseCoords > destY)
					            $scrollerContainer.stop()
							.animate({
							    top: -thePosA
							},
							animSpeed,
							easeType);
					        else if (mouseCoords < destY)
					            $scrollerContainer.stop()
							.animate({
							    top: thePosB
							},
							animSpeed,
							easeType);
					    }
					}).find('.thumb')
					.fadeTo(fadeSpeed, 0.6)
					.hover(
					function () { //mouse over
					    $(this).fadeTo(fadeSpeed, 1);
					},
					function () { //mouse out
					    $(this).fadeTo(fadeSpeed, 0.6);
					}
				);
    }

});