var Accomodation = new Class({

	options: {
		showDelay: 100,
		hideDelay: 1000,
		duration: 800,
		FxDuration: 200,
		showName: '',
		target: '',
		oldShow: [],
		column: 0
	},

	initialize: function(element, options){
		this.setOptions(options);
		this.options.column = $$('#' + this.options.showName + ' ul').length;
		this.elements = $(element);
		this.build();
	},
	
	build: function(){
		var coor = this.elements.getCoordinates();
		$(this.options.showName).setStyles({
			'left': coor.left,
			'top' : (coor.bottom)
		});	
		this.attach();
	},
	
	attach: function(){
		this.elements.addEvent('mouseenter', function(){
			clearTimeout(this.closetime);										 
			this.opentime = setTimeout(function(){this.show();}.bind(this), this.options.showDelay);
			this.show();
		}.bind(this));
		
		this.elements.addEvent('mouseleave', function(){
			clearTimeout(this.opentime);
			this.closetime = setTimeout(function(){this.hide();}.bind(this), this.options.hideDelay);
		}.bind(this));
	},
	
	show: function(){
		$$(this.options.oldShow).each(function(element){
			element.setStyles({'display': 'none'});
		}.bind(this));
		
		var fx = $(this.options.showName).effects({duration: this.options.duration, transition: Fx.Transitions.Quart.easeOut});
		$(this.options.showName).setStyles({'display': 'block'});
		for(var i=0; i<this.options.column; i++){
			var list = $$('#' + this.options.showName + ' #' + this.options.target + i + ' li a');
			list.each(function(element){
				var fx = new Fx.Styles(element, {duration:this.options.FxDuration, wait:false});
				
				element.addEvent('mouseenter', function(){
					clearTimeout(this.closetime);
					fx.start({ 'padding-left' : element.getStyle('padding-left') });
				}.bind(this));
				
				element.addEvent('mouseleave', function(){
					clearTimeout(this.closetime);
					this.closetime = setTimeout(function(){this.hide();}.bind(this), this.options.hideDelay);
					fx.start({ 'padding-left' : element.getStyle('padding-left') });
				}.bind(this));
				
			}.bind(this));
		}
	},
	
	hide: function(){
		$(this.options.showName).setStyles({'display': 'none'});
	}
});
Accomodation.implement(new Events, new Options);


var EasyLightBox = new Class({
	
	options: {
		duration: 1000,
		OverLay: 200,
		wait: false,
		img: 'img/kohchangcliffbeach_map.gif'
	},

	initialize: function(element, options){
		this.setOptions(options);
		this.elements = $(element);
		this.build();
	},
	
	build: function(){
		this.overlay = new Element('div', {
			'id': 'overlay',
			'styles': {
				'background-color': '#000',
				'width': window.getScrollWidth(),
				'height': window.getScrollHeight(),
				'opacity': 0,
				'position': 'absolute',
				'left': 0,
				'top': 0
			}
		}).inject(document.body).addEvent('click', function(){
			this.end();
		}.bind(this));
		
		this.img = new Element('img', {
			'styles': {
				'position': 'absolute',
				'border': 'solid 5px #877227',
				'left': 0,
				'top': 0,
				'display': 'none'
			}
		}).inject(document.body);
		this.attach();
		
		var progress = new Element('div', {
			'id': 'progress',
			'styles': {
				'width': 606,
				'position': 'absolute',
				'left': (window.getWidth().toInt() - 600) / 2,
				'top': (window.getHeight().toInt() - 25) / 2,
				'border': 'solid 1px #D2C17D',
				'padding': 1,
				'height': 18,
				'visibility': 'hidden'
			}
		}).inject(document.body);
		
		var bar = new Element('div', {
			'class': 'bar',
			'styles': {
				'width': 0,
				'padding-top': 3,
				'height': 15,
				'text-align': 'center',
				'font-weight': 'bold',
				'color': '#fff', //#877227
				'background-color': '#80581E'
			}
		}).inject(progress);
	},
	
	attach: function(){
		this.elements.addEvent('click', function(){
			this.start();										
		}.bind(this));
	},
	
	start: function(){
		var busy = false, loadedImages = [];
		var bar = $E('#progress .bar'), progress = $('progress'); 
		if (!busy) {
			busy = true;
			progress.setStyles({
				'visibility': 'visible',
				'left': (window.getWidth().toInt() - 600) / 2, // 650
				'top': (window.getHeight().toInt() - progress.getStyle('height').toInt()) / 2
			});
			new Asset.images(this.options.img, {
				onProgress: function(i) {
					loadedImages[i] = this;
					var percent = ((i + 1) * progress.getStyle('width').toInt()) / this.options.img.length;
					bar.setStyle('width', percent).setHTML('Loading images');
				}.bind(this),
				
				onComplete: function(){
					progress.setStyle('visibility', 'hidden');
					//progress.remove();
					busy = false;
					var fx = this.overlay.effects({duration: this.options.OverLay, transition: Fx.Transitions.Quart.easeOut});
					fx.start({
						'opacity': .85	 
					}).chain(function(){
						this.img.setProperty('src', this.options.img);
						var img = new Image();
						img.src = this.options.img;
						this.SetSize(img.width, img.height);
					}.bind(this));	
				}.bind(this)
				
			});
		}
	},
	
	SetSize: function(width, height){
		var top = (window.getHeight() - height) / 2;
		var left = (window.getWidth() - width) / 2;
		this.img.setStyles({
			'display': '',
			'top': (top < 0) ? 10 : top,
			'left': (left < 0) ? 10 : left
		});
		
		//new SmoothScroll();
	},
	
	end: function(){
		var fx = this.overlay.effects({duration: this.options.OverLay, transition: Fx.Transitions.Quart.easeOut});
		this.img.setStyle('display', 'none');
		fx.start({
			'opacity': 0	 
		});
	}
	
});

EasyLightBox.implement(new Events, new Options);