Number.implement({
	toStep: function(step){
		var divide = Math.floor(this / step);	
		return divide * step
	}
});

var preloadImages = [
	'images/contact.png',
	'images/contact-over.png',
	'images/menu-animals-over.png',
	'images/menu-animals-selected.png',
	'images/menu-architecture-over.png',
	'images/menu-architecture-selected.png',
	'images/menu-fashion-over.png',
	'images/menu-fashion-selected.png',
	'images/menu-food-over.png',
	'images/menu-food-selected.png',
	'images/menu-landscape-over.png',
	'images/menu-landscape-selected.png',
	'images/menu-plants-over.png',
	'images/menu-plants-selected.png',
	'images/menu-portrait-over.png',
	'images/menu-portrait-selected.png',
	'images/menu-weddings-over.png',
	'images/menu-weddings-selected.png',
	'images/animals/thumb-1.png',
	'images/animals/thumb-2.png',
	'images/animals/thumb-3.png',
	'images/animals/thumb-4.png',
	'images/animals/thumb-5.png',
	'images/animals/thumb-6.png',
	'images/animals/thumb-7.png',
	'images/animals/thumb-8.png',
	'images/architecture/thumb-1.png',
	'images/architecture/thumb-2.png',
	'images/architecture/thumb-3.png',
	'images/architecture/thumb-4.png',
	'images/architecture/thumb-5.png',
	'images/architecture/thumb-6.png',
	'images/architecture/thumb-7.png',
	'images/architecture/thumb-8.png',
	'images/architecture/thumb-9.png',
	'images/fashion/thumb-1.png',
	'images/fashion/thumb-2.png',
	'images/fashion/thumb-3.png',
	'images/food/thumb-1.png',
	'images/food/thumb-2.png',
	'images/food/thumb-3.png',
	'images/food/thumb-4.png',
	'images/food/thumb-5.png',
	'images/food/thumb-6.png',
	'images/food/thumb-7.png',
	'images/food/thumb-8.png',
	'images/food/thumb-9.png',
	'images/food/thumb-10.png',
	'images/food/thumb-11.png',
	'images/food/thumb-12.png',
	'images/landscape/thumb-1.png',
	'images/landscape/thumb-2.png',
	'images/landscape/thumb-3.png',
	'images/landscape/thumb-4.png',
	'images/landscape/thumb-5.png',
	'images/landscape/thumb-6.png',
	'images/landscape/thumb-7.png',
	'images/landscape/thumb-8.png',
	'images/landscape/thumb-9.png',
	'images/landscape/thumb-10.png',
	'images/landscape/thumb-11.png',
	'images/landscape/thumb-12.png',
	'images/landscape/thumb-13.png',
	'images/plants/thumb-1.png',
	'images/plants/thumb-2.png',
	'images/plants/thumb-3.png',
	'images/plants/thumb-4.png',
	'images/plants/thumb-5.png',
	'images/plants/thumb-6.png',
	'images/plants/thumb-7.png',
	'images/plants/thumb-8.png',
	'images/plants/thumb-9.png',
	'images/plants/thumb-10.png',
	'images/plants/thumb-11.png',
	'images/plants/thumb-12.png',
	'images/plants/thumb-13.png',
	'images/portrait/thumb-1.png',
	'images/portrait/thumb-2.png',
	'images/portrait/thumb-3.png',
	'images/portrait/thumb-4.png',
	'images/portrait/thumb-5.png',
	'images/portrait/thumb-6.png',
	'images/portrait/thumb-7.png',
	'images/weddings/thumb-1.png',
	'images/weddings/thumb-2.png',
	'images/weddings/thumb-3.png',
	'images/weddings/thumb-4.png',
	'images/weddings/thumb-5.png',
	'images/weddings/thumb-6.png',
	'images/weddings/thumb-7.png',
	'images/weddings/thumb-8.png',
	'images/weddings/thumb-9.png',
	'images/weddings/thumb-10.png',
	'images/weddings/thumb-11.png',
	'images/weddings/thumb-12.png'
];

