/// <reference path='~/jQuery/jQuery-vsdoc.js' />
var _mp = {}

$(function()
{
	$.extend($.fn.jScrollPane.defaults,
		{ dragMinHeight: 30,
			dragMaxHeight: 30
		});
})

_mp.FadeIn = function(event) {
	$(event.target).animate({ opacity: 0 }, 100)
}
_mp.FadeOut = function(event) {
	$(event.target).animate({ opacity: 1 }, 100)
}

// On Load. Show the services page. When the mouse moves over the HotSpot, show the main page
_mp.OnLoad = function() {
	// Footer area
	_mp.Footer = {}
	_mp.Footer.Div = $('div#footer')
	_mp.Footer.height = 130
	_mp.Footer.visible = true

	// Frame
	_mp.Frame = {}
	_mp.Frame.Div = $('#frame')
	_mp.Frame.width = 800
	_mp.Frame.height = 540
	_mp.Frame.padding = 25
	_mp.Frame.padding2 = _mp.Frame.padding * 2
	_mp.Frame.innerHeight = _mp.Frame.height - _mp.Footer.height - _mp.Frame.padding2

	// Logo/Menu area
	_mp.LogoMenu = {}
	_mp.LogoMenu.overlap = 11
	_mp.LogoMenu.padding = 4
	_mp.logo = $('.logo')
	_mp.logoClear = $('.logoClear')
	_mp.menuSel = $('.menu.sel')
	_mp.menuTop = $('.menu.top')

	// Prev, Next and numbers
	_mp.PrevNextNumOverlap = 5
	
	// Hot Spot
	_mp.hotSpot = {}
	_mp.hotSpot.Margin = 13
	_mp.hotSpot.Div = $('#hotSpot')
	_mp.hotSpot.Div.mouseout(function(event) { if (_mp.NotInHotSpot(event)) _mp.SetMenuHide() })
	$('#hotTop, #hotLeft, #hotRight, #hotBottom').mousemove(_mp.SetMenuHide)
	
	// Image area
	_mp.Images = {}
	_mp.Images.Div = $('div#images').mousemove(_mp.SetMenuHide)

	// Thumb area
	_mp.Thumbs = {}
	_mp.Thumbs.paddingLeft = 6	
	_mp.Thumbs.Div = $('div#thumbs').mousemove(_mp.SetMenuHide)
	_mp.Thumbs.Scroll = $('div#thumbs div.scroll-pane').mousemove(_mp.SetMenuHide)

	// Services
	_mp.services = {}
	_mp.services.Padding = 2
	_mp.services.Set = $('.services')

	// Contact Info
	_mp.contact = $('#contactInfo')
	
	// Fade selectable items
	_mp.menuTop.bind('mouseover', _mp.FadeIn)
						 .bind('mouseout', _mp.FadeOut)

	// Calculate the width of the menu and/or Logo
	_mp.LogoMenu.width = _mp.logo.width()
	_mp.menuTop.each( function() {
			var width = $(this).width()
			if (_mp.LogoMenu.width < width)
				_mp.LogoMenu.width = width
	})

	_mp.LogoMenu.space = _mp.LogoMenu.padding + _mp.menuSel.height()
	_mp.SetPositions()
	_mp.SetMenuServices();
	setTimeout(function() {	_aup.OnLoad()	// About us Page
													_cal.OnLoad()	// Client Access Login
													_cap.OnLoad()	// Client Access Page
													_cip.OnLoad()	// Contact Information Page
													_bsp.OnLoad()	// Behind Scene Page
													_cep.OnLoad()	// Client Examples Page
													ImageSet.prototype.OnLoad()
												}, 1)
}

