/// <reference path="~/js/jquery/jquery.js" />
/// <reference path="~/js/jquery/jquery.idfix.js" />
/// <reference path="~/js/global.js" />

var FirstLoad = false;
var IsMobile = false;

$(document).ready(function() {
    DebugAdd('layout.js -> Document Ready, FirstLoad = ' + FirstLoad);
    SubMenuHover();
    // window.setTimeout(ReplaceFlashHeader, 1500);        // 1000ms for the animation..
    FadeInContent();
});

/*
function ReplaceFlashHeader() {
    $('.flashheader').css('display', 'none');
    $('img.header-logo').css('display', '');
}
*/

var FadeInContentCounter = 0;
function FadeInContent() {
    // Limit FadeInContent retries (if no content, it will always be 0)
    FadeInContentCounter++;
    if (FadeInContentCounter >= 5) { return; }

    var AniPreDelay = 0;
    if (FirstLoad) { AniPreDelay = 1000; }
    
    var ContentHeight = $('div.content').height();
    if (ContentHeight == 0) {
        DebugAdd('layout.js -> Delaying FadeInContent..');
        window.setTimeout(FadeInContent, 200);
    }
    else {
        //DebugAdd('ContentHeight = ' + ContentHeight);
        var NumberOfEffects = 3;
        var numRand = Math.floor(Math.random() * NumberOfEffects) + 1;
        
        // Only fadeIn effect for now
        numRand = 1;
        
        // More effects -> http://jqueryui.com/demos/effect/#option-effect
        // Most are 'hide effects' :(
        switch (numRand) {
            case 1:
                DebugAdd('layout.js -> Effect -> FadeIn()');
                $('div.container').css('min-height', ContentHeight + 'px');
                $('div.content').css('display', 'none');
                $('div.content').css('visibility', 'visible');
                $('div.content').delay(AniPreDelay).fadeIn('slow');
                break;

            case 2:
                DebugAdd('layout.js -> Effect -> SlidesDown()');
                $('div.content').css('display', 'none');
                $('div.content').css('visibility', 'visible');
                $('div.content').delay(AniPreDelay).slideDown('slow');
                break;

            case 3:
                DebugAdd('layout.js -> Effect -> Slide()');
                $('div.container').css('min-height', ContentHeight + 'px');
                $('div.content').css('display', 'none');
                $('div.content').css('visibility', 'visible');
                $('div.content').delay(AniPreDelay).effect('slide');
                break;
        }
        
    }
    
}


function SubMenuHover() {
    var ParentLI;

    $('.submenu').each(function() {
        // Get parent..
        ParentLI = $(this).parent();

        var Link = $(ParentLI).children('a');       // Change the link to something that so the page is not gonna reload when it's clicked
        $(Link).attr('href', '#submenu');

        SetShowSubMenuOnClick(ParentLI);

        /*
        $(ParentLI).hover(function() { ShowSubMenu(ParentLI);},
                          function() { HideSubMenu(ParentLI);}
                          );
        */
    });
}

function SetShowSubMenuOnClick(ParentLI) {
    $(ParentLI).click(function(event) {
        event.preventDefault();                 // Ensure the link is not followed
        ShowSubMenu(ParentLI);
        $(ParentLI).unbind('click');
    });
}

/*
     PROBLEM: click a menu item with submenu, click again to close. Click once more to open, it will close again. Ccheck binds/mechanism...
*/
var CurrentSubMenu = null;
function ShowSubMenu(ParentLI) {

    DebugAdd('ShowSubMenu()');

    // Get the submenu
    var SubMenu = $(ParentLI).children('.submenu');

    if (CurrentSubMenu != null) {
        // A sub-menu is already open
        // HideCurrentSubMenuOnDocumentClick();
        
        // Is it the same as the one that was just clicked?
        // if (CurrentSubMenu != SubMenu) { }
    }

    CurrentSubMenu = SubMenu;

    // Fix position
    var Offset = ParentLI.height();
    var Left = ParentLI.position().left;
    var Top = ParentLI.position().top + Offset;
    $(CurrentSubMenu).css('left', Left.toString() + 'px');
    $(CurrentSubMenu).css('top', Top.toString() + 'px');

    // Show it
    $(CurrentSubMenu).fadeIn('fast');

    // When user clicks the menu item (with the submenu items) again, it should close! Change the click method, restore it later:
    // $(ParentLI).click(function() { HideCurrentSubMenu(); });


    // Make sure the menu hides again when user clicks on the document
    // Do this with a delay or the click that opens the submenu will also close the submenu
    window.setTimeout(HideCurrentSubMenuOnDocumentClick, 100);
}

// This code is in a seperate function because it must be called with a timeout, otherwise the DOM immediatly registers a document click, causing the submenu to be immediatly closed again..
function HideCurrentSubMenuOnDocumentClick() {
    DebugAdd('HideCurrentSubMenuOnDocumentClick()');
    $(document).click(function() { HideCurrentSubMenu(); });
}

function HideCurrentSubMenu() {

    DebugAdd('HideCurrentSubMenu()');

    // if (CurrentSubMenu != null) { }
    
        $(CurrentSubMenu).fadeOut('normal');
        $(document).unbind('click');

        // Restore ShowSubMenu call on click..      NOT WORKING!!!
        var ParentLI = $(CurrentSubMenu).parent();
        SetShowSubMenuOnClick(ParentLI);
        
        // CurrentSubMenu = null;
    
}

function HideSubMenu(ParentLI) {
    var SubMenu = $(ParentLI).children('.submenu');

    // Hide it
    $(SubMenu).fadeOut('normal');
}





function FirstLoadAnimation() {
    if (FirstLoad) {
        // After intro-animation completed:
        var IntroLength = 2500;

        // Hide intro-animation div
        $('.intro').delay(IntroLength).hide();

        // Show content

    }
}

/*
jQuery animation test..
function AnimationTest() {
    
    $('.intro_welcome').hide();
    $('.intro_opdenieuwewebsite').hide();
    $('.intro_ebobv').hide();
    $('.intro').css('display', 'block');

    var FadeIn = 500;
    var FadeOut = 400;
    var TotalDelay = 0;

    $('.intro').animate({ height: '400px' }, FadeIn);
    TotalDelay += FadeIn;

    $('.intro_welcome').delay(TotalDelay).fadeIn(FadeIn).fadeOut(FadeOut);
    TotalDelay += FadeIn + FadeOut;

    $('.intro_opdenieuwewebsite').delay(TotalDelay).fadeIn(FadeIn).fadeOut(FadeOut);
    TotalDelay += FadeIn + FadeOut;

    $('.intro_ebobv').delay(TotalDelay).fadeIn(FadeIn).fadeOut(FadeOut);
    TotalDelay += FadeIn + FadeOut;

    $('.intro').delay(TotalDelay).animate({ height: '0px' }, FadeIn);
}
*/