var PageEngine = Class.create({
	
	initialize: function(location){
		this.timesRight = 1;
		if( !(typeof(location) == 'object' && location.length > 1) ){
			return;
		}
		
		if (window.location && window.location.hash){
			var matches = window.location.hash.match(/#\/(.*)/);
			if (matches.length > 1){
				location = matches[1].split('-')
			}
			//console.debug('hash found', window.location.hash);
		}
		
		this.pageWidth = 910;
		
		Event.observe(window, 'load', function(e){

			this.bindLinks();
			$$('#main-content .content').invoke('hide');
			$$('#main-content .content-container').invoke('hide');
$('main-content').setStyle({visibility: 'visible'});			
			this.location = location;
			this.setLocation(location);
			//preload images
			
		}.bind(this));
		this.currentPage = 0;
		
	},
	bindLinks: function(){
		$$('#main-menu li a').each(this.bindLink.bind(this));
		$$('.main-tabs li a').each(this.bindLink.bind(this));
		//bind demo links
		var demoLinks = $$('div.demo a');
		demoLinks.each(this.bindLink.bind(this));

		var demoLinks2 = $$('div#demo_new a');
		demoLinks2.each(this.bindLink.bind(this));





		var demoLinks3 = $$('div#demo_new2 a');
		demoLinks3.each(this.bindLink.bind(this));

		var demoLinks4 = $$('div#demo_new3 a');
		demoLinks4.each(this.bindLink.bind(this));

		
	},
	
	setSelected: function(containers, path){
		
		if ( !(containers && typeof(containers) == 'object' && containers.length > 0 )){
			
			return;
		}
		containers.each(function(container){
			
			container.select('li').each(function(e){
				e.removeClassName('selected');
				
				if (e.hasClassName('prev') && container.down('li a[href=#' + path+ ']')){
					
					
					var current = container.down('li a[href=#' + path+ ']');
					var prevLink = current.up().previous();
					var nextLink = current.up().next();
					e.stopObserving('click')
					e.observe('click', function(prev,event){
						
						var target = prevLink.down('a');
						if (target){
							this.route(target.hash.substr(1,999));
						}
					}.bind(this, prevLink));
						
				}else if (e.hasClassName('next') && container.down('li a[href=#' + path+ ']')){
					
					
					var current = container.down('li a[href=#' + path+ ']');
					var prevLink = current.up().previous();
					var nextLink = current.up().next();
					e.stopObserving('click')
					
					e.observe('click', function(next,event){
						
						var target = nextLink.down('a');
						if (target){
							this.route(target.hash.substr(1,999));
						}					
					}.bind(this, nextLink));
				}
				
				
				
			}.bind(this));
			
			//hack for top level items
			if (container.id == 'main-menu') {
				
				var selected = container.down('li a[href*=#' + path.split('-')[0] + ']');
				selected.appear();
				
			} else {
				
				var selected = container.down('li a[href=#' + path + ']');
			}
			if (selected && selected.up()) {
				selected.up().addClassName('selected');
			}
		}.bind(this));
		return;
	},
	bindPrevNext: function(){
		
	},
	bindLink: function(link) {
		link.observe('click', function(e){
			Event.stop(e);
			if(link.hash) {
				
				this.route(link.hash.substr(1,999));
				window.location.hash = '#/' + link.hash.substr(1,999);
			}
			
		}.bind(this));		
	},
	setLocation: function(location){

		if (this.className){
			$('backgrounds').removeClassName(this.className);
		}
		this.className = 'container-' + location.join('-');
		$('backgrounds').addClassName(this.className);
		
		
		//new page
		var page = $('page-' + location[0] + '-' + location[1]);	

		if (!page) {
			return;
		}
		
		//new container	
		var container = $('container-' + location[0]);
		if (!container){
			
			return;
		}
		
		//old page
		var oldPage = $('page-' + this.location[0] + '-' + this.location[1]);
		
		//old container
		var oldContainer = $('container-' + this.location[0]);
		
		
		if ( this.location[0] == location[0] && this.location[1] == location[1]){
			container.show();
			page.show();
		} else if (this.location[0] == location[0]) {
			
			new Effect.Move(page, {
				x: -this.pageWidth,
				y: 0,
				mode: 'relative',
				duration: 0.0,
				afterFinish: function(){
					//hacky
					page.setStyle({top: '50px'});
					page.show();
				},
				queue: 'pagetransition'
			});
			
			new Effect.Parallel([
				new Effect.Move(oldPage, {
					x: this.pageWidth,
					mode: 'relative',
					sync: true,
					duration:0.1
				}),
				new Effect.Move(page, {
					x: this.pageWidth,
					mode: 'relative',
					sync: true,
					duration:0.1
				})
			], {
				beforeStart: function(){
					
				},
				afterFinish: function(){
					oldPage.hide();
					oldPage.setStyle({left: 0});
					
					//Reset element style for main-content
					if($('main-content')){
						$('main-content').setStyle({backgroundPosition: ""});
					}
				},
				queue: 'pagetransition'
			});
			this.timesRight++;
			

		} else {
			$('main-content').morph('height: 662px', {
				afterFinish: function(){
					oldContainer.hide();
					container.show();
					oldPage.hide();
					page.show();
						$('main-content').morph('height: 662px', {duration: 0.0});					
				},
				duration: 0.0
			});

		}
		this.location = location;

	
		this.oldLocation = location;
		this.setSelected($$('.main-tabs'), location.join('-'));
		this.setSelected($$('#main-menu'), location.join('-'));		

		
	},
	route: function(hash) {
		var route = hash.split("-");
		
		this.setLocation(route);

	}
});

pe = new PageEngine(['etusivu', 'esittely']);