// Define objects
var $body = $('body');
var $left = $('#left_column');
var $center = $('#center_column');
var $right = $('#right_column');

var $mainMenu = $('#main_menu');
var $footer = $('#footer');
var $map = $( "#map" );


// Save viewport
$body.append('<div id="jsLoad" style="display:none"></div>');

// Calculate center width
onResize();
$(window).resize(onResize);
$(window).scroll(onScroll);

// Give all routes in menu a color
$('.route_color').each(function()
{
   $(this).css({ background: '#' + $(this).attr('data-color') });
});

setColumnHeight();

// Prepare submenu
$mainMenu.children('li').children('ul').each(function()
{
    $(this).attr('data-h',$(this).height());
});

// Set actions on main menu
var active = $('.active').index();
$mainMenu.children('li').children('.inner').click(function()
{
    var $li = $(this).parent();
    // Is there an submenu in the list item
    if($li.children('ul').length > 0)
    {
        if($li.index() != active)
        {
            // Open a submenu
            closeSubmenu(active);
            openSubmenu($li.index());
        }
        else
        {
            closeSubmenu($li.index());
        }
    }

    var $active = $('.active');
    $active.children('.inner').css({ backgroundColor:'#F2F2F2'});
    $active.removeClass('active');
    if( active != null)
    {
        $li.addClass('active');
        $li.children('.inner').css({ backgroundColor:'#001D33'});
    }
});

// Main Menu hovers
$mainMenu.children('li').children('.inner').hover(function()
{
    if( ! $(this).parent().hasClass('active'))
    {
        $(this).stop().animate({ backgroundColor : '#E0E0E5'},200);
    }
},
function()
{
    if( ! $(this).parent().hasClass('active'))
    {
        $(this).stop().animate({ backgroundColor : '#F2F2F2'},200);
    }
});

// Set actions on sub menu
var $subMenu = $mainMenu.children('li').children('ul');
$('a',$subMenu).click(function(e)
{
    e.preventDefault();
});
$subMenu.children('li').click(function(e)
{
    e.preventDefault();
    var $li = $(this);


    var url = '/sherakhan/app/saveViewport.php?offsetTop='+$(document).scrollTop();
    if($map.length > 0)
    {
        url += '&mapLeft='+$map.css('left');
    }

    $('#jsLoad').load(url, function()
    {
        window.location.href = $('a',$li).attr('href');
    });
});

// Sub Menu hovers
$subMenu.children('li').hover(function()
{
    if( ! $(this).hasClass('active_sub') && ! $(this).hasClass('option') && ! $(this).hasClass('close'))
    {
        $(this).stop().animate({ backgroundColor : '#E0E0E5'},200);
    }
},
function()
{
    if( ! $(this).hasClass('active_sub') && ! $(this).hasClass('option') && ! $(this).hasClass('close'))
    {
        $(this).stop().animate({ backgroundColor : '#FFF'},200);
    }
});

// Draggable map
if($map.length > 0)
{
    $map.draggable({
        axis: 'x',
        drag: function( event, ui )
        {
            if (ui.position.left > 0)
            {
                ui.position.left = 0;
            }
            if (ui.position.left < $map.parent().width() - $map.width())
            {
                ui.position.left = $map.parent().width() - $map.width();
            }
        }
    });
}





/*
 *
 *   Functions
 *
 */

// Resize function
function onResize()
{
    // Calculate the width and height from the center column.
    var wSize = { w : window.innerWidth || document.documentElement.clientWidth, h : window.innerHeight || document.documentElement.clientHeight };
    var centerWidth = $body.width() - $left.width() - $right.width();
    $center.width(centerWidth);
    $center.height(wSize.h);

    // Position the footer
    positionFooter();

    // Resize the map
    if($map.length > 0)
    {
        $map.one('load', function(){
            // Map size
            var mRatio = $map.width() / $map.height();
            var pRatio = $map.parent().width() / $map.parent().height();

            if(mRatio > pRatio)
            {
                $map.height($map.parent().height());
                $map.width($map.height() * mRatio);
            }
            else
            {
                $map.width($map.parent().width());
                $map.height($map.width() / mRatio);
            }

            $map.css({ opacity: 1})
        }).each(function() { if(this.complete) $(this).load(); });

        // Map cursor
        if($map.width() > $map.parent().width())
        {
            $map.css({ cursor : 'move' })
        }
        else
        {
            $map.css({ cursor : 'default' })
        }
        // Map position
        if ($map.position().left + $map.width() < $map.parent().width())
        {
            $map.css({ left : ($map.parent().width() - $map.width()) });
        }
    }

    // Home & about image
    $('.center_image').one('load', function(){
        // Map size
        var iRatio = $(this).width() / $(this).height();
        var pRatio = $(this).parent().width() / $(this).parent().height();

        var h, w;
        if(iRatio > pRatio)
        {
            h = $(this).parent().height();
            w = h * iRatio;
            $(this).css({ width: w +'px',height: h +'px',marginLeft : (w / -2)+'px' });
        }
        else
        {
            w = $(this).parent().width();
            h = w / iRatio;
            $(this).css({ width: w +'px',height: h +'px',marginLeft : (w / -2)+'px' });
        }

        $(this).css({ opacity: 1})

    }).each(function() { if(this.complete) $(this).load(); });
}

// Scroll function
function onScroll()
{
    positionFooter();
}

// Set position of the footer
function positionFooter()
{
    var wSize = { w : window.innerWidth || document.documentElement.clientWidth, h : window.innerHeight || document.documentElement.clientHeight };

    // Position footer
    var $last = $('#last');
    if($last.length > 0)
    {
        var bottomOffset = $last.offset().top + $last.outerHeight() + $footer.height() - $(window).scrollTop();
        if(wSize.h > bottomOffset + $footer.height())
        {
            $footer.css({ position:'fixed', bottom: 0, right: 0 });
        }
        else
        {
            $footer.css({ position:'relative'});
        }
    }

}

// Set height of columns
function setColumnHeight()
{
    // Reset height
    $right.height('auto');
    $left.height('auto');

    // Calculate new height
    var h = window.innerHeight || document.documentElement.clientHeight ;
    if($left.height() > h) h = $left.outerHeight();
    if($right.height()+$footer.height() > h) h = $right.outerHeight()+$footer.height();
    $right.height(h);
    $left.height(h);
}

// Open a submenu
function openSubmenu(index,css)
{
    var $li = $mainMenu.children('li').eq(index);
    var $sub = $li.children('ul');

    $sub.css({ display: 'block', height: 0 });
    if(css == null)
    {
        $sub.stop().animate({ height: $sub.attr('data-h')+'px' },400,function()
        {
            setColumnHeight();
        });
    }
    else
    {
        $sub.css({ height: $sub.attr('data-h')+'px' });
        setColumnHeight();
    }
    active = $li.index();
}

// Close a submenu
function closeSubmenu(index)
{
    active = null;

    var $li = $mainMenu.children('li').eq(index);
    var $sub = $li.children('ul');

    $sub.stop().animate({ height: 0 },400,function()
    {
        $sub.css({ display: 'none' });
    });

}