/**************************************************************

	Script	: Portfolio for Stefan Vogelzang
	Version	: 1.0
	Authors	: Erik Huisman
	
**************************************************************/

var Portfolio = new Class({   
						 
	Implements: [Options,Events],
    
	options: { },
						 
	initialize: function(pages,options){
		this.pages = pages;
		this.setOptions(options);
		this.buildmenu();
		this.sets = [];
		this.opacitylevel = 0.2;
		this.parent = 0;
		this.child  = 0;		
	}, 
	
	load: function() {
		
		this.set = this.pages[this.parent].children[this.child].fullslug; 
		this.currentimage = 0;
		
		//if(this.sets.contains(this.set)) { 
		//	this.images = this.pages[parent].children[child].images;
		//	this.build();
		//} else { 
		
		this.sets.include(this.set);

		var jsonRequest = new Request.JSON({url: "/json"+this.set, onComplete: function(images){
		
			this.pages[this.parent].children[this.child].images = images;
			this.images = images;
			this.preload();
			
		}.bind(this)}).get();
	
		//}
					
	},
	
	preload: function(){
		
			$('loading').setStyle('display','block');
			
			var kleinImages  = [];	
			var middelImages = [];
			var grootImages  = [];
			
			this.images.each(function(item,index){
				kleinImages.include('/images/fotografie/klein/'+item.hash+'.jpg');
				middelImages.include('/images/fotografie/middel/'+item.hash+'.jpg');
				grootImages.include('/images/fotografie/groot/'+item.hash+'.jpg');
			});
			
			var loadKleinImages 	= new Asset.images(kleinImages,{ onComplete: function(){
											
											this.build();
											
											var loadMiddelImages 	= new Asset.images(middelImages,{ onComplete: function(){ 
												}.bind(this)
											});
											
											var loadGrootImages 	= new Asset.images(grootImages,{ onComplete: function(){ 
													
													$('loading').setStyle('display','none');
													this.addtheevents();
													
												}.bind(this)
											});
											
									}.bind(this) });
			
			if(this.images.length == 0) { this.build(); }
			
	},
	
	build: function() {
				
		if($('images')){ 
			
			$$('#images li').destroy();

			// maak alle li's
			var elements;		
			this.images.each(function(item,index){
			
				li  = new Element('li');
				img = new Element('img', {'opacity': 0, 'src': '/images/fotografie/klein/'+this.images[index].hash+'.jpg' });
				img.inject(li);	
				item.element = li;
			
			}.bind(this));
					
			// voeg de li's toe aan de dom
			this.counter = 0;
			var loadImages = function(){ 	
				
				if(this.counter < this.images.length) {
					
					this.images[this.counter].element.inject($('images'));
					this.images[this.counter].element.getElement('img').fade('in');
					this.counter++; 
					
				} else { 
				
					if($('loading').getStyle('display') == 'none') { 
						this.addtheevents();
					}
					
					$clear(loadImagesPeriodical); 
					this.resize();
					
				}  
			
			};
			var loadImagesPeriodical = loadImages.periodical(33, this); 
	
		}
		
	},
	
	addtheevents: function(){
		this.list = $('images').getElements('li');
						
		this.list.each(function(item,index){ 
			
			item.removeEvents('mouseenter','mouseleave');
			
			item.addEvents({
				
				'mouseenter': function(e){
					this.mouseenterlist(item,index);
				}.bind(this),
				
				'mouseleave': function(e){
					this.mouseleavelist(item);
				}.bind(this)
			
			});
											
		}.bind(this));		
	},
	
	buildmenu: function(){
		
		ul = new Element('ul', { 'id':'portfoliomenu' });
		this.pages.each(function(item,parent){
			li = new Element('li', {'html': item.name, events: {'click': function(e) { this.menuclick(parent); }.bind(this) } });	
			if(parent == 0) { li.addClass('selected'); }
			
			subul = new Element('ul');
			if(item.children){
				item.children.each(function(item,child){
					subli = new Element('li', {'html': item.name, events: {'click': function(e) {  e.stop(); this.menuclick(parent,child); }.bind(this) } });
					if(child == 0) { subli.addClass('selected'); }
					subli.inject(subul);
			
				}.bind(this));
			};
			subul.inject(li);
			li.inject(ul);
		}.bind(this));
		
		ul.set('opacity',0).setStyle('left', ($(document.body).getSize().x - 940) / 2 );
		ul.inject(document.body);
		
		$$('#portfoliomenu li ul li:last-child').setStyle('margin-right',0)
		$$('#portfoliomenu li ul li').each(function(item){
			item.getParent().setStyle('width', item.getParent().getSize().x + item.getSize().x + item.getStyle('margin-right').toInt() + 1 );
		});
		$$('#portfoliomenu li ul').addClass('hidden');
		$$('#portfoliomenu li.selected ul')
		
	},
	
	menuload: function(){
		$(document.body).setStyle('background','#000000');
		if(this.parent == 0 && this.child == 0) { this.load(); }
		$('portfoliomenu').morph({ 'top': 126, 'opacity': 1});
		
	},	

	menuunload: function(){
		$(document.body).setStyle('background','#000000');
		$('portfoliomenu').morph({ 'top': 86, 'opacity': 0});
		
	},
	
	menuclick: function(parent,child){
		
		if(!child) { child = 0; }
		
		parentitems = $('portfoliomenu').getChildren('li');
		parentitems.removeClass('selected');
		parentitems[parent].addClass('selected');
		
		childitems = parentitems[parent].getElement('ul').getChildren('li');
				
		childitems.removeClass('selected');
		childitems[child].addClass('selected');
		
		this.parent = parent;
		this.child  = child;
		
		this.load();
		
		this.fireEvent('menuclick',this.pages[parent].children[child]);
		
	},
	
	mouseenterlist: function(item,index){
		
		$$('#images li').setStyle('z-index', 1);
		item.setStyle('z-index', 2);
		
		var img = new Element('img', {
			'class': 'hover',
			'src': '/images/fotografie/middel/'+this.images[index].hash+'.jpg',
			'styles': {
				'top': -15,
				'left': -20 * this.images[index].ratio
			},
			'opacity': 0.5,
			'events': {
				'click': function(){
					this.open(index);
				}.bind(this)
			}
			
		});
		
		img.set('morph', { duration: 200, transition: 'quad:out' });
		img.inject(item).morph({ /*top : -20,*/ opacity: 1 });
	
	}, 
	
	mouseleavelist: function(item){
		$$('#images li img.hover').destroy();
	}, 
	
	open: function(id) {
		
		this.currentimage = id;
	
		$(document.body).setStyle('background','#000000');
		$('pagecontainer').setStyle('display','none');
		
		this.overlay = new Element('div', { 'id':'overlay'}); 
		this.overlay.inject($(document.body));
		
		imagecontainer = new Element('div', { 'id':'imagecontainer'});
		
		this.links	    = new Element('p', { 'id':'links' });
		closelink  	    = new Element('a', { 'id': 'closelink', 'html':'overzicht', events: { 'click' : function() { this.close() }.bind(this)  } });
		vrijstaandlink  = new Element('a', { 'id': 'vrijstaandlink', 'html':'vrijstaand', events: { 'click' :  function() { this.entervrijstaand() }.bind(this) } }); 			
		fullscreenlink  = new Element('a', { 'id': 'fullscreenlink', 'html':'fullscreen', events: { 'click' :  function() { this.enterfull() }.bind(this) } }); 			
		uitlichtinglink = new Element('a', { 'id': 'uitlichtinglink', 'html':'uitlichting', events: { 'click' :  function() { this.enteruitlichting() }.bind(this) } }); 			
		
		uitlichtinglink.inject(this.links);
		fullscreenlink.inject(this.links);
		vrijstaandlink.inject(this.links);
		closelink.inject(this.links);
		this.links.inject(imagecontainer);
		
		ul = new Element('ul');
		ul.inject(imagecontainer);
		
		keyboard = new Element('div', { 'id':'keyboard', 'opacity': 0.7 }); 
		keyboard.inject($(document.body));
		
		(function(){ 
			keyboard.fade('out');
		}).delay(4000);
		
		var totalwidth = 0;
		var leftwidth  = 0;
		var rightwidth = 0;
		
		imagecontainer.inject($(document.body));
		
		this.images.each(function(item,index){
			var li  = new Element('li', {'events': { 'click' : function() { this.slideto(index) }.bind(this), 'mouseenter' : function() { this.mouseenterimage(index) }.bind(this), 'mouseleave' : function() { this.mouseleaveimage(index) }.bind(this) } });
			var img = new Element('img', { 'src': '/images/fotografie/groot/'+item.hash+'.jpg', 'opacity': this.opacitylevel, 'styles': {'width': 500 * item.ratio } });
			img.inject(li);
			li.inject(ul);
			totalwidth += Number(item.width);
			if(index < id) { leftwidth  += Number(item.width); }
			if(index > id) { rightwidth += Number(item.width); }
			if(index == id) { img.set('opacity',1); }
		
		}.bind(this));
		ul.setStyles({ 'width':totalwidth, 'left': ((leftwidth * -1) - (this.images[id].width/2) + ($(document.body).getSize().x/2)) });
		
		this.fireEvent('opened');
		
	}, 
	
	close: function(){ 
		$('keyboard').destroy();
		$('overlay').destroy();
		$('imagecontainer').destroy();		
		$(document.body).setStyle('background','#FFFFFF');
		$('pagecontainer').setStyle('display','block');
		this.opacitylevel = 0.2;
		this.leavefull();
		this.fireEvent('closed');
	},
	
	next: function(){
		if(this.currentimage < (this.images.length-1)) { this.slideto(this.currentimage+1); }	
	}, 
	
	prev: function(){
		if(this.currentimage > 0) { this.slideto(this.currentimage-1); }	
	},		
	
	mouseenterimage: function(id) {

		if(id <  this.currentimage) { var arrowclass = 'toright'; }
		if(id >  this.currentimage) { var arrowclass = 'toleft'; }
		if(id != this.currentimage) {
			this.hover = new Element('div', { 'id': 'hover', 'opacity': 0, 'class': arrowclass, events: { 'click' : function(){ this.slideto(id) }.bind(this)  }, styles: { 'cursor': 'pointer' } });
			list  = $$('#imagecontainer ul li');
			this.hover.inject(list[id]).fade('in');
		}	

	}, 
	
	mouseleaveimage: function(id) {
		if(this.hover){ this.hover.destroy() };
	}, 
	
	slideto: function(id) {

			var images = $$('#imagecontainer ul li img');
			
			if(this.opacitylevel != 0){ 
				images[this.currentimage].fade(this.opacitylevel);
				images[id].fade('in');
			} else {
				images[this.currentimage].set('opacity',this.opacitylevel);
				images[id].set('opacity',1);		
			}

			var totalwidth = 0;
			var leftwidth  = 0;
			var rightwidth = 0;

			this.images.each(function(item,index){
				if(index < id) { leftwidth  += Number(item.width); }
				if(index > id) { rightwidth += Number(item.width); }
			});
			$('imagecontainer').getElement('ul').set('morph', { duration: 500, transition: 'quint:out' });
			$('imagecontainer').getElement('ul').morph({ 'left': ((leftwidth * -1) - (this.images[id].width/2) + ($(document.body).getSize().x/2)) });
			
			this.links.tween('margin-right', ((this.images[id].width/2)*-1) );
			
			this.currentimage = id;

			this.leavefull();
			this.mouseleaveimage(id);
	}, 
	
	entervrijstaand: function(){
				
		$('vrijstaandlink').addClass('selected');
		$('vrijstaandlink').removeEvents('click');
		$('vrijstaandlink').addEvent('click',function() { this.leavevrijstaand() }.bind(this) );
		
		this.leaveuitlichting();
		this.opacitylevel = 0;
		
		var imgs = $$('#imagecontainer ul li img');
		imgs.set('opacity',this.opacitylevel);
		imgs[this.currentimage].set('opacity',1);	
		
	}, 
	
	leavevrijstaand: function(){
		if($('vrijstaandlink').hasClass('selected')){
							
				$('vrijstaandlink').removeClass('selected');			
				$('vrijstaandlink').removeEvents('click');
				$('vrijstaandlink').addEvent('click',function() { this.entervrijstaand() }.bind(this) );			
				
				this.opacitylevel = 0.2;
				
				var imgs = $$('#imagecontainer ul li img');
				imgs.set('opacity',this.opacitylevel);
				imgs[this.currentimage].set('opacity',1);
			
		}		
	},
	
	enteruitlichting: function(){
				
		$('uitlichtinglink').addClass('selected');
		$('uitlichtinglink').removeEvents('click');
		$('uitlichtinglink').addEvent('click',function() { this.leaveuitlichting() }.bind(this) );
		
		this.leavevrijstaand();
		this.opacitylevel = 1;
		
		var imgs = $$('#imagecontainer ul li img');
		imgs.set('opacity',this.opacitylevel);
		imgs[this.currentimage].set('opacity',1);	
	}, 
	
	leaveuitlichting: function(){
		if($('uitlichtinglink').hasClass('selected')){
							
				$('uitlichtinglink').removeClass('selected');			
				$('uitlichtinglink').removeEvents('click');
				$('uitlichtinglink').addEvent('click',function() { this.enteruitlichting() }.bind(this) );			
				
				this.opacitylevel = 0.2;
				
				var imgs = $$('#imagecontainer ul li img');
				imgs.set('opacity',this.opacitylevel);
				imgs[this.currentimage].set('opacity',1);
			
		}		
	},	
	
	enterfull: function(){
		full 	= new Element('div', { 'id': 'full', events: { 'click' : function() { this.leavefull() }.bind(this)  } });
		fullimg = new Element('img', { 'src': '/images/fotografie/groot/'+this.images[this.currentimage].hash+'.jpg', 'height': window.getSize().y, 'width': (window.getSize().y * this.images[this.currentimage].ratio) , 'align': 'center', events: { 'click' : function() { this.leavefull() }.bind(this)    } });
		fullimg.inject(full);
		full.inject(document.body);	
	}, 
	
	leavefull: function(){
		if($('full')){ $('full').destroy();	}
	},
	
	togglefull: function(){
		if($('full')){
			this.leavefull();	
		} else {
			this.enterfull();
		}
	},
	
	resize: function(){
				
		$('pagecontainer').setStyle('height', $('portfolio').getElements('.inner')[0].getSize().y );

		if($('imagescontainer')){
			$('imagescontainer').getElement('ul').setStyle('left', ((this.leftwidth * -1) - (this.images[id].width/2) + ($(document.body).getSize().x/2)) );
		}
		if($('portfoliomenu')){
			$('portfoliomenu').setStyle('left', ($(document.body).getSize().x - 940) / 2 );
		}		
		
		
	}
	

});