// Assign positions for the areas of all pages
_mp.SetPositions = function() {
	_mp.PositionFrameAndFooter()

	// Position the Logo and Hot Spot to just overlap the footer
	_mp.LogoMenu.menuTop = _mp.Frame.height - _mp.Footer.height + _mp.LogoMenu.overlap
	var height = _mp.Footer.height + _mp.logo.height() - _mp.LogoMenu.overlap
	_mp.LogoMenu.logoTop = _mp.Frame.height - height
	_mp.LogoMenu.left = _mp.Frame.padding
	_mp.LogoMenu.right = _mp.LogoMenu.left + _mp.LogoMenu.width
	_mp.logo.one('mouseover', _mp.SetMenuShow)
					.add(_mp.logoClear)
					.css({ top: _mp.LogoMenu.logoTop + 'px',
								 left: _mp.LogoMenu.left + 'px' })
	_mp.menuLeft = _mp.Frame.padding + 3

	// Set position for the Image Div
	_mp.Images.top = _mp.Frame.padding
	_mp.Images.left = _mp.Frame.padding
	_mp.Images.width = _mp.Frame.width - _mp.Frame.padding2
	_mp.Images.centre = _mp.Frame.left + _mp.Images.left + Math.floor(_mp.Images.width / 2)
	_mp.Images.height = _mp.Footer.top - _mp.Frame.top - _mp.Frame.padding2
	_mp.Images.Div.css({top: _mp.Images.top + 'px',
											left: _mp.Images.left + 'px',
											width: _mp.Images.width,
											height: _mp.Images.height
										})
									 
	// Position the HotSpot Div
	var m = _mp.hotSpot.Margin
	var m2 = m * 2
	var m20 = m * 20
	_mp.hotSpot.top = _mp.Images.top + _mp.Images.height + 1
	_mp.hotSpot.left = _mp.menuLeft - m
	_mp.hotSpot.width = _mp.LogoMenu.width + m2
	_mp.hotSpot.height = _mp.Frame.height - _mp.hotSpot.top - m
	_mp.PositionHopSpot(_mp.hotSpot.Div, _mp.hotSpot.top, _mp.hotSpot.left, _mp.hotSpot.width, _mp.hotSpot.height)
	_mp.PositionHopSpot($('#hotTop'), _mp.hotSpot.top - m20, 0, _mp.hotSpot.width + m20, m20)
	_mp.PositionHopSpot($('#hotLeft'), _mp.hotSpot.top, 0, m, _mp.hotSpot.height)
	_mp.PositionHopSpot($('#hotRight'), _mp.hotSpot.top, _mp.hotSpot.left + _mp.hotSpot.width, m, _mp.hotSpot.height)
	_mp.PositionHopSpot($('#hotBottom'), _mp.hotSpot.top + _mp.hotSpot.height, _mp.hotSpot.left - m, _mp.hotSpot.width + m2, m)

	// Position the Services
	var top = _mp.LogoMenu.menuTop
	_mp.services.Set.each(function() {
											var height = $(this).css({ opacity: 1, top: top + 'px', left: _mp.menuLeft + 'px' })
																					.height()
											top += _mp.services.Padding + height
	})

	// Position the Contact Info
	_mp.contact.css({ top:_mp.LogoMenu.menuTop + 'px', left:_mp.menuLeft + 'px' })
}

_mp.PositionHopSpot = function(div, top, left, width, height)
{
	div.css({ top: top + 'px',
						left: left + 'px',
						width: width,
						height: height })
}

_mp.PositionFrameAndFooter = function() {
	var width = $(window).width()
	var height = $(window).height()
	
	// Position the Frame
	_mp.Frame.left = _mp.Frame.width < width ? Math.floor((width - _mp.Frame.width) / 2) : 0
	_mp.Frame.right = _mp.Frame.left + _mp.Frame.width
	_mp.Frame.top = _mp.Frame.height < height ? Math.floor((height - _mp.Frame.height) / 2) : 0
	_mp.Frame.Div.css({opacity : 1.0,
										 left : _mp.Frame.left + 'px',
										 top : _mp.Frame.top + 'px',
										 width : _mp.Frame.width,
										 height : _mp.Frame.height
									 })

	// Position the Footer
	_mp.Footer.top = _mp.Frame.top + _mp.Frame.height - _mp.Footer.height + 2
	_mp.Footer.width = width
	if (_mp.Footer.visible)
		_mp.Footer.Div.css({	opacity : 1.0,
													top : _mp.Footer.top + 'px',
													left : '0px',
													width : $(window).width(),
													height : _mp.Footer.height
												})
}

/* Menu
	_mp.menuShow = true/false					Show/Hide
	_mp.menuSub = 'S', 'C', null			Services/Contact - revealed when the menu is hidden
	_mp.menuAreaBusy = true, false		true = Menu/Services/Contact comming or going
 */
_mp.menuShow = false;
_mp.menuSub = null;
_mp.SetMenuShow			= function() {
																$('#debug0').text(_mp.debugCount++ + ' SetMenuShow')
															 _mp.SetMenu(true)
  }
_mp.SetMenuHide			= function() {
																$('#debug0').text(_mp.debugCount++ + ' SetMenuHide')
															 _mp.SetMenu(false)
  }
_mp.SetMenuServices	= function() { _mp.SetMenuSub('S') }
_mp.SetMenuContact	= function() { _mp.SetMenuSub('C') }
_mp.SetMenuEmpty		= function() { _mp.menuSub = _mp.menuSubRequired = null }

