// animation and other handlers with jquery
$(document).ready(function () {
    // expand the min-height property of the mainblock to full height
    $('#mainBlock').css('min-height', document.documentElement.clientHeight - 30);
    // create a vriable to hold the current submenu 
    $currentSub = 'NONE';
    // minimum amount of pixel to be shown for slideout menu portion
    $leftMenuShowAmount = 10;
    $('#leftMenuSlide').css('width', $leftMenuShowAmount);
    $('#leftMenuSlide .top').css('width', $leftMenuShowAmount);
    $('#leftMenuSlide .bottom').css('width', $leftMenuShowAmount);
    // set the display of all other submenu to none except for pehel submenu
    $('#leftMenuSlide .middle .submenu_program').css('display', 'none');

    $('#leftFlyoutSlide').css('width', 30);
    $posX = (document.documentElement.clientWidth - 1000) / 2;
    if ($posX < 0) {
        $posX = 208;
    } else {
        $posX += 208;
    }
    $('#leftMenuSlide').css('left', $posX);

    // link pehel click - start
    $('#mainLinkPehel').hover(function () {
        var $lefty = $('#leftMenuSlide');
        var $leftyTop = $('#leftMenuSlide .top');
        var $leftyBottom = $('#leftMenuSlide .bottom');

        // there will be two situation - the menu is open or it is closed
        if (parseInt($lefty.css('width'), 10) == $leftMenuShowAmount) {  //means it is closed
            // set the current sub id 
            $currentSub = 'pehel';
            // make the menu items visible
            $('#leftMenuSlide .middle .submenu_contact').css('display', 'none');
            $('#leftMenuSlide .middle .submenu_pehel').css('display', 'block');
            $('#leftMenuSlide .middle .submenu_program').css('display', 'none');

            // slide the menu
            $lefty.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyTop.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyBottom.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
        } else {
            $tempSub = 'pehel';
            // check if the previous click is on this menu item or not
            if ($tempSub == $currentSub) { // means it is the same click before this
                // slide the menu
                $lefty.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyTop.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyBottom.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                // clear the current sub value
                $currentSub = 'NONE';
            } else {  // means it is another item click, so change only the menu content
                $('#leftMenuSlide .middle .submenu_contact').css('display', 'none');
                $('#leftMenuSlide .middle .submenu_pehel').css('display', 'block');
                $('#leftMenuSlide .middle .submenu_program').css('display', 'none');
                $currentSub = 'pehel';
            }
        }
    });
    // link pehel click - ends

    // link program click - start
    $('#mainLinkProgram').hover(function () {
        var $lefty = $('#leftMenuSlide');
        var $leftyTop = $('#leftMenuSlide .top');
        var $leftyBottom = $('#leftMenuSlide .bottom');

        // there will be two situation - the menu is open or it is closed
        if (parseInt($lefty.css('width'), 10) == $leftMenuShowAmount) {  //means it is closed
            // set the current sub id 
            $currentSub = 'program';
            // make the menu items visible
            $('#leftMenuSlide .middle .submenu_contact').css('display', 'none');
            $('#leftMenuSlide .middle .submenu_pehel').css('display', 'none');
            $('#leftMenuSlide .middle .submenu_program').css('display', 'block');
            // slide the menu
            $lefty.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyTop.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyBottom.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
        } else {
            $tempSub = 'program';
            // check if the previous click is on this menu item or not
            if ($tempSub == $currentSub) { // means it is the same click before this
                // slide the menu
                $lefty.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyTop.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyBottom.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                // clear the current sub value
                $currentSub = 'NONE';
            } else {  // means it is another item click, so change only the menu content
                $('#leftMenuSlide .middle .submenu_contact').css('display', 'none');
                $('#leftMenuSlide .middle .submenu_pehel').css('display', 'none');
                $('#leftMenuSlide .middle .submenu_program').css('display', 'block');
                $currentSub = 'program';
            }
        }
    });
    // link program click - ends

    // link contact click - start
    $('#mainLinkContact').hover(function () {
        var $lefty = $('#leftMenuSlide');
        var $leftyTop = $('#leftMenuSlide .top');
        var $leftyBottom = $('#leftMenuSlide .bottom');

        // there will be two situation - the menu is open or it is closed
        if (parseInt($lefty.css('width'), 10) == $leftMenuShowAmount) {  //means it is closed
            // set the current sub id 
            $currentSub = 'contact';
            // make the menu items visible
            $('#leftMenuSlide .middle .submenu_contact').css('display', 'block');
            $('#leftMenuSlide .middle .submenu_pehel').css('display', 'none');
            $('#leftMenuSlide .middle .submenu_program').css('display', 'none');

            // slide the menu
            $lefty.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyTop.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
            $leftyBottom.animate({
                width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
            });
        } else {
            $tempSub = 'contact';
            // check if the previous click is on this menu item or not
            if ($tempSub == $currentSub) { // means it is the same click before this
                // slide the menu
                $lefty.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyTop.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                $leftyBottom.animate({
                    width: parseInt($lefty.css('width'), 10) == $leftMenuShowAmount ? 199 : $leftMenuShowAmount
                });
                // clear the current sub value
                $currentSub = 'NONE';
            } else {  // means it is another item click, so change only the menu content
                $('#leftMenuSlide .middle .submenu_contact').css('display', 'block');
                $('#leftMenuSlide .middle .submenu_pehel').css('display', 'none');
                $('#leftMenuSlide .middle .submenu_program').css('display', 'none');
                $currentSub = 'contact';
            }
        }
    });
    // link contact click - ends

    $('#leftFlyoutHotspot a').hover(function () {
        var $lefty = $('#leftFlyoutSlide');
        $lefty.animate({
            width: parseInt($lefty.css('width'), 10) == 30 ? 302 : 30
        });
        if (parseInt($lefty.css('width'), 10) == 30) {
            $('#leftFlyoutHotspot img').attr('src', '/Images/LeftFlyoutSlideButton_Close.png');
            $('#leftFlyoutHotspot img').attr('title', 'Close');
        }
        if (parseInt($lefty.css('width'), 10) == 302) {
            $('#leftFlyoutHotspot img').attr('src', '/Images/LeftFlyoutSlideButton_open.png');
            $('#leftFlyoutHotspot img').attr('title', 'Open');
        }
    });
});

// set some parameters when the screen size changes
$(window).resize(function () {
    //alert('resized');
    $('#leftMenuSlide').css('width', $leftMenuShowAmount);
    $posX = (document.documentElement.clientWidth - 1000) / 2;
    if ($posX < 0) {
        $posX = 208;
    } else {
        $posX += 208;
    }
    $('#leftMenuSlide').css('left', $posX);

    // reset the mainblock client height
    $('#mainBlock').css('min-height', document.documentElement.clientHeight - 30);
});