var c_gallery = new Class({
	Implements:		[Events],
	
	mname:			false,
	current:		1,
	iindex:			3,
	x:				0,
	y:				0,
	timeStamp:		0,
	
	thumbs:			false,
	
	el: {
		pparent:		false,	
		container:		false,
		holder:			false,
		image:			false
	},
	
	is: {
		first:			true	
	},
	
	initialize: function(name, parent, x, y){
		
		this.nname = name;
		this.x = x;
		this.y = y;
		
		// create shortcuts 
		this.el.pparent = parent;
		this.el.container = new Element('div', {'id': 'cell-'+this.nname, 'class': 'cell'});
		
		this.el.container.setStyles({
			'width':	x,
			'height':	y
		});
		
		// if gallery
		if(this.nname == 'home'){ 
			
			this.el.container.addClass('home-bkg');
			this.el.container.adopt(new Element('div', {'class': 'home-copy', 'text': 'Exesios has its own in-house studio facilities for portrait and product photography. We have full-time professional photographers, not to mention a wealth of the highest-spec digital equipment. We also provide high quality, highly flexible, on-location photography without geographic boundaries. Our experience extends all over Europe and beyond. Exesios creates images instead of \'sourcing\' them.'}));
			
		}
		else{
			
			this.el.holder = new Element('div', {'class': 'holder'});
			this.el.image = new Element('img', {'class': 'image'});
			
			this.el.container.adopt(this.el.holder);
			this.el.holder.adopt(this.el.image);
			
			var thumbCount = 0;
			
			switch(this.nname)
			{
				case 'animals':
					thumbCount = 8;
					break;
				case 'architecture':
					thumbCount = 9;
					break;
				case 'fashion':
					thumbCount = 3;
					break;
				case 'food':
					thumbCount = 12;
					break;
				case 'landscape':
					thumbCount = 13;
					break;
				case 'plants':
					thumbCount = 13;
					break;
				case 'portrait':
					thumbCount = 7;
					break;
				case 'weddings':
					thumbCount = 12;
					break;
			}	
			
			// add thumbs
			this.thumbs = [];
			for(var i=1; i<=thumbCount; i++){
				
				// create thumb
				var thumb = new Element('img', {'src': 'images/'+this.nname+'/thumb-'+i.toString()+'.png', 'class': 'thumb'});
				thumb.addClass('cursor-select');
				
				if(!Browser.Engine.trident){
					var drag = new Drag.Move(thumb, {stopPropagation: true, preventDefault: true});
					drag.addEvent('start', this.thumbDrag.bindWithEvent(this));
					drag.addEvent('complete', this.thumbDrop.bindWithEvent(this));
				}

				// add events
				thumb.addEvent('click', this.thumbClick.bindWithEvent(this, i));
				thumb.addEvent('mousedown', this.thumbDown.bindWithEvent(this, i));
				
				// add to container
				this.el.container.adopt(thumb);
				
			}
		
			this.thumbClick.delay(500, this, [null, 1]);
			
		}
			
		this.el.pparent.adopt(this.el.container);
		
	},
	
	thumbDrag: function(thumb, e){
		thumb.setStyle('z-index', this.iindex);
		e.stop();
	},
	
	thumbDrop: function(thumb, e){
		this.iindex = this.iindex + 1;
		e.stop();
	},
	
	thumbDown: function(e, index){
		this.timeStamp = $time();
	},
	
	thumbClick: function(e, index){
		
		if($time() < this.timeStamp + 200 || this.timeStamp == 0){
		
			if($defined(e)){
				
				this.el.image.fade(0);
			}
			
			this.current = index;
			
			this.el.image = new Asset.image('images/'+this.nname+'/'+index.toString()+'/'+this.x.toStep(100).toString()+'x'+this.y.toStep(100).toString()+'/', {
				onload: this.thumbLoad.bindWithEvent(this)	
			});
			
			if($defined(e)){
				this.fireEvent('thumbClick', this.nname);
			}
		
		}
		
	},
	
	thumbLoad: function(){
		
		this.el.image.setStyle('opacity', 0);
		
		$(document.body).adopt(this.el.image);
		
		this.el.holder.morph({
			'left': (this.x - this.el.image.getDimensions().width) / 2,
			'top': (this.y - this.el.image.getDimensions().height) / 2,
			'width': this.el.image.getDimensions().width,
			'height': this.el.image.getDimensions().height
		});
		
		this.el.holder.empty();
		this.el.holder.adopt(this.el.image);
		
		this.el.image.fade.delay(750, this.el.image, 1);
		
		if(this.is.first){
			this.fireEvent('ready');	
			this.is.first = false;
		}
		
	},
	
	thumbPosition: function(){
	
		if(this.nname != 'home'){ 
			
			var coords = this.el.container.getSize();
			var thumbs = this.el.container.getElements('.thumb');
			
			for(var i=0; i < thumbs.length; i++){
				
				// randomise position
				var side = $random(1, 4);
				
				switch(side)
				{
					case 1:
						thumbs[i].setPosition({
							x: $random(-25, 25),
							y: $random(225, this.y - 75)
						})
						break;
					case 2:
						thumbs[i].setPosition({
							x: $random(100, this.x - 150),
							y: $random(-25, 25)
						});
						break;
					case 3:
						thumbs[i].setPosition({
							x: $random(this.x - 200, this.x - 125),
							y: $random(-25, this.y - 75)
						});
						break;
					case 4:
						thumbs[i].setPosition({
							x: $random(100, this.x - 150),
							y: $random(this.y - 200, this.y - 75)
						});
						break;
				}	
				
			}
		}
			
	}
	
});