_mp.debugCount = 0
_mp.SetMenu = function(show)
{
	_mp.menuShowRequired = show
	if (_mp.menuShow == _mp.menuShowRequired)
		return
	$('#debug1').text(_mp.debugCount++ + ' Menu= ' + _mp.menuShow + ' => ' + _mp.menuShowRequired)
		
	// The menu is not in the required state. Call the timer to do the update.
	if ( ! _mp.timerRunning)
		_mp.OnTimer()
}

_mp.SetMenuSub = function(newState)
{
	_mp.menuSubRequired = newState
	if (_mp.menuSub == _mp.menuSubRequired)
		return
	_mp.SetMenuHide()
	$('#debug2').text(_mp.debugCount++ + ' Sub=' + _mp.menuSub + ' => ' + _mp.menuSubRequired)
	
	if ( ! _mp.timerRunning)
		_mp.OnTimer()
}

_mp.SetMenuIdle = function()
{
	_mp.menuAreaBusy = false
	_mp.OnTimer()
}

// Show/hide the menu/services/contact
_mp.OnTimer = function()
{
	$('#debug3').text(_mp.debugCount++ + ' Busy=' + _mp.menuAreaBusy)
	if (_mp.menuAreaBusy)
	{
		_mp.timerRunning = true
		setTimeout(_mp.OnTimer, 2000)
		return
	}
	_mp.timerRunning = false

	if (_mp.menuShow != _mp.menuShowRequired)
	{
		_mp.menuAreaBusy = true
		if (_mp.menuShowRequired)
		{
			// If another list is showing, hide it, then start revealing the menu 
			switch (_mp.menuSub)
			{
				case 'S': _mp.HideList(_mp.services.Set, _mp.services.Set.length, function() { setTimeout(_mp.BeginRevealMenu, 900) });	break
				case 'C': _cip.HideRows(_cip.TableRows.length, function() { setTimeout(_mp.BeginRevealMenu, 900) });										break
				default:	_mp.BeginRevealMenu()
			}
		}
		else
		{
			_mp.BeginHideMenu()
			_mp.menuSub = null
		}
		_mp.menuShow = _mp.menuShowRequired
		return
	}
	if (! _mp.menuShow && _mp.menuSub != _mp.menuSubRequired)
	{
		_mp.menuAreaBusy = true
		_mp.menuSub = _mp.menuSubRequired
		switch (_mp.menuSubRequired)
		{
			case 'S': _mp.ShowLogoServices(); break
			case 'C': _mp.ShowContact();			break
		}
	}
}
	
// Fade in the Logo and services
_mp.ShowLogoServices = function()
{
	_mp.logo.css({ top: _mp.LogoMenu.logoTop + 'px' })
					.add(_mp.Footer.Div)
					.add(_mp.services.Set)
					.css({ opacity: 1 })
				  .animate({ opacity: 'show' }, { duration: 1900, queue: true, complete: _mp.SetMenuIdle })
}

// Hide any services and/or contact info before revealing the Menu
_mp.BeginRevealMenu = function()
{
	$('.aboutUs').bind('click', _mp.clickAboutUs)
	$('.behindScene').bind('click', _mp.clickBehindScene)
	$('.clientList').bind('click', _mp.clickClientList)
	$('.clientArea').bind('click', _mp.clickClientArea)
	$('.contactInfo').bind('click', _mp.clickContact)
	_mp.Images.Div.show()
	_mp.RevealMenuItems(0, _mp.menuLeft, _mp.LogoMenu.menuTop, _mp.menuSel, _mp.menuTop)
}

// Reveal Menu Items
// The top of both Top/Sel is modified, but Sel is animated after Top so we dont see the colours
_mp.RevealMenuItems = function(idx, left, top, menuSel, menuTop)
{
	if (idx != menuSel.length)
	{
		$(menuTop[idx]).add(menuSel[idx])
									 .stop()
									 .css({ opacity: 1, top: top + 'px', left: left + 'px' })
									 .end()
									 .animate({ opacity: 'show' }, { duration: 300, queue: true })
		$(menuSel[idx]).animate({ opacity: 'show' }, { duration: 300, queue: true })
		top += _mp.LogoMenu.space
		setTimeout(function() { _mp.RevealMenuItems(idx + 1, left, top, menuSel, menuTop) }, 100)
	}
	else
		setTimeout(_mp.SetMenuIdle, 900)
}

// Hide the menu
_mp.HideMenu = function(idx)
{
	if (--idx >= 0)
	{
		$(_mp.menuSel[idx]).hide()
		$(_mp.menuTop[idx]).stop()
											 .animate({ opacity: 'hide' }, { duration: 300, queue: true })
		setTimeout(function() { _mp.HideMenu(idx) }, 100)
	}
	else
	{
		// Enable the 'menu triger' when we are sure the menu is hidden
		setTimeout(function() { _mp.logo.one('mouseover', _mp.SetMenuShow)
														_mp.SetMenuIdle()
													}, 900)
	}
}

