var Page = new Class({
	Implements: [Options, Events, Log],
	
	// Variables
	options: {
		background: '/image/background.jpg'
	},
	name: null,
	element: null,
	tooltip: null,

	// Class instances
	application: null,
	newsletterForm: null,
	loginOverlay: null,
	searchForm: null,
	
	// Afterglow edit
	enableAfterglow: true,
	
	
	initialize: function( name, element , options )
	{
		this.enableLog();
		//this.disableLog();
		this.log("Page::initialize(" + name + ", " + element + ", " + options + ")");

		// Options
		this.setOptions( options );

		// Set variables
		this.name = name;
		this.element = element;
		this.application = new Application();

		/* Login overlay */
		this.loginOverlay = new OverlayLogin();

		this.loginOverlay.addEvent('success', function(data) {
			this.application.setUserData(data);
			this.updateUserStatus(data);
		}.bind(this));


		this.initHeader();
		this.initFooter();
		this.initBackground();
		
		// External links
		this.initTrackExternalLinks();
	},

	initHeader: function()
	{
		this.log("Page::initHeader()");

		if(this.element.getElement('#header .login'))
		{
			this.element.getElement('#header .login').addEvent('click', function(event) {
				event.preventDefault();

				this.loginOverlay.show();
				
				//this.application.trackEvent('account', "login - header", this.application.page.name);
			}.bind(this));
		}

		// Afterglow edit
		if(!this.enableAfterglow)
		{
			this.element.getElement('#header .afterglow a').addEvent('click', function(event) {
				event.preventDefault();
			}.bind(this));

			this.element.getElement('#header .afterglow a').addEvent('mouseenter', function(event) {
				event.preventDefault();

				this.getTooltip();
				this.positionTooltip( this.element.getElement('#header .afterglow a'), {top: 10, left: 50} );

				// Animate
				this.tooltip.fx.start('opacity', 1);
			}.bind(this));

			this.element.getElement('#header .afterglow a').addEvent('mouseleave', function(event) {
				event.preventDefault();

				// Animate
				if(event.relatedTarget != this.tooltip) this.tooltip.fx.start('opacity', 0);
			}.bind(this));
		}
		else
		{
			this.element.getElement('#header .afterglow a').setStyle('cursor', 'pointer');
		}
		

		// Search
		this.searchForm = new SearchForm( $('header').getElement('.nav') );


		// Track events
		// Logo
		this.element.getElements('#header a.logo').addEvent('click',function(event) {
			//this.application.trackEvent('navigation', "logo - header", this.application.page.name);
		}.bind(this));
		
		// Navigation
		this.element.getElements('#header .nav a').each(function(link) {
			link.addEvent('click',function(event) {
				var title = link.get('text');

				// Track event
				//this.application.trackEvent('navigation', title + " - header", this.application.page.name);
			}.bind(this));
			
		}.bind(this));
	},

	initFooter: function()
	{
		this.log("Page::initHeader()");

		var newsletterElement = this.element.getElement('.newsletter');

		this.newsletterForm = new NewsletterForm( newsletterElement );

		if(this.element.getElement('#footer .login'))
		{
			this.element.getElement('#footer .login').addEvent('click', function(event) {
				event.preventDefault();

				this.loginOverlay.show();
				
				//this.application.trackEvent('account', "login - footer", this.application.page.name);
			}.bind(this));
		}

		// Afterglow edit
		if(!this.enableAfterglow)
		{
			this.element.getElement('#footer .afterglow a').addEvent('click', function(event) {
				event.preventDefault();
			}.bind(this));

			this.element.getElement('#footer .afterglow a').addEvent('mouseenter', function(event) {
				event.preventDefault();

				this.getTooltip();
				this.positionTooltip( this.element.getElement('#footer .afterglow a'), {top: 2, left: 80} );

				// Animate
				this.tooltip.fx.start('opacity', 1);
			}.bind(this));

			this.element.getElement('#footer .afterglow a').addEvent('mouseleave', function(event) {
				event.preventDefault();

				// Animate
				if(event.relatedTarget != this.tooltip) this.tooltip.fx.start('opacity', 0);
			}.bind(this));
		}
		else
		{
			this.element.getElement('#footer .afterglow a').setStyle('cursor', 'pointer');
		}
		
		// Track events
		// Logo
		this.element.getElements('#footer a.logo').addEvent('click',function(event) {
			//this.application.trackEvent('navigation', "logo - footer", this.application.page.name);
		}.bind(this));
		
		// Navigation
		this.element.getElements('#footer .nav a').each(function(link) {
			link.addEvent('click',function(event) {
				var title = link.get('text');

				// Track event
				//this.application.trackEvent('navigation', title + " - footer", this.application.page.name);
			}.bind(this));
			
		}.bind(this));
		
		// Contact
		this.element.getElement('#footer a[href^=tel]').addEvent('click',function(event) {
			
			//this.application.trackEvent('contact', "phone - footer", this.application.page.name);
		}.bind(this));
		
		this.element.getElement('#footer a[href^=mailto]').addEvent('click',function(event) {
			
			//this.application.trackEvent('contact', "email - footer", this.application.page.name);
		}.bind(this));
		
		// Social media
		this.element.getElements('#footer .social-media a').each(function(link) {
			link.addEvent('click',function(event) {
				var title = link.get('class');

				// Track event
				//this.application.trackEvent('social media', title + " - footer", this.application.page.name);
			}.bind(this));
		}.bind(this));
		
		// RSS
		this.element.getElements('#footer .rss a').each(function(link) {
			link.addEvent('click',function(event) {
				var title = link.get('text');

				// Track event
				//this.application.trackEvent('rss feed', title + " - footer", this.application.page.name);
			}.bind(this));
		}.bind(this));
		
		// Sponsors
		this.element.getElements('#footer .sponsors a').each(function(link) {
			link.addEvent('click',function(event) {
				var title = link.get('title');

				// Track event
				//this.application.trackEvent('sponsor', title + " - footer", this.application.page.name);
			}.bind(this));
		}.bind(this));
	},

	updateUserStatus: function(data)
	{
		this.log("Page::updateUserStatus(" + data + ")");

		var user = "";
		if(data.firstname) user += data.firstname;
		if(data.infix) user += " " + data.infix;
		if(data.lastname) user += " " + data.lastname;

		// Header
		var headerAccountElement = this.element.getElement('#header .account');

		// Remove login button
		headerAccountElement.getElement('.login').dispose();

		// Add logged in message
		var headerAccountNav = new Element('ul', {'class': 'account-nav'});
		headerAccountNav.adopt( new Element('li', {'html': '<a href="Accountbeheren.aspx" title="Mijn account" class="my-account">Mijn account (<span class="user">' + user + '</span>)</a>', 'class': 'first-child'}) );
		headerAccountNav.adopt( new Element('li', {'html': '<a href="?logout=true" title="Uitloggen">Uitloggen</a>', 'class': 'last-child'}) );
		headerAccountElement.adopt(headerAccountNav);

		// Footer
		var footerAccountElement = this.element.getElement('#footer .account');

		// Remove login button
		footerAccountElement.getElement('.login').dispose();

		// Add logged in message
		var footerLoggedInMessage = new Element('p', {'html': 'Je bent ingelogd als <a href="Accountbeheren.aspx" title="Mijn account" class="user">' + user + '</a>'});
		footerAccountElement.adopt(footerLoggedInMessage);

		var footerAccountNav = new Element('ul', {'class': 'account-nav'});
		footerAccountNav.adopt( new Element('li', {'html': '<a href="?logout=true" title="Uitloggen">Uitloggen</a>', 'class': 'last-child'}) );
		footerAccountElement.adopt(footerAccountNav);
	},

	initBackground: function()
	{
		this.log("Page::initBackground()");

		this.background = $('background');

		var options = {
			minWidth: 1280,
			minHeight: 650,
			primary: 'width',
			injectElement: this.background.getElement('.image')
		};

		this.log("this.options.background: "+ this.options.background);

		new FitImage(this.options.background, options);

//		this.setBackgroundHeight.delay(50, this);
		this.setBackgroundHeight(options.minHeight);
	},

	setBackgroundHeight: function(minBackgroundHeight)
	{
		this.log("Page::setBackgroundHeight(" + minBackgroundHeight + ")");

		var pageHeight = $('website').getSize().y;
		this.log("pageHeight: " + pageHeight);

		var backgroundHeight;
		if(pageHeight < minBackgroundHeight || !minBackgroundHeight)
		{
			backgroundHeight = pageHeight;
		}
		else
		{
			backgroundHeight = minBackgroundHeight;
		}

		this.log("backgroundHeight:" + backgroundHeight);
		this.background.setStyle('height', backgroundHeight);
	},

	initTrackExternalLinks: function()
	{
		this.log("Page::initTrackExternalLinks()");

		$$('a[href^=http]').each(function(link) {
			link.addEvent('click',function() {
				var href = link.get('href');//.replace('http://','');
				var title = link.get('title');

				// Exclude internal absolute links
				if( href.test(this.application.url.get('host')) ) return;

				// Track event
				this.application.trackEvent('link', href + " - " + title, this.application.page.name);
			}.bind(this));
		}.bind(this));
	},

	/*
	 * Get tooltip
	 */
	getTooltip: function()
	{
		this.log("Page::getTooltip()");

		if(!this.tooltip)
		{
			var tooltip = new Element('div', {'class': 'tooltip', 'id': 'tooltip-more-soon'});

			/*
			var pointer = new Element('div', {'class': 'pointer'});
			
			var header = new Element('div', {'class': 'header'});
			var body = new Element('div', {'class': 'body'});
			var footer = new Element('div', {'class': 'footer'});

			body.adopt(new Element('p', {'html': 'Binnenkort meer!'}));

			info.adopt(header);
			info.adopt(body);
			info.adopt(footer);

			tooltip.adopt(pointer);
			*/

			var info = new Element('div', {'class': 'info'});
			tooltip.adopt(info);
			
			this.tooltip = tooltip;

			// Create animation
			this.tooltip.fx = new Fx.Tween(this.tooltip, {
				duration: 250,
				transition: 'linear',
				link: 'cancel',
				onComplete: function()
				{
					if(this.tooltip.getProperty('opacity') == 0)
					{
						this.tooltip.dispose();
					}
				}.bind(this)
			});

			this.tooltip.setStyle('opacity', 0);

			this.tooltip.addEvent('mouseleave', function(event) {
//				this.log("tooltip mouseleave");
//
//				this.log("event.target.get('class'):" + event.target.get('class'));
//				this.log("event.relatedTarget.get('class'):" + event.relatedTarget.get('class'));

				this.tooltip.fx.start('opacity', 0);

				this.tooltip.element.removeClass('hover');

			}.bind(this));

			this.tooltip.addEvent('mouseenter', function(event) {
				this.log("tooltip mouseenter");

				this.log("event.target.get('class'):" + event.target.get('class'));
				this.log("event.relatedTarget.get('class'):" + event.relatedTarget.get('class'));

				//event.stopPropagation();
				//event.preventDefault();

				//this.tooltip.fx.start('opacity', 0);

				this.tooltip.element.addClass('hover');

			}.bind(this));
		}

		// Add to DOM
		this.element.adopt(this.tooltip);

		return this.tooltip;
	},

	/*
	 * Position tooltip
	 */
	positionTooltip: function(element, margin)
	{
		//this.log("Page::positionTooltip(" + element + ")");

		this.tooltip.element = element;

		var moreInfoButtonX = element.getPosition(this.element).x;
		var moreInfoButtonY = element.getPosition(this.element).y;

		var moreInfoButton = element.getCoordinates(this.element);

		//this.log("moreInfoButtonX: " + moreInfoButtonX);
		//this.log("moreInfoButtonY: " + moreInfoButtonY);

		//var tooltipX = moreInfoButton.left - (this.tooltip.getSize().x / 2) + (moreInfoButton.width / 2);
		var tooltipX = moreInfoButton.left - (this.tooltip.getSize().x / 2) + (moreInfoButton.width / 2) + margin.left;
		var tooltipY = moreInfoButton.top - this.tooltip.getSize().y + margin.top;

		this.tooltip.setPosition({x: tooltipX, y: tooltipY});
	}

});