var c_galleries = new Class({
	Implements:		[Events],
	
	cells:			new Hash(),
	current:		'home',
	
	drag:			false,
	
	mouse:			false,
	readyCount:		0,
	
	size: {
		cellX:			0,
		cellY:			0,
		fullX:			0,
		fullY:			0
	},
	
	el: {
		logo:			false,
		menu:			false,
		container:		false,
		grid:			false,
		overview:		false
	},
	
	fx: {
		scroll:			false
	},
	
	is: {
		overview:		false,
		moving:			false,
		contact:		false
	},
	
	galleries:		['animals','weddings','landscape','food','home','portrait', 'plants','architecture','fashion'],
	
	initialize: function(){
		
		// dimensions
		this.size.cellX = (window.getSize().x > 900) ? window.getSize().x : 900;
		this.size.cellY = (window.getSize().y > 500) ? window.getSize().y : 500;
		this.size.fullX = (this.size.cellX * 3) + 600;
		this.size.fullY = (this.size.cellY * 3) + 600;
		
		// create shortcuts
		this.el.logo = $('logo');
		this.el.contact = $('contact');
		this.el.menu = $('menu');
		this.el.send = $('form-send');
		this.el.lightbox = $('form');
		this.el.container = $('container');
		this.el.grid = $('grid');
		this.el.boxclose = $('form-close');
		//this.el.overview = $('overview');
		
		// styling
		//this.el.logo.fade('hide');
		this.el.menu.fade('hide');
		//this.el.overview.fade('hide');
		
		// set size
		this.el.grid.setStyles({
			'width':	this.size.fullX,
			'height':	this.size.fullY,
			'opacity':	0
		});
		
		// create cells
		for(var i=0; i<this.galleries.length; i++){
			
			var cell = new c_gallery(this.galleries[i], this.el.grid, this.size.cellX, this.size.cellY);
			cell.addEvent('thumbClick', this.thumbClick.bindWithEvent(this));
			cell.addEvent('ready', this.ready.bindWithEvent(this));
			this.cells.set(this.galleries[i], cell);
			
		}
		
		// create effects
		this.fx.scroll = new Fx.Scroll(this.el.container, {duration: 1000, transition: Fx.Transitions.Quad.easeOut});
		
		// attach events
		var items = this.el.menu.getElements('div');
		
		items.addEvent('click', this.item.bindWithEvent(this));
		this.el.logo.addEvent('click', this.item.bindWithEvent(this));
		
		this.drag = new Drag(this.el.container, {
		    style: false,
		    invert: true,
		    modifiers: {x: 'scrollLeft', y: 'scrollTop'},
		    onComplete: this.dragComplete.bindWithEvent(this)
		});
		
		this.el.contact.addEvent('click', this.contactShow.bindWithEvent(this));
		this.el.send.addEvent('click', this.contactSend.bindWithEvent(this));
		this.el.boxclose.addEvent('click', this.contactClose.bindWithEvent(this));
		
		//window.addEvent('mousewheel', this.zoom.bindWithEvent(this));
		
	},
	
	dragStart: function(){
		
		this.fx.scroll.cancel();
		
	},
	
	dragComplete: function(){
		
		var pos = this.el.container.getScroll();
		
		var x = Math.ceil(pos.x / this.size.cellX);
		var y = Math.ceil(pos.y / this.size.cellY);
		
		var gallery = (((y - 1) * 3) + x) - 1;
		
		this.item(null, this.galleries[gallery]);
		
	},
	
	ready: function(){
		this.readyCount++;
		if(this.readyCount == 8){
			this.reveal();
		}	
	},
	
	zoom: function(e){
		
		// zoom in
		if(e.wheel > 0 && this.is.overview){
			
			this.is.overview = false;
			this.el.overview.fade(0);
			
		}
		
		// zoom out
		else if(e.wheel < 0 && !this.is.overview){
			
			this.is.overview = true;
			this.el.overview.fade(1);
			
		}
		
	},
	
	contactShow: function(){
		
		this.is.contact = true;
		
		this.el.blanket = new Element('div', {'class': 'blanket'});
		this.el.blanket.setStyle('opacity', 0.85);
		
		this.el.blanket.addEvent('click', this.contactClose.bindWithEvent(this));
		
		$(document.body).adopt(this.el.blanket);
		
		this.el.lightbox.fade('hide');
		this.el.lightbox.setStyle('display', 'block');
		this.el.lightbox.fade(1);
		
	},
	
	contactClose: function(){
		this.el.blanket.fade(0);
		this.el.lightbox.fade(0);
		this.el.blanket.dispose.delay(1500, this.el.blanket);
		this.el.lightbox.setStyle.delay(1500, this.el.blanket, ['display', 'none']);
	},
	
	contactSend: function(){
		
		new Request.JSON({
			url: 		'contact.php', 
			onSuccess: 	this.contactResponse.bindWithEvent(this),
			noCache:	true
		}).post($('form-form'));
		
	},
	
	contactResponse: function(json, text){
		
		if(text == 'success'){
			this.contactClose();
		}
		else{
			$('form-response').set('html', text);
		}
		
	},
	
	thumbClick: function(cell){
		this.item(null, cell);
	},
	
	item: function(e, cell){
		
		if($defined(e)){
			var image = $(e.target)
			var cell = image.get('id').split('-')[1];
		}
		else{
			var image = $('menu-'+cell)
		}
		
		if(this.current != 'home'){
			this.current.autoEffects_Enable();
			this.current.autoEffects_setState('default');
		}
		
		if(cell == 'home'){
			this.current = 'home';
		}
		else{
			this.current = image;
			image.autoEffects_Disable();
			image.autoEffects_setState('selected');
		}
		
		this.position(cell);
	},
	
	position: function(cell){
		this.fx.scroll.cancel();
		this.fx.scroll.toElement($('cell-'+cell));
	},
	
	reveal: function(){
		
		$('loading').dispose();
		
		// styling
		this.el.grid.setStyle('display', 'block');
		this.el.logo.setStyle('display', 'block');
		this.el.menu.setStyle('display', 'block');
		this.el.contact.setStyle('display', 'block');
		
		// set initial position
		this.position('home');
		
		// fade elements in
		this.el.grid.fade(1);
		this.el.logo.fade(1);
		this.el.menu.fade(1);
		
		// position thumbs
		this.cells.each(function(value, key){
			if(key != 'home'){
				value.thumbPosition();
			}
		});
		
		if(Browser.Engine.trident){
			var thumbs = $$('.thumb');
			for(var i=0; i<thumbs.length; i++){
				var drag = new Drag.Move(thumbs[i], {stopPropagation: true, preventDefault: true});
				//drag.addEvent('start', this.thumbDrag.bindWithEvent(this));
				//drag.addEvent('complete', this.thumbDrop.bindWithEvent(this));
			}
		}
		
	}
});

var loadPercent = 0;
var loadedImages = false;

window.addEvent('domready', function(){
	
	loadedImages = new Asset.images(preloadImages, {
		onProgress: function(counter, index){
			var percent = Math.round(((100 / preloadImages.length) * counter));
			if(percent > loadPercent){
				loadPercent = percent;
				$('loading').set('text', percent.toString()+'%');
			}
		},
		onComplete: function(){
			
			$('loading').set('text', 'preparing, please be patient...');
			
			gallery = new c_galleries;	
			loadedImages.setStyle('display', 'none');
			
			for(var i=0; i<loadedImages.length; i++){
				$(document.body).adopt(loadedImages[i]);	
			}
			
		}
	});
	
});