// Cause the menu to be hidden, which in turn can cause the services or contact info to be revealed
_mp.BeginHideMenu = function()
{
	$('.aboutUs').unbind('click')
	$('.behindScene').unbind('click')
	$('.clientList').unbind('click')
	$('.clientArea').unbind('click')
	$('.contactInfo').unbind('click')
	_mp.HideMenu(_mp.menuSel.length)
}

// Keeps track of what is in the main area
_mp.NewCurrentPage = function(page)
{
	if (_mp.SelectedMenu)
		_mp.SelectedMenu.css({ zIndex: 0 });
	if (_mp.HideCurrentPage)
		_mp.HideCurrentPage()
	_mp.HideCurrentPage = page
}

// Return true if the mouse is outside of the Hot Spot area
_mp.NotInHotSpot = function(event) {
	var y = event.pageY - _mp.Frame.top - _mp.hotSpot.top
	if (0 >= y || y >= _mp.hotSpot.height)
		return true
	var x = event.pageX - _mp.Frame.left - _mp.hotSpot.left
	if (0 >= x || x >= _mp.hotSpot.width)
		return true
	return false
}

_mp.ShowList = function(list, idx, func)
{
	if (idx == list.length)
	{
		if (func)
			func()
		return
	}
	$(list[idx]).stop()
							.css({ opacity: 1 })
							.animate({ opacity: 'show' }, { duration: 200, queue: true })		
	setTimeout(function() { _mp.ShowList(list, idx + 1, func) }, 30)
}

_mp.HideList = function(list, idx, func)
{
	if (--idx < 0)
	{
		if (func)
			func()
		return
	}

	$(list[idx]).stop()
							.animate({ opacity: 'hide' }, { duration: 200, queue: true })		
	setTimeout(function() { _mp.HideList(list, idx, func) }, 30)
}

_mp.clickAboutUs = function() {
	_mp.SetMenuEmpty()
	_mp.NewCurrentPage(_aup.HidePage)
	_mp.SelectedMenu = _aup.DrawPage()
	_mp.SelectedMenu.css({ zIndex: 2 })
}

_mp.clickBehindScene = function() {
	_mp.SetMenuEmpty()
	_mp.NewCurrentPage(_bsp.HidePage)
	_mp.SelectedMenu = _bsp.DrawPage()
	_mp.SelectedMenu.css({ zIndex: 2 })
}

_mp.clickClientList = function() {
	_mp.SetMenuEmpty()
	_mp.NewCurrentPage(_cep.HidePage)
	_mp.SelectedMenu = _cep.DrawPage()
	_mp.SelectedMenu.css({ zIndex: 2 })
}

_mp.clickClientArea = function() {
	_mp.SetMenuEmpty()
	_mp.NewCurrentPage(_cal.HidePage)
	_mp.SelectedMenu = _cal.DrawPage()
	_mp.SelectedMenu.css({ zIndex: 2 })
}

_mp.clickContact = function() {
	_mp.SetMenuContact()
	_mp.NewCurrentPage(null)
}

_mp.ShowContact = function() {
	_mp.SelectedMenu = _cip.DrawPage( _mp.SetMenuIdle )
	_mp.SelectedMenu.css({ zIndex: 2 })
}

_mp.SwitchLogoFooter = function(top, func)
{
	if (top != 0)
	{	// Show the Client Menu
		_mp.SetMenuHide()
		_mp.Images.Div.hide()
		_mp.logoClear.css({ opacity: 1 }).show()
		_mp.logo.hide()
		_mp.logoClear.animate({ top: top + 'px' },
												  { duration: 1000, easing: 'swing', complete: func })
		var top = _mp.Footer.top + _mp.Footer.height
		_mp.Footer.Div.animate({ top: top + 'px',
														 height: 0 }, { duration: 1000 })
		_mp.Footer.visible = false
	}
	else
	{	// Restore the main menu
		_mp.logoClear.animate({ top: _mp.LogoMenu.logoTop + 'px' },
													{ duration: 1000, easing: 'swing', complete: function()
													{
														_mp.logo.show()
																				.one('mouseover', _mp.SetMenuShow)
														_mp.logoClear.hide()
														_mp.SetMenuServices()
													}
													})
		_mp.Images.Div.css({top: _mp.Images.top + 'px',
												left: _mp.Images.left + 'px',
												width: _mp.Images.width,
												height: _mp.Images.height
											})
		_mp.Footer.Div.animate({ top: _mp.Footer.top + 'px',
														 width : _mp.Footer.width,
														 height: _mp.Footer.height }, { duration: 1000 })
		_mp.Footer.visible = true
	}
}