$(function() {

	// Setup scrollers
	var pageScroller = new panelScroller($('#page_panels'), { direction: 'leftright' });
	var pages = [];
	var panelNavigation = new panelScroller($('#panel_navigation'), {easing: 'easeOutCirc'});
	
	// Preload images
	(new Image).src = 'images/global/white_overlay.png';
	(new Image).src = 'images/global/white_overlay_alt.png';
	
	// Queue
	var mainPanelQueue = null;

	// Hide panel navigation
	//$('#panel_navigation').css({bottom: -116+11});

	// Current page panel id
	var initialPanelId = pageScroller.getCurrentPanel().attr('id');
	
	// Load all pages panels - Only get partial pages except for current page
	loadPanels('all_panels.php?current='+initialPanelId+'&partial=true');
	
	// Handle callbacks
	function historyCallback(hash) {
		
		// First
		if (hash == '') {
		
			// Current
			changePage(pageScroller.getCurrentPanel());
			return false;
		
		}
		
		// Change page
		actuallyChangePage(getPanelForHashName(hash));
		return false;
		
	}
	
	function finishedLoading() {
	
		// History
		$.history.init(historyCallback);
			
		// Email Link
		$('.email_link').nospam({ replaceText: true });
		
		// Panel message expanding
		setupMessageExpanding();
	
	}
		
	// Load panels
	function loadPanels(panelsURL) {
	
		// Get panels via AJAX
		getPanelsFromURL(panelsURL, 1, function(panels) {
		
			// Append new panels
			pageScroller.updatePanels(panels);
			
			// Jump to current page
			pageScroller.jumpToPanel($('#'+initialPanelId));
			
			// Process panels
			var currentPanel = pageScroller.getCurrentPanel()[0];
			pageScroller.getPanels().each(function() {
			
				// Set partial panels variable for each panel
				if (this !== currentPanel && 
				    $(this).attr('id') != 'about_panels' &&
				    $(this).attr('id') != 'contact_panels') {
					$(this).data('partial', true);
				}
				
				// Position captions
				$(this).find('.panel').each(function() {
					positionCaption($(this));
				});
				
				// Setup panel scrollers
				if ($(this).attr('id') == 'about_panels' && !(BrowserDetect.browser == "Explorer" && BrowserDetect.version < 7)) {
					pages[$(this).attr('id')] = new panelScroller($(this), { effect: 'scroll', direction: 'updown'});
				} else {
					pages[$(this).attr('id')] = new panelScroller($(this), { effect: 'fade' });
				}
				
				
			});
			
			// Link everything
			linkMainPanels($('#main_nav_home'), $('#home_panels'), 'home_panels.php');
			linkMainPanels($('#main_nav_about'), $('#about_panels'), 'about_panels.php');
			linkMainPanels($('#main_nav_restaurant'), $('#restaurant_panels'), 'restaurant_panels.php');
//			linkMainPanels($('#main_nav_reservations'), $('#reservations_panels'), 'reservations_panels.php');
			linkMainPanels($('#main_nav_catering'), $('#catering_panels'), 'catering_panels.php');
			linkMainPanels($('#main_nav_inn'), $('#inn_panels'), 'inn_panels.php');
			linkMainPanels($('#main_nav_tavern'), $('#tavern_panels'), 'tavern_panels.php');
			linkMainPanels($('#main_nav_events'), $('#events_panels'), 'events_panels.php');
			linkMainPanels($('#main_nav_contact'), $('#contact_panels'), 'contact_panels.php');

			// Link panels with nav items
			$('#main_nav li a').click(function(e) {
				var li = $(e.target).closest('li');
				return changePage(li.data('panel'));
				//$.history.load(li.attr('id').replace('main_nav_', ''));
				//return false;
			});
			
			// Link footer link
			$('#footer p.contact a').click(function(e) {
				return changePage($('#contact_panels'));
			});
				
			// Load all pages navigation
			loadPanelsNavigation('all_panels_navs.php');
			
			// Load google maps
			//loadContactMap();
		
		});
	
	}
	
	// Load panels
	function loadPanelsNavigation(panelsURL) {

		// Get panels via AJAX
		getPanelsFromURL(panelsURL, 1, function(panels) {
		
			// Append new panels
			panelNavigation.updatePanels(panels);
			
			// Link everything
			linkPanelsWithNav($('#home_panels'), $('#home_nav'));
			linkPanelsWithNav($('#about_panels'), $('#about_nav'));
			linkPanelsWithNav($('#restaurant_panels'), $('#restaurant_nav'));
			linkPanelsWithNav($('#reservations_panels'), $('#reservations_nav'));
			linkPanelsWithNav($('#catering_panels'), $('#catering_nav'));
			linkPanelsWithNav($('#inn_panels'), $('#inn_nav'));
			linkPanelsWithNav($('#tavern_panels'), $('#tavern_nav'));
			linkPanelsWithNav($('#events_panels'), $('#events_nav'));
			linkPanelsWithNav($('#contact_panels'), $('#contact_nav'));
			
			// Jump to current page
			panelNavigation.jumpToPanel($('#'+initialPanelId).data('panelnav'));
			
			// Select current
			//selectNavItem();
			
			// Tooltips
//			if (!(BrowserDetect.browser == "Explorer" && BrowserDetect.version < 7)) {
				$('#panel_navigation li a.border').hover(function() {
				
					// Get info
					var li = $(this).closest('li');
					var image = li.find('img').eq(0);
					var text = image.attr('alt');
					var tooltip = $('#panel_nav_tooltip');
					if (text && text != '') {
					
						// Show tooltip
						tooltip.text(text);
						tooltip.css({left: (li.position().left + (li.outerWidth() - tooltip.width()) / 2)});
						tooltip.show();
					
					}
				
				}, function() { $('#panel_nav_tooltip').hide(); });
//			}
			
			// Finished
			finishedLoading();
			
/*
			// Hide
			$('#nav_and_page').mouseenter(function() {
				$('#panel_navigation').stop(true, true);
				$('#panel_navigation').animate({bottom: 0}, 800, 'easeOutExpo');
			});
			$('#nav_and_page').mouseleave(function() {
				$('#panel_navigation').stop(true, true);
				$('#panel_navigation').animate({bottom: -116+11}, 800, 'easeOutExpo');
			});
*/
		
		});
	
	}
	
	// Link nav item, panels and url
	function linkMainPanels(mainnav, panel, url) {
		mainnav.data('panel', panel);
		mainnav.data('url', url);
		panel.data('mainnav', mainnav);
		panel.data('url', url);
	}
	
	// Link panels with the navigation
	function linkPanelsWithNav(panel, panelnav) {
	
		// Link panel with nav
		panel.data('panelnav', panelnav);
		panelnav.data('panel', panel);

		// Loop through each panel and link with panel nav items
		if (!panel.data('partial')) {

			// Go through each nav item
			panelnav.find('li a').each(function () {

				// Link
				var link = $(this);
				var href = link.attr('href');
				var li = link.closest('li');
				var cur = $(href.substring(href.indexOf('#'), href.length));
				cur.data('nav', li);
				li.data('panel', cur);

				// Click events
				link.click(function() {
//					alert('The link is ' + link.attr('href'));
					if(link.attr('href') == "#inn_panel_01") {
					window.open('http://www.webervations.com/magic-scripts/resbook.asp?memberid=TempHse', '_blank');
					}
				else {
					selectPanel($(this).closest('li').data('panel'));
					return false;
					}
				});
				
			});
			
			// Prev/Next buttons
			if (panelnav.attr('id') == "about_nav") {
				panelnav.find('#panel_nav_show_about').click(function() { selectNextPanel(); return false; });
				panelnav.find('#panel_nav_hide_about').click(function() { selectPreviousPanel(); return false; });
				panelnav.find('#panel_nav_next').click(function() { showNextPage(); return false; });
			} else {
				panelnav.find('#panel_nav_prev').click(function() { selectPreviousPanel(); return false; });
				panelnav.find('#panel_nav_next').click(function() { selectNextPanel(); return false; });			
			}
		
		}
		
	}
	
	// Select panel
	function selectPanel(value) {

		// Get current panel scroller
		var currentPanel = pageScroller.getCurrentPanel();
		var scroller = pages[currentPanel.attr('id')];
		scroller.showPanel(value);
		
		// Hide message detail
		hideMessageDetail(value);
		
		// Select nav item
		selectNavItem();
		
	}
	
	// Select previous panel
	function selectPreviousPanel() {
	
		// Get current panel scroller
		var currentPanel = pageScroller.getCurrentPanel();
		var scroller = pages[currentPanel.attr('id')];
		
		// If it is first panel then change page
		if (scroller.isFirstPanel()) {
			showPreviousPage();
		} else {
			scroller.showPreviousPanel();
			selectNavItem();		
		}
		
		// Hide message detail
		hideMessageDetail(scroller.getCurrentPanel());
		
	}
	
	// Select next panel
	function selectNextPanel() {
	
		// Get current panel scroller
		var currentPanel = pageScroller.getCurrentPanel();
		var scroller = pages[currentPanel.attr('id')];
		
		// If it is last panel then change page
		if (scroller.isLastPanel()) {
			showNextPage();
		} else {
			scroller.showNextPanel();
			selectNavItem();		
		}
		
		// Hide message detail
		hideMessageDetail(scroller.getCurrentPanel());
		
	}
	
	function hideMessageDetail(value) {
		var message = value.find('.message');
		if (!(BrowserDetect.browser == "Explorer" && BrowserDetect.version < 7)) {
			var appear = message.find('.appear');
			if (appear.length == 1) {
				//var h2 = message.find('h2');
				//h2.width(h2.innerWidth());
				message.addClass("message_appear");
				appear.hide();
			}
		}
	}
	
	// Select correct nav item
	function selectNavItem() {
	
		// Select
		var currentPanel = pageScroller.getCurrentPanel();
		var scroller = pages[currentPanel.attr('id')];
		currentPanel.data('panelnav').find('li').removeClass('selected');
		var nav = scroller.getCurrentPanel().data('nav');
		if (nav) nav.addClass('selected');
		//positionCaption(scroller.getCurrentPanel());		

	}
	
	// Position caption
	function positionCaption(panel) {
		var caption = panel.find('.caption');
		//caption.css({left: parseInt(($('#page_panels').width() - caption.outerWidth()) / 2)});
		
	}
	
	// Next page
	function showNextPage() {
		changePage(pageScroller.getCurrentPanel().next());
	}
	
	// previous page
	function showPreviousPage() {
		changePage(pageScroller.getCurrentPanel().prev());
	}
	
	// Change page
	function changePage(panel) {
	
		// Validate
		if (panel.length != 1) return false;
		
		// History
		$.history.load(getHashNameForPanel(panel));
		
		// Finish
		return false;
	
	}
	
	function getHashNameForPanel(panel) {
		var name = panel.data('mainnav').attr('id').replace('main_nav_', '');
		if (name == 'about') name = 'welcome';
		return name;
	}
	
	function getPanelForHashName(name) {
		if (name == 'welcome') name = 'about';
		var li = $('#main_nav_'+name);
		return li.data('panel');
	}
	
	function actuallyChangePage(panel) {
		
		// Page Title
		var name = getHashNameForPanel(panel);
		var title;
		switch (name) {
			case 'welcome': title = 'Home'; break;
			case 'about': title = 'About'; break;
			case 'home': title = 'About'; break;
			case 'restaurant': title = 'Restaurant'; break;
			case 'inn': title = 'Inn'; break;
			case 'tavern': title = 'Tavern'; break;
			case 'catering': title = 'Catering'; break;
			case 'reservations': title = 'Reservations'; break;
			case 'events': title = 'Events'; break;
			case 'contact': title = 'Contact'; break;
		}
		document.title = 'The Temperance House - '+title+' - Newtown, PA';
	
		// Add to queue
		mainPanelQueue = panel;

		// Select navigation item
		$('#main_nav li').removeClass('selected');
		panel.data('mainnav').addClass('selected');

		// Check if panel is fully loaded
		if (panel.data('partial') == true) {
		
			// Loading
			showLoading(true);
		
			// Get panel via AJAX
			getPanelsFromURL(panel.data('url'), 2, function(panels) {

//setTimeout(function() {

				// Get panel id
				var id = panel.attr('id');
			
				// Replace panel with full panel
				pages[id].updatePanels(panels);
				panel.data('partial', false);
				
				// Link with nav
				linkPanelsWithNav(panel, panel.data('panelnav'));
				
				// Show
				scrollToPage(panel);
				
//}, 2000);
			
			});
		
		} else {
				
			// Show
			scrollToPage(panel);
		
		}
		
		// If about then swap about buttons
		$('#panel_nav_show_about').show(); 
		$('#panel_nav_hide_about').hide();
			
		// Return
		return false;
	
	}
	
	// Scroll to page
	function scrollToPage(panel) {
		
		// Check queue
		if (mainPanelQueue !== panel) return;
	
		// Show
		if (!panel.data('partial')) {
	
			// Loading
			showLoading(false);
		
			// Size of nav
			if (panel.data('panelnav').hasClass('empty_panel')) {
				$('#panel_navigation_wrapper').stop().animate({height: 0}, {duration: 1200, easing: 'easeOutQuint'});
			} else {
				$('#panel_navigation_wrapper').stop().animate({height: 100}, {duration: 1200, easing: 'easeOutQuint'});
			}

			// Show first image
			var scroller = pages[panel.attr('id')];
			panel.data('panelnav').find('li').removeClass('selected');
			if (panel === pageScroller.getCurrentPanel()) {
				scroller.showPanel();
			} else {
				scroller.jumpToPanel();
			}

			// Show
			pageScroller.showPanel(panel);
			panelNavigation.showPanel(panel.data('panelnav'));
		
		}
	
	}
	
	// Loading
	function showLoading(loading) {
		if (loading) {
			$('#loading').stop().fadeIn(200);//.animate({opacity: 0.999}, {duration: 200, easing: 'easeOutSine'});
		} else {
			$('#loading').hide().fadeOut(200);//.animate({opacity: 0}, {duration: 200, easing: 'easeOutSine'});
		}
	}
	
	// Get panels from url and call back function with panels
	function getPanelsFromURL(panelsURL, depth, callback) {
	
		// Load panels
		jQuery.ajaxSync({ url: panelsURL,
			success: function(html) {
			
				// Get all panels
				var panels;
				if (depth == 1)
					panels = $(html).filter('.panel');
				else if (depth == 2)
					panels = $(html).find('.panel');
				
				// Callback and supply panels
				callback(panels);
				
			}
		});
	
	}
	
	function setupMessageExpanding() {
	
		// Message expanding
		if (!(BrowserDetect.browser == "Explorer" && BrowserDetect.version < 7)) {
			$('#page_panels').hover(
			
				// Over
				function() {
					var message = pages[pageScroller.getCurrentPanel().attr('id')].getCurrentPanel().find('.message');
					var appear = message.find('.appear');
					appear.width(message.innerWidth() - message.find('h2').width() - 50);
					if (appear.length == 1) {
						//message.find('h2 span').slideUp();
						//if (BrowserDetect.browser == "Explorer" && BrowserDetect.version == 7) {
						//	appear.show(); // IE7 is so f*ing sh*t
						//} else {
							message.removeClass("message_appear");
							appear.slideDown();
						//}
					}
				},
				
				// Out
				function() {
					var message = pages[pageScroller.getCurrentPanel().attr('id')].getCurrentPanel().find('.message');
					var appear = message.find('.appear');
					if (appear.length == 1) {
						//message.find('h2 span').slideDown();
						//if (BrowserDetect.browser == "Explorer" && BrowserDetect.version == 7) {
						//	appear.hide(); // IE7 is so f*ing sh*t
						//} else {
							message.addClass("message_appear");
							appear.slideUp();
						//}
					}
				}
			
			);
			
		}
	
	}

});

