var	lightboxIsClosed 	= false;
var lightboxIsOpen	 	= false;
var dimension 				= document.window.getCoordinates();
var elementScrolls		= [];
var durations					= [];
var activePage 				= 1;
var activeItem				= 1;

var Vermillion = {
	
	init: function(){	
		Vermillion.requirements();
	},

	start: function(){	
		if ($$('.photoWrapper') && !Browser.Engine.trident) 	Vermillion.viewLargerInfo();
		if ($$('.viewPhoto')) 		Vermillion.viewPhoto();
		if ($('pagina')) 					Vermillion.handlePortfolioPagination();

		if ($('imagesContainer')) Vermillion.slideAboutImages();

		$('overlay').fade('out');
	},
	
	getPagePosition: function(page){
		position 	= 0;
		pages 		= $$('.siteItem');
		
		s = 1;
		pages.each(function(tmp){
			if (tmp.get('id') == page) {
				position = s;
			}
			s++;
		});
		
		return position;
	},
	
	requirements: function(){
		new Accordion($('accordion'), 'h1.topic', 'div.tContent', {
			opacity: true,
			trigger: 'mouseover',
			onActive: function(toggler, element){
				toggler.setOpacity(1);
				element.setOpacity(1);
			},
			onBackground: function(toggler, element){
				toggler.setOpacity(0.5);
				element.setOpacity(0.5);
			}
		});

		Cufon.replace('a.nav, h3, span.helveticaLight, #contact .text', {
			fontFamily: 'Helvetica'
		});	

		Cufon.replace('a.pagina, h1, span.helveticaLight strong, #success', {
			fontFamily: 'HelveticaNeueBold'
		});	

		Cufon.replace('span.helveticaLight strong, span.helveticaLight a', {
			fontFamily: 'HelveticaNeueBold'
		});
		
		Vermillion.fadeOvers();
		
		$$('#site a[href^="#"]').addEvent('click', function(e) {
			e.stop(e);
			
			activeItem	= Vermillion.getPagePosition(document.location.hash.replace('#',''));
			nextItem 		= Vermillion.getPagePosition(this.get('href').replace('#',''));
						
			var scroll 	= new Fx.Scroll('container', {
				duration: 300,
				wheelStops: false,
				transition: Fx.Transitions.Circ.easeInOut
			});

			hash				= document.location.hash;
			var target 	= document.getElement(this.get('href'));
			backup	   	= this.get('href');
			
			(function(){
				if (target) {
					scroll.start(elementScrolls[backup.replace('#','')]-dimension.width/2+830/2, 0);
					scroll.onComplete = function(){
						scroll.cancel();

						document.location.hash 	= backup;
						activeItem							= Vermillion.getPagePosition(backup.replace('#',''));
					};
				}
			}).delay(100);
		});

		Vermillion.initScrolls();
		
		if (window.location.href.match(/#/)) {
			id = window.location.href.split('#');
			if ($(id[1])) {
				var scroll = new Fx.Scroll('container', {
					duration: 300,
					wheelStops: false,
					transition: Fx.Transitions.Circ.easeInOut
				});

				scroll.pause();
				scroll.set(0,0);
				scroll.start(elementScrolls[id[1]]-dimension.width/2+830/2, 0);
			}
		}
	},
	
	initScrolls: function(){
		var containerWidth = 0;
		
		left 	= 0;
		right	= 0;
		prev 	= 0;
		sum 	= 0;
		i 		= 1;			
		viewPort 	= dimension.width;

		$$('.siteItem').each(function(page){
			pageWidth	= page.getCoordinates().width;
			
			if (i > 1) {
				left 	+= Math.round(pageWidth) + 2000;
				
				if (i == $$('.siteItem').length) {
					page.setStyles({
						'left': left
					});
				} else {
					page.setStyles({
						'left': left
					});
				}
			} else {
				left 	= Math.round(viewPort/2-pageWidth/2);
				page.setStyle('left', left);
				$('backgroundFix').setStyle('width', left-12);
			}
			
			elementScrolls[page.get('id')] = left;
			
			if (i > 1) {
				sum += left+viewPort/2-pageWidth/2;
			} else {
				sum += left;
			}
			
			i++;
		});

		$('container-inner').setStyles({
			'width': ($$('.siteItem').length * 830) + ($$('.siteItem').length * (viewPort/2-830/2)) + 10000
		});
	},
	
	navigate: function(){
		
	},
	
	fadeOvers: function(){
		var overs 	= new Array();
		var hovered = new Array();

		function fadeOut(el) {
			overs[el.get('id')].pause();
			overs[el.get('id')].start('.normal');
		}
		
		$$('a.nav').each(function(el){
			id = el.get('id');
			
			if (!overs[id]) {
				overs[id] = new Fx.Morph(id, {duration: 250, transition: Fx.Transitions.Sine.easeOut});
			}
		});
		
		$$('a.nav').addEvents({
			'mouseover': function(){
				if (!this.hasClass('active')) {
					hovered[this.get('id')] = true;
					overs[this.get('id')].pause();
					overs[this.get('id')].start('.hover');
				}
			},
			'mouseleave': function(){
				if (!this.hasClass('active')) {
					fadeOut(this);
				}
			}
		});
	},
	
	viewLargerInfo: function(){
		function animate(id, mode){
			if (itemFx[id]) {
				switch (mode) {
					case 'in':
						itemFx[id].start({
							'margin-left': [-270, 0],
							'margin-top': [0, -35],
							'opacity': [0, 1]
						});
						
						itemFx[id].addEvent('complete', function(){
							itemFxProceeded[id] = true;
						});
					break;
					case 'out':
						itemFx[id].pause();
						itemFx[id].start({
							'margin-left': [0, -270],
							'margin-top': [-35, -0],
							'opacity': [1, 0]
						});
						
						itemFx[id].addEvent('complete', function(){
							itemFxProceeded[id] = false;
						});
					break;
				}
			}
		}

		// first, setup
		var itemFx 						= [];
		var itemFxProceeded 	= [];
		
		var myChain						= new Chain();
		
		myChain.chain(
			function initialize() {
				$$('.photoWrapper').each(function(obj){
					id	 = obj.get('id');
					link = obj.getElement('a');
					
					info = new Element('div', { 'id': 'viewLarger-'+id, 'class': 'viewLarger viewPhoto', 'rel': link.get('rel')}).inject(obj);
					
					itemFx[id] = new Fx.Morph(info, {
						duration: 120,
						transition: Fx.Transitions.Expo.easeOut
					});
					
					itemFxProceeded[id] = false;
				});
			},
			function trigger() {
				$$('.photoWrapper').addEvents({
					'mouseover': function(){
						if (!itemFxProceeded[this.get('id')]) {
							animate(this.get('id'), 'in');
						}
					},
					'mouseleave': function(){
						animate(this.get('id'), 'out');
					}
				});
			}
		);
		
		myChain.callChain();
		myChain.callChain();
	},
	
	viewPhoto: function(){
		$$('.viewPhoto').addEvent('click', function(e){
			el 			= this;
			var image 	= el.get('rel');
			
			Vermillion.prepareLightbox();
			Vermillion.lightboxCloseArea(true, e.client); 
			
			(function(){
				if ($('lightboxBackground')) {
					var tip = new Tips($('lightboxBackground'));
					
					$('lightboxBackground').addEvents({
						'click': function(){
							if (lightboxIsOpen) {
								Vermillion.closeLightbox();
							
								(function(){
									Vermillion.disposeLightboxBackground();
								}).delay(550);
							}
						},
						'mouseover': function(){
							//tip.fade('in');
						}
					});
				}
			}).delay(550);
			
			if (image.length > 0) {
				if (!$('lightbox')) {
					Vermillion.lightbox(el, image);
				} else {
					Vermillion.closeLightbox();
					
					(function(){
						if (lightboxIsClosed) {
							Vermillion.lightbox(el, image);
						}
					}).delay(1200);	
				}
			}
		});
	},
	
	lightbox: function(object, photo){
		var lightbox 	= new Element('div', {'id': 'lightbox', 'class': 'lightboxContainer'});
		
		lightbox.setStyles({
			top: (dimension.height/2)-80,
			left: (dimension.width)/2-80
		});
		
		lightbox.inject($('site')).setOpacity(0);
		
		lightbox.fade('in');

		var morph = new Fx.Morph(lightbox, {
			duration: 200,
			transition: Fx.Transitions.Elastic.easeInOut
		});
		
		lightbox.addEvents({
			'mouseover': function(){
				Vermillion.lightboxCloseArea(true);
			},
			'mouseleave': function(){
				Vermillion.lightboxCloseArea(false);
			}
		});
		
		(function(){
			var loadImage = new Asset.images(photo, {
				onComplete: function(){
					photoObj 		= new Image();
					photoObj.src 	= photo;
					
					if (dimension.height < (photoObj.height + 4) || dimension.width < (photoObj.width + 4)) {
						photoObj.height = (photoObj.height/100) * 80;
						photoObj.width	= (photoObj.width/100) * 80;
					}
					
					var image = new Element('img', {
						'src': photoObj.src, 
						'width': photoObj.width,
						'height': photoObj.height,
						'id': 'lightboxImage'
					}).setOpacity(0).inject(lightbox);

					$('lightbox').setStyle('background', '#ff3f00');

					morph.start({
						'width': photoObj.width,
						'height': photoObj.height,
						'left': (dimension.width/2)-(photoObj.width/2),
						'top': (dimension.height/2)-(photoObj.height/2)
					});
					
					morph.onComplete = function(){
						morph.cancel();
						image.fade('in');
						
						(function(){
							/*var close = new Element('div', {
								'id': 'closeLightbox', 
								'class': 'closeLightbox'
							}).set('html', '<a href="javascript:Vermillion.closeLightbox();"><img src="assets/images/btn-close-smaller.png" alt="" /></a>').setOpacity(0).inject(lightbox, 'top');
							
							close.setStyles({
								'top': '-15px',
								'left': photoObj.width-1
							});*/
							
							position 		= Vermillion.position(object);
							btnContainer 	= Vermillion.showPanel(position, photoObj);
							
							//close.fade('in');
							btnContainer.setStyle('display', 'block');
							lightboxIsOpen = true;
						}).delay(550);
					}
				}
			});
		}).delay(1200);
	},

	position: function(obj) {
		position 	= [];
		position[1]	= $$('.photoWrapper').length;
		
		s = 1;
		$$('.photoWrapper').each(function(element){
			if (element.get('id') == obj.getParent().get('id')) {
				position[0] = s;
				position[2] = obj.getParent().get('id');
			}  
			s++;
		});
		
		return position;
	},
	
	showPanel: function(position, photoObj) {
		side = photoObj.width/2;
		
		var btnContainer = new Element('div', {
			'id': 'btnContainer',
			'styles': {
				'width': side*2,
				'height': photoObj.height,
				'top': -photoObj.height,
				'position': 'relative',
				'display': 'none'
			}
		});
		
		if (position[0] > 1) {
			var btnLeft = new Element('a', {
				'href': 'javascript:void(0);',
				'id': 'btnLeft',
				'styles': {
					'padding-top': photoObj.height/2-30,
					'padding-left': 5,
					'width': side-20,
					'float': 'left',
					'height': photoObj.height-photoObj.height/2+30,
					'display': 'block'
				},
				'html': '<img src="/images/btn-arrow-left.png" alt="" />',
				'events': {
					'click': function(){
						$('lightboxBackground').removeEvents('click');
						$('lightbox').setStyle('background', '#ff3f00 url(../images/iris.gif) no-repeat center');
						$('lightboxImage').fade('out');
						$('btnContainer').dispose();
						
						(function(){
							Vermillion.getImage(position, 'prev', photoObj);
						}).delay(550);
					},
					'mouseover': function(){
						if ($('btnLeft')) {
							$('btnLeft').setOpacity(1);
						}
					},
					'mouseout': function(){
						if ($('btnLeft')) {
							$('btnLeft').setOpacity(0.4);
						}
					}
				}
			}).setOpacity(0.4).inject(btnContainer);
		}
		
		if (position[0] < position[1]) {
			var btnRight = new Element('a', {
				'href': 'javascript:void(0);',
				'id': 'btnRight',
				'styles': {
					'text-align': 'right',
					'float': 'right',
					'padding-right': 5,
					'padding-top': photoObj.height/2-30,
					'width': side-20,
					'height': photoObj.height-photoObj.height/2+30,
					'display': 'block'
				},
				'html': '<img src="/images/btn-arrow-right.png" alt="" />',
				'events': {
					'click': function(){
						$('lightboxBackground').removeEvents('click');
						$('lightbox').setStyle('background', '#ff3f00 url(/images/iris.gif) no-repeat center');
						$('lightboxImage').fade('out');
						$('btnContainer').dispose();
						
						(function(){
							Vermillion.getImage(position, 'next', photoObj);
						}).delay(550);
					},
					'mouseover': function(){
						if ($('btnRight')) {
							$('btnRight').setOpacity(1);
						}
					},
					'mouseout': function(){
						if ($('btnRight')) {
							$('btnRight').setOpacity(0.4);
						}
					}
				}
			}).setOpacity(0.4).inject(btnContainer);
		}
		
		btnContainer.inject($('lightbox'));
		
		Vermillion.lightboxCloseArea();
		
		return btnContainer;
	},
	
	getImage: function(position, direction, prevImage){
		image = false;
		
		if (position[0] >= 1 && position[0] <= position[1]) {
			switch(direction) {
				case 'next':
					image = position[0]+1;					
				break;
				case 'prev':
					image = position[0]-1;	
				break;
			}
		}

		if (image) {
			photo = $('photo-'+image).getChildren('a').get('rel');

			var nextImage = new Asset.images(photo, {
				onComplete: function(){
					nextImageChain = new Chain();
					
					nextImageChain.chain(
						function prepare(){
							if ($('closeLightbox')) $('closeLightbox').setOpacity(0);
							
							(function(){
								$('lightboxImage').dispose();
							}).delay(550);
						},
						
						function newImage(){
							(function(){
								photoObj 			= new Image();
								photoObj.src 	= photo;
								
								if (dimension.height < (photoObj.height + 4) || dimension.width < (photoObj.width + 4)) {
									photoObj.height = (photoObj.height/100) * 80;
									photoObj.width	= (photoObj.width/100) * 80;
								}

								morph = new Fx.Morph('lightbox', {
									duration: 300,
									transition: Fx.Transitions.Elastic.easeOut
								});

								if (photoObj.width != prevImage.width || photoObj.height != prevImage.height) {
									morph.start({
										'width': photoObj.width,
										'height': photoObj.height,
										'left': (dimension.width/2)-(photoObj.width/2),
										'top': (dimension.height/2)-(photoObj.height/2)
									});

									morph.onComplete = function(){
										morph.cancel();

										var image = new Element('img', {
											'src': photoObj.src,
											'width': photoObj.width,
											'height': photoObj.height,
											'id': 'lightboxImage',
											'styles': {
												'display': 'block'
											}
										}).inject($('lightbox'), 'top');
									}
								} else {
									var image = new Element('img', {
										'src': photoObj.src,
										'width': photoObj.width,
										'height': photoObj.height,
										'id': 'lightboxImage',
										'styles': {
											'display': 'block'
										}
									}).inject($('lightbox'), 'top');
								}
							}).delay(550);
						},
						
						function prepareNew(){
							(function(){
								if ($('closeLightbox')) {
									$('closeLightbox').setStyles({
										'top': '-15px',
										'left': photoObj.width-1
									}).fade('in');
								}
								
								position 			= Vermillion.position($('photo-'+image).getChildren('a'));
								btnContainer 	= Vermillion.showPanel(position, photoObj);
								
								Vermillion.preparePortfolioPagination($('photo-'+image).getParent().getParent().get('id').replace('page_', ''));
								Vermillion.scrollToPage($('photo-'+image).getParent().getParent().get('id').replace('page_', ''));
								
								$('lightboxBackground').addEvent('click', function(){
									Vermillion.closeLightbox();
								
									(function(){
										Vermillion.disposeLightboxBackground();
									}).delay(550);
								});

								$('lightbox').setStyle('background', '#ff3f00');

								if ($('closeLightbox')) $('closeLightbox').fade('in');

								lightboxIsOpen = true;
							}).delay(550);
						},
						
						function showBtn()
						{
							(function(){ 
								if ($('btnContainer')) $('btnContainer').setStyle('display', 'block');
							}).delay(1550);
						}
					);
					
					nextImageChain.callChain();
					nextImageChain.callChain();
					nextImageChain.callChain();
					nextImageChain.callChain();
				}
			});
		}
	},
	
	closeLightbox: function(){
		lightboxIsClosed 	= true;
		lightboxIsOpen		= false;

		if (!lightboxIsOpen) {
			if ($('lightboxImage')) $('lightboxImage').fade('out');

			if ($('closeLightbox')) $('closeLightbox').fade('out');
			if ($('btnContainer')) $('btnContainer').fade('out');

			Vermillion.lightboxCloseArea(true);
			
			(function(){
				var morph = new Fx.Morph($('lightbox'), {
					duration: 100,
					transition: Fx.Transitions.linear
				});
				
				morph.start({
					'width': 80,
					'height': 80,
					'left': (dimension.width/2)-80,
					'top': (dimension.height/2)-80
				});
				
				morph.onComplete = function(){
					morph.cancel();
					
					if ($('lightbox')){
						$('lightbox').fade('out');
						
						(function(){ 
							if ($('lightbox')) {
								$('lightbox').dispose();
							}
						}).delay(550);
						
						Vermillion.disposeLightboxBackground();
					}
				}
			}).delay(550);
		}
	},
	
	prepareLightbox: function(){
		var lightboxBackground = new Element('div', {
			'id': 'lightboxBackground', 
			'class': 'lightboxBackground'
		}).inject($('site')).setOpacity(0).fade(0.3);
	},
	
	lightboxCloseArea: function(hide, start){
		if (start) {
			$('tooltip').setStyles({
				'top': start.y - 17,
				'left': start.x + 20
			});
		}
		
		document.addEvent('mousemove', function(e){
			$('tooltip').setStyles({
				'top': e.client.y - 17,
				'left': e.client.x + 20
			});
		});	
		
		if (hide) {
			$('tooltip').setStyle('display', 'none');
		} else {
			$('tooltip').setStyle('display', 'block').setOpacity(0.5);
		}
	},
	
	disposeLightboxBackground: function(){
		if ($('lightboxBackground')) {
			$('lightboxBackground').fade(0);
			(function(){
				if ($('lightboxBackground')) {
					$('lightboxBackground').dispose();
					Vermillion.lightboxCloseArea(true);
				}
			}).delay(550);
		}
	},
	
	preparePortfolioPagination: function(num){
		(function(){
			pages = $$('#portfolio .page');
			
			if (num < pages.length) {
				$('nextPage').fade('in');	
			} else {
				$('nextPage').fade('out');
				$('paginaDot').fade('out');	
			}

			if (num > 1) {
				$('previousPage').fade('in');	
			} else {
				$('previousPage').fade('out');	
				$('paginaDot').fade('out');	
			}
			
			if (num < pages.length && num > 1) {
				$('previousPage').fade('in');	
				$('nextPage').fade('in');	
				$('paginaDot').fade('in');	
			}
		}).delay(200);

		return true;
	},
	
	handlePortfolioPagination: function(){
		$('paginaDot').setStyle('visibility', 'hidden').setOpacity(0);	
		$('previousPage').setStyle('visibility', 'hidden').setOpacity(0);	
	
		var paginaScroll = new Fx.Scroll('portfolioColumns', {
			duration: 1000,
			wheelStops: false,
			transition: Fx.Transitions.Back.easeInOut
		});

		function scroll(num){
			if ($('page_'+num)) {
				if (Vermillion.preparePortfolioPagination(num) == true) {
					paginaScroll.start($('page_'+num).getCoordinates().width * num - $('page_'+num).getCoordinates().width, 0);
					
					paginaScroll.onComplete = function(){
						paginaScroll.cancel();
						activePage = num;
					}
				}		
			}
		}
		
		$('nextPage').addEvent('click', function(){
			num 	= activePage.toInt()+1;
			
			Vermillion.scrollToPage(num);
		});

		$('previousPage').addEvent('click', function(){
			num 	= activePage.toInt()-1;
			
			Vermillion.scrollToPage(num);
		});
	},
	
	scrollToPage: function(num){
		if ($('page_'+num)) {
			var paginaScroll = new Fx.Scroll('portfolioColumns', {
				duration: 400,
				wheelStops: false,
				transition: Fx.Transitions.Back.easeInOut
			});

			if (Vermillion.preparePortfolioPagination(num) == true) {
				paginaScroll.start($('page_'+num).getCoordinates().width * num - $('page_'+num).getCoordinates().width, 0);
				
				paginaScroll.onComplete = function(){
					paginaScroll.cancel();
					activePage = num;
				}
			}		
		}
	},
	
	slideAboutImages: function(){
		var slideElements = [];
		var last					= false;
		var rand					= false;
		
		function init(){
			$('imagesContainer').getElements('.cImage').each(function(el){
				slideElements.push(el.get('id')); 
			});
			
			last = slideElements[0];
			
			return true;
		}
		
		if (init()) {
			(function(){
				var circle = function(){
					var aboutScroll = new Fx.Scroll('imagesContainer', {
						link: 'cancel',
						duration: 800,
						transition: Fx.Transitions.Quad.easeInOut
					});

					rand = slideElements.getRandom();
					
					do {
						aboutScroll.toElement(rand);
						last = rand;
					} while (rand != last)
					
				}.periodical(5000);
			}).delay(1000);
		}
	}
}

window.addEvent('domready', Vermillion.init);
window.addEvent('load', Vermillion.start);
window.addEvent('resize', (function(){ location.reload(); }));