var HomeScroller = new Class ({
	Implements : [Events, Options],
	
	options: {
		backgrounds: [slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_1.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_7.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_3.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_4.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_5.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_6.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_7.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/bg_8.png'],
		visuals:	[],
		homeTitle: [slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/home_title_1_1.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/home_title_1_2.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/home_title_1_3.png',
		              slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/home_title_1_4.png'],
      	imgTitle: slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/home_title_1.png'
	},
	
	initialize: function(options){
		// Objects
		this.setOptions(options);
		this.fakeScroll = $('scroll');
		this.pages = $$('div.page');
		this.lastScroll = window.getScrollTop();
		this.masks = this.pages.getElements('img.mask');
		this.scrolling = false;
		
		window.addEvents({
			scroll: function(){
				this.scrollAlt();
				//this.handleHeader();
			}.bind(this)
		});
		
		$('scroll_down').addEvent('click', function(e){
			e.stop();
			new Fx.Scroll(window, {
				duration : 1500,
				onStart: function(){
					this.scrolling = true;
				}.bind(this),
				onCancel: function(){
					this.scrolling = false;
				}.bind(this),
				onComplete: function(){
					this.scrolling = false;
				}.bind(this)
			}).start(0, this.pages[0].getCoordinates().height*6);
		}.bind(this));
		
		//this.homeTitle();
		this.imgTitle();
		this.setPages();
		this.buildNav();
		this.setContent();
		this.backgroundHandling();
	},
	
	scrollAlt: function(){
		var scroll = (window.getScrollTop()/6).round(1);
		var scrollBottom = scroll+window.getCoordinates().height;
		var pageHeight = this.pages[0].getCoordinates().height;
		var indexFracture = 1;
		
		this.pages.each(function(page, index){
			var pageTop = pageHeight*index;
			var pageBottom = pageHeight*(index+1);
			
			if (scroll < (20+pageHeight*(this.pages.length-1))){
				if ((scroll <= pageTop && scrollBottom >= pageTop) || (scrollBottom >= pageBottom && scroll <= pageBottom) ||  (scroll >= pageTop && scrollBottom <= pageBottom))
				{
					page.setStyles({'top' : -scroll+pageTop});	
					if (index != 0 && index != this.pages.length-1)
						this.moveContent(index);
					if (index == this.pages.length-1 && this.pages[this.pages.length-1].getCoordinates().top <= 0)
						this.showLastPanel();//this.exitParallax();
					if (index == this.pages.length-1 && this.pages[this.pages.length-1].getCoordinates().top > (window.getCoordinates().height/2))
						this.hideLastPanel();
						
				} 
				else 
				{
					if (index < indexFracture) {
						indexFracture++;
						page.setStyles({'top' : -pageHeight});
					}
					if (index >= indexFracture)
						page.setStyles({'top' : window.getCoordinates().height});
				}
				
				if (((page.getCoordinates().top > 0 && page.getCoordinates().top < (window.innerHeight/2)) || (page.getCoordinates().bottom > (window.innerHeight/2) && page.getCoordinates().bottom < window.innerHeight)) && !this.divNav.getElements('span')[index].hasClass('current')){
					this.divNav.getElement('.current').removeClass('current');
					this.divNav.getElements('span')[index].addClass('current');
				}
				
				page.setStyles({'background-position' : '-225px '+(parseInt(page.getCoordinates().top*1.5).toString()-60)+'px'});
			}
				
		}.bind(this));
		
		this.pointerOver.setStyles({'top' : window.getScrollTop()*(this.heightNav/(this.pages.length*this.pages[0].getHeight()*5.75))});       
		
		if (scroll == 0)
			$('scroll_down').morph({'opacity' : [0, 1]});
		else
			new Fx.Morph($('scroll_down'), {duration:250}).start({'opacity' : 0});
	},
	
	moveContent: function(indexPage){
		var page = this.pages[indexPage];
		
		var right = page.getElement('div.right');
		var left = page.getElement('div.left');
		var img = left.getElement('img');
		
		right.setStyles({'margin-top' : 130+page.getCoordinates().top*0.75});		
		
		var h = img.getStyle('height').toInt();
		var w = img.getStyle('width').toInt();
		
		if (page.getCoordinates().top < 0){
			var H = 450+((135*Math.abs(page.getCoordinates().top/page.getCoordinates().height)));
		} else {
			var H = ((450-450*Math.abs(page.getCoordinates().top/page.getCoordinates().height)));
		}
		
		var W = (w*H)/h;
		var x = 150+((left.getCoordinates().width-125)-W)/2;
		
		if (indexPage == 1 && page.getCoordinates().top >= 0 && page.getCoordinates().top <= (page.getCoordinates().height/2))
			img.setStyle('opacity', (page.getCoordinates().height/2-page.getCoordinates().top)/(page.getCoordinates().height/2));
		
		if (indexPage == this.pages.length-2 && page.getCoordinates().top <= 0 && page.getCoordinates().top >= -(page.getCoordinates().height/2))
			img.setStyle('opacity', (-page.getCoordinates().height/2-page.getCoordinates().top)/(-page.getCoordinates().height/2));
		
		img.setStyles({
			'height' : (H < 0) ? 0 : H,
			'right' : x
		});	
		
		if (page.getCoordinates().top > 0){
			left.setStyles({'margin-top' : -page.getCoordinates().top/*+Math.abs(h-H)*/});
		} else {
			left.setStyles({'margin-top' : -page.getCoordinates().top/*+H*Math.abs(page.getCoordinates().top/page.getCoordinates().height)*/});
		}
	},
	
	setContent: function(){
		this.pages.each(function(page, index){
			if (index != 0 && index!= this.pages.length-1){
				var right = page.getElement('div.right');
				var left = page.getElement('div.left');
				right.setStyles({'margin-top' : 130});
			}
		}.bind(this));
		
		var visuals = new Asset.images(this.options.visuals, {
			onProgress: function(counter, index, path){
				var img = new Element('img', {
					'src' : path,
					'class' : 'mask',
					'alt' : '',
					'title' : ''
				}).inject(this.pages[index+1].getElement('div.left'));
				
				img.removeProperty('width');

				if (counter == 1)
					this.divNav.getElements('span')[counter-1].addClass('current');

				this.divNav.getElements('span')[counter].addClass('current');
				
				if (counter == this.options.visuals.length){
					this.divNav.getElements('span')[counter+1].addClass('current');
					
					var morphScroll = new Fx.Morph($('scroll_down'), {transition:Fx.Transitions.Quint.easeOut, duration:2000});
					morphScroll.start.delay(1000, morphScroll, {'opacity' : 1, 'top' : [415, 315]});
					
					// Set the height to simulate the scrollbar
					var pageHeight = 655;
					this.fakeScroll.setStyles({'display' : 'block', 'width' : 1, 'height' : this.pages.length*pageHeight*6});
					
					// IE7 : Bug which limits the body to the height of the window
					if (Browser.ie7){
						$$('body')[0].setStyles({'height' : 'auto'});
						$('logo').setStyle('display', 'none');
						$('logo').setStyle('display', 'block');
					}
					
					(function(){
						this.divNav.getElements('span:not(:first-child)').removeClass('current')
					}).delay(250, this);
				}
				
				this.moveContent(index+1);
			}.bind(this)
		});
		
		var header = $$('div.header')[0];
		header.getElement('div.bottom').setStyles({'height' : 0});
		header.setStyles({'height' : 0});
	},
	
	setPages: function(){
		// Set the pages' position
		var pageHeight = (window.innerHeight > 750) ? window.innerHeight : 750;
				
		this.pages.each(function(page, index){
			switch (index){
				case 0:
					page.setStyles({'top' : 0});
					break;
				case 1:
					page.setStyles({'top' : this.pages[0].getCoordinates().height});
					break;
				default:
					page.setStyles({'top' : window.getCoordinates().height+20});
					break;
			}
			page.setStyles({
				'z-index' : index*2, 'width' : window.getCoordinates().width, 'height' : 665});	
		}.bind(this));
		
		this.pages[this.pages.length-1].setStyles({'height' : window.innerHeight});
	}, 
	
	buildNav: function(){
		this.divNav = new Element('div', {
			'class' : 'nav_parallax'
		}).inject(document.body);
		
		for (i = 0; i < this.pages.length; i++){
			var pointer = new Element('span', {
				'class' : 'pointer',
				'styles' : {
					'opacity' : 0
				},
				'events' : {
					click: function(e){
						var pointers = this.divNav.getElements('.pointer');
						var currentIndex = pointers.indexOf(this.divNav.getElement('span.current'));  
						var newIndex = pointers.indexOf(e.target);
						
						if (this.scrolling == false){
							new Fx.Scroll(window, {
								duration : 1500*Math.abs(currentIndex-newIndex),
								onStart: function(){
									this.scrolling = true;
								}.bind(this),
								onCancel: function(){
									this.scrolling = false;
								}.bind(this),
								onComplete: function(){
									this.scrolling = false;
								}.bind(this)
							}).start(0, this.pages[0].getCoordinates().height*newIndex*6);
						}
					}.bind(this)
				}
			}).inject(this.divNav);
			
			pointer.morph.delay(200*i, pointer, {'opacity' : 1});
		}
		var pointers = this.divNav.getElements('.pointer');
		this.heightNav = (pointers[0].getHeight()*pointers.length)+(parseInt(pointers[0].getStyle('margin-bottom'))*(pointers.length-1));
		
		this.pointerOver = new Element('span', {
			'class' : 'pointer over',
			'styles' : {
				'z-idnex' : 2,
				'position' : 'absolute',
				'left' : 0,
				'top' : 0,
				'margin' : 0,
				'padding' : 0
			}
		}).inject(this.divNav);
		
		this.divNav.setStyles({
			'top' : 220,
			'left' : ($$('.top')[0].getCoordinates().right-36)-this.divNav.getCoordinates().width*2
		});
	},
	
	handleHeader: function(){
		var headerMask = $$('div.header_mask')[0];
		
		this.pages.each(function(page){
			if ((page.getCoordinates().top <= 0 && page.getCoordinates().top >= -(page.getCoordinates().height-200)) || (page.getCoordinates().bottom >= 0 && page.getCoordinates().bottom <= 200)){
				if (page.hasClass('pink'))
					headerMask.setStyles({'background' : 'url('+slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/header_mask_pink.png) top left repeat-x'});
				else if (page.hasClass('blue'))
					headerMask.setStyles({'background' : 'url('+slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/'+slsBuild.paths.img+'/Home/header_mask_blue.png) top left repeat-x'});
				else
					headerMask.setStyles({'background' : 'none'});
				headerMask.setStyles({'z-index' : parseInt(page.getStyle('z-index'))+1});
			} 
		}.bind(this));
	},
	
	backgroundHandling: function(){
		new Asset.images(this.options.backgrounds, {
			onProgress: function(counter, index, path){
				pageTmp = this.pages.filter(function(p, i){
					return (i%this.options.backgrounds.length) == index;
				}.bind(this));
				
				pageTmp.setStyles({'background' : 'url('+path+') -225px -60px repeat transparent'});
			}.bind(this)
		});
	},
	
	imgTitle: function(){
		new Asset.image(this.options.imgTitle, {
			onLoad: function(img){
				img
				.inject(this.pages[0].getElement('div.empty_page'))
				.setStyles({'opacity' : 0});
				
				var morph = new Fx.Morph(img, {transition:Fx.Transitions.Quint.easeOut, duration:2000});
				
				morph.start.delay(1000, morph, {
					'opacity' : 1,
					'margin-top' : [60, 0]
				})
			}.bind(this)
		});
	},
	
	
	showLastPanel: function(){
		if (this.pages[this.pages.length-1].getElement('img').getStyle('opacity') == 0){
			var morph = new Fx.Morph(this.pages[this.pages.length-1].getElement('img'), {transition:Fx.Transitions.Quint.easeOut, duration:3000});
			$$('ul.menu li a')[2].addClass('selected');
			$$('ul.menu li a')[0].removeClass('selected');
			morph.start({
				'opacity' : [0 ,1],
				'margin-top' : [60, 0]
			});
		}
	},
	
	hideLastPanel: function(){
		if (this.pages[this.pages.length-1].getElement('img').getStyle('opacity') == 1){
			var morph = new Fx.Morph(this.pages[this.pages.length-1].getElement('img'), {transition:Fx.Transitions.Quint.easeOut, duration:3000});
			$$('ul.menu li a')[2].removeClass('selected');
			$$('ul.menu li a')[0].addClass('selected');
			morph.start({
				'opacity' : [1, 0],
				'margin-top' : [0, 60]
			});
		}
	},
	
	lastPanel: function(){
		var morph = new Fx.Morph(this.pages[this.pages.length-1].getElement('img'), {transition:Fx.Transitions.Quint.easeOut, duration:3000});
		
		morph.start({
			'opacity' : [0 ,1],
			'margin-top' : [60, 0]
		});
	},
	
	exitParallax: function(){
		window.removeEvents('scroll');
		var wrapper = new Element('div', {
			'class' : 'wrapper',
			'styles' : {
				'position' : 'absolute',
				'left' : 0,
				'top' : 0,
				'z-index' : 51,
				'height' : window.innerHeight,
				'width' : window.innerWidth
			}
		}).inject(this.pages[this.pages.length-1]);
		
		var background = new Element('div', {
			'class' : 'faceBackground',
			'styles' : {
				'position' : 'absolute',
				'left' : 0,
				'top' : 0,
				'z-index' : 50,
				'height' : window.innerHeight,
				'width' : window.innerWidth,
				'background-color' : '#FFFFFF',
				'opacity' : 0
			}
		}).inject(this.pages[this.pages.length-1]);
		
		wrapper.adopt($$('div.last div.header, div.last div.empty_page'));
		
		var fxBg = new Fx.Morph(background, {duration:1000});
		
		this.divNav.set('morph', {duration:1000});
		fxBg.start({'opacity' : 1});
		var pointers = this.divNav.getElements('span');
		pointers.each(function(pointer, index){
			pointer.morph.delay(index*100, pointer, {'opacity' : 0});
		});
		this.divNav.destroy.delay((200*(pointers.length-1))+500, this.divNav);
		var topPointer = parseInt(this.pointerOver.getStyle('top'));
		this.fakeScroll.setStyles({'width' : 1, 'height' : window.innerHeight});
		this.pointerOver.morph({'top' : topPointer});
		this.pages[this.pages.length-1].setStyles({'top': 0});
		this.lastPanel();
	}
});