// Handles a panel scroller
function panelScroller(scrollerElement, opts) {

	/* Constructor
	-------------- */
	
	// Default options
	var defaults = {
		duration: 1200,
		easing: 'easeOutQuint',
		effect: 'scroll',
		direction: 'leftright'
	};
	
	// Set options
	var options = jQuery.extend(defaults, opts);
	
	// Variables	
	var scroller = scrollerElement;
	if (scroller.length != 1) return null; // Validate
	var panels;
	var wrapper = null; // Panel wrapper
	var current = null; // Current panel

	// Initialise
	initialise();
	
	/* Private Methods
	------------------ */
	
	// Initialise scroller
	function initialise() {
	
		// Wrap panels in container and stretch to hold
		// all panels
		if (options.effect == 'scroll') wrap();
		update();
		
	}
	
	// Wrap panels
	function wrap() {
		wrapper = $('<div class="panel_wrap"></div>');
		scroller.wrapInner(wrapper);
		wrapper = scroller.children('.panel_wrap');
		wrapper.css({position: 'relative'});
	}
	
	// Update if panels are added or removed
	function update() {
		
		// Update
		if (options.effect == 'scroll') {
			panels = scroller.find('.panel_wrap > .panel');
		} else if (options.effect == 'fade') {
			panels = scroller.children('.panel');	
		}
		
		// Process
		if (options.effect == 'scroll') {
		
			// Width of wrapper
			var width = scroller.width();
			var height = scroller.height();
			var panelStyle = {position: 'absolute',
							 width: width,
							 height: height};
			
			// Direction
			if (options.direction == 'leftright') {
			
				// Set wrapper width and style
				wrapper.width(width * panels.length).height(scroller.height());
				panelStyle.float = 'left';
				panelStyle.top = 0;
				panels.each(function(i) {
					panelStyle.left = i*width;
					$(this).css(panelStyle);
				});				
			
			} else {
			
				// Style every panel
				panelStyle.left = 0;
				panels.each(function(i) {
					panelStyle.top = i*height;
					$(this).css(panelStyle);
				});	
			
			}
			
		} else {
		
			// Position ontop of each other
			panels.css({position: 'absolute', top: 0, left: 0});
			
		}
		
		// Update current
		if (!current || !current.inDOM()) {
		
			// Jump to make sure 1st is showing
			if (options.direction == 'leftright') scroller[0].scrollLeft = 0; 
			else scroller[0].scrollTop = 0;
			current = panels.eq(0);
			
		}
		
		// Hide others
		if (options.effect == 'fade') {
			current.siblings().hide();
		}
		
	}
	
	// Get a panel from a value (id, index or jquery object
	function getPanelFromValue(value) {
	
		// Default to first
		var panel = panels.eq(0);
		
		// Check if it is an arguments array being passed
		if (value.length == 1) value = value[0];

		// Sort out
		if (jQuery.getType(value) == "string") {
			panel = panels.filter(value);
		} else if (jQuery.getType(value) == "number") {	
			panel = panels.eq(value);
		} else if (jQuery.getType(value) == "object" && value instanceof jQuery) {	
			panel = value;
		}
		
		// Return
		return panel;
	}
	
	/* Public Methods
	------------------ */
	
	// Show panel given index or id
	this.showPanel = function() {

		// Get panel to show
		var panel = getPanelFromValue(arguments);
		if (panel.length != 1) return;
		if (panel[0] == current[0]) return;
		
		// Show
		if (options.effect == 'scroll') {
		
			// Update current
			current = panel;
			
			// Animate
			scroller.stop();
			if (options.direction == 'leftright') {
				scroller.animate({scrollLeft: panel.position().left}, 
							 options.duration, options.easing);
			} else {
				scroller.animate({scrollTop: panel.position().top}, 
							 options.duration, options.easing);
			}
						 
		} else if (options.effect == 'fade') {
		
			current.fadeOut(400);
			current = panel;
			panel.fadeIn(400);
				
		}
	
	};
	
	// Jump to panel without animation
	this.jumpToPanel = function() {

		// Get panel
		var panel = getPanelFromValue(arguments);
		if (panel.length != 1) return;
		if (panel[0] == current[0]) return;

		// Show
		if (options.effect == 'scroll') {
			current = panel;
			if (options.direction == 'leftright') {
				scroller.get(0).scrollLeft = panel.position().left;
			} else {
				scroller.get(0).scrollTop = panel.position().top;
			}
		} else if (options.effect == 'fade') {
			current.hide();
			current = panel;
			panel.show();
		}

	};
	
	// Show the next panel
	this.showNextPanel = function() {
		this.showPanel(current.next('.panel'));
	};
	
	// Show the previous panel
	this.showPreviousPanel = function() {
		this.showPanel(current.prev('.panel'));
	};
	
	// Update panels (jquery object passed)
	this.updatePanels = function(panels) {
		if (wrapper) {
			wrapper.empty().append(panels);
		} else {
			scroller.empty().append(panels);
		}
		update();
		this.jumpToPanel(current);
	};
	
	// Retreive panel
	this.get = function(index) {
		return panels.eq(index);
	};
	
	// Get all panels
	this.getPanels = function() {
		return panels;
	};

	// Current panel
	this.getCurrentPanel = function() {
		return current;
	};
	
	// Is first panel
	this.isFirstPanel = function() {
		return scroller.find('.panel')[0] === current[0];
	};
	
	// Is first panel
	this.isLastPanel = function() {
		return scroller.find('.panel:last')[0] === current[0];
	};

}