$(document).ready(function() {

    //    $('#g-menu').mouseleave(function() {
    //        $("#PopBox1").hide("slow");
    //        $("#PopBox2").hide("slow");
    //        $('#Sepration').css("display", "block");
    //        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
    //    });

    $("#g-menu").delegate("#btnClose", "click", function() {        
        $("#PopBox1").hide("slow");
        $("#PopBox2").hide("slow");
        $('#Sepration').css("display", "block");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
    });


    $('#a1').click(function() {
        $('#PopBox1').show("slow");
        $("#PopBox2").hide("slow");
        $('#Sepration').css("display", "none");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox1').addClass("box-hover");
        $('#PopBox1').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=1",
            success: function(html) {
                $("#PopBox1").removeClass();
                $("#PopBox1").addClass("PopBox PopBoxShow1");
                $("#PopBox1").html(html);
            }

        });
    });

    $('#a2').click(function() {
        $('#PopBox1').show("slow");
        $("#PopBox2").hide("slow");
        $('#Sepration').css("display", "none");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox2').addClass("box-hover");
        $('#PopBox1').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=2",
            success: function(html) {
                $("#PopBox1").removeClass();
                $("#PopBox1").addClass("PopBox PopBoxShow2");
                $("#PopBox1").html(html);
            }

        });
    });

    $('#a3').click(function() {
        $('#PopBox1').show("slow");
        $("#PopBox2").hide("slow");
        $('#Sepration').css("display", "none");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox3').addClass("box-hover");
        $('#PopBox1').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=3",
            success: function(html) {
                $("#PopBox1").removeClass();
                $("#PopBox1").addClass("PopBox PopBoxShow3");
                $("#PopBox1").html(html);
            }

        });
    });

    $('#a4').click(function() {
        $('#PopBox1').show("slow");
        $("#PopBox2").hide("slow");
        $('#Sepration').css("display", "none");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox4').addClass("box-hover");
        $('#PopBox1').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=4",
            success: function(html) {
                $("#PopBox1").removeClass();
                $("#PopBox1").addClass("PopBox PopBoxShow4");
                $("#PopBox1").html(html);
            }

        });
    });

    $('#a5').click(function() {
        $('#PopBox2').show("slow");
        $("#PopBox1").hide("slow");
        $('#Sepration').css("display", "block");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox5').addClass("box-hover");
        $('#PopBox2').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=5",
            success: function(html) {
                $("#PopBox2").removeClass();
                $("#PopBox2").addClass("PopBox PopBoxShow5");
                $("#PopBox2").html(html);
            }

        });
    });

    $('#a6').click(function() {
        $('#PopBox2').show("slow");
        $("#PopBox1").hide("slow");
        $('#Sepration').css("display", "block");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox6').addClass("box-hover");
        $('#PopBox2').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=6",
            success: function(html) {
                $("#PopBox2").removeClass();
                $("#PopBox2").addClass("PopBox PopBoxShow6");
                $("#PopBox2").html(html);
            }

        });
    });

    $('#a7').click(function() {
        $('#PopBox2').show("slow");
        $("#PopBox1").hide("slow");
        $('#Sepration').css("display", "block");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox7').addClass("box-hover");
        $('#PopBox2').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=7",
            success: function(html) {
                $("#PopBox2").removeClass();
                $("#PopBox2").addClass("PopBox PopBoxShow7");
                $("#PopBox2").html(html);
            }

        });
    });

    $('#a8').click(function() {
        $('#PopBox2').show("slow");
        $("#PopBox1").hide("slow");
        $('#Sepration').css("display", "block");
        $('.gray-box1, .gray-box2, .gray-box3, .gray-box4').removeClass("box-hover");
        $('#graybox8').addClass("box-hover");
        $('#PopBox2').html("<img id='imgProg' style='margin-right:210px;margin-top:20px;' alt='Progress' src='/skins/default/ImagesFa/ajax-loader.gif' visible='false' />");
        $.ajax({
            type: "post",
            url: "/fa/Popup.aspx?pId=8",
            success: function(html) {
                $("#PopBox2").removeClass();
                $("#PopBox2").addClass("PopBox PopBoxShow8");
                $("#PopBox2").html(html);
            }

        });
    });

});