var cbs;// Call Back Service

window.addEvent('domready', function(){
	// alert('domready');
	$$('input.checkbox').each(function(el, i){var cb = new Checkbox(el);});
	cbs = new Overlay('cbs', 'callbackservice');
	$$('.cbs').each(function(el, i){cbs.addTrigger(el);});
	if (document.id('slideshow')) var ss = new Slideshow('slideshow', 'stage');
	$$('a.hover').each(function(el, i){var cb = new Hoverlay(el);});
});

function sendRequest(input)
{
	var form	= input.getParent('form');
	var data	= '';
	var d		= 0;
	
	form.getElements('input').each(function(el, i){
		switch (el.get('type')) {
			case 'checkbox':
				var checked = (el.checked) ? 1 : 0;
				if (d > 0) data += '&';
				data += el.get('name') + '=' + checked;
				d++;
			break;
			case 'text':
				if (d > 0) data += '&';
				data += el.get('name') + '=' + el.get('value');
				d++;
			break;
			default:
				return;
		}
	});
	
	var req = new Request({
		url:			form.get('action'),
		method:			form.get('method'),
		data:			data,
		onSuccess:		function(responseText, responseXML){
			var response	= responseXML.firstChild;
			var code		= response.getElementsByTagName('code')[0].firstChild.nodeValue;
			var message		= response.getElementsByTagName('message')[0].firstChild.nodeValue;
			alert(unescape(message));
			
			if (code == 1) cbs.close();
		},
		onFailure:		function(xhr){
			alert(xhr);
		}
	}).send();
}

var Hoverlay = new Class({

	Implements: [Events, Options],

	options: {
		style:			'hover'
	},

	initialize: function(element, options){
		this.element	= document.id(element);
		this.setOptions(options);
		
		this.document	= this.element.getDocument();
		var img			= this.element.getElement('img.' + this.options.style);
		var div			= this.element.getElement('div.' + this.options.style);
		
		if (img == null || div == null) return;
		
		this.container	= new Element('div', {'class': this.options.style + '-container'}).setStyles({
			'position':		'absolute',
			'left':			0,
			'top':			0,
			'z-index':		1000,
			'opacity':		0
		}).inject(this.document.body);
		
		var header		= new Element('div', {'class': 'header'}).setStyle('background-image', 'url(' + img.get('src') + ')').appendText(this.element.get('title')).inject(this.container);
		var footer		= new Element('div', {'class': 'footer'}).set('html', div.get('html')).inject(this.container);
		
		this.element.addEvents({
			'mouseenter':	this.show.bind(this),
			'mouseleave':	this.hide.bind(this)
		});
		
		this.container.addEvents({
			'mouseenter':	function(){this.element.fireEvent('mouseenter')}.bind(this),
			'mouseleave':	function(){this.element.fireEvent('mouseleave')}.bind(this)
		});
	},
	
	getCoordinates: function(src, target){
		var pos		= src.getPosition();
		var size	= target.getSize();
		var left	= pos.x + 0.5 * src.getSize().x - 0.5 * size.x;
		var top		= pos.y - size.y + 10;
		
		return {
			'left':		(left > 0) ? left : 0,
			'top':		(top > 0) ? top : 0
		};
	},
	
	show: function(){
		this.container.setStyle('opacity', 1);
		this.container.setStyles(this.getCoordinates(this.element, this.container));
	},
	
	hide: function(){
		this.container.setStyle('opacity', 0);
	}

});

var Overlay = new Class({

	Implements: [Events, Options],

	options: {
		style:			'overlay',
		duration:		500,
		link:			'cancel',
		transition:		'sine:in:out',
		overlay:		true,
		background:		'#000',
		opacity:		0.7
	},

	initialize: function(element, target, options){
		this.element	= document.id(element).addEvent('click', this.open.bind(this));
		this.target		= document.id(target);
		this.setOptions(options);
		
		this.document	= this.element.getDocument();
		this.opened		= false;
		this.ready		= true;
		
		if (this.options.overlay) {
			this.backdrop	= new Element('div', {'class': this.options.style + '-backdrop'}).setStyles({
				'position':			'absolute',
				'left':				0,
				'top':				0,
				'width':			'100%',
				'height':			'100%',
				'z-index':			999,
				'opacity':			0,
				'background-color':	this.options.background
			}).set('morph', {
				'duration':			this.options.duration,
				'link':				this.options.link,
				'transition':		this.options.transition
			}).inject(this.document.body);
			
			this.backdrop.addEvent('click', this.close.bind(this));
		}
		
		this.container	= new Element('div', {'class': this.options.style + '-container'}).setStyles({
			'position':		'absolute',
			'left':			0,
			'top':			0,
			'overflow': 	'hidden',
			'z-index':		1000,
			'opacity':		0
		}).set('morph', {
			'duration':		this.options.duration,
			'link':			this.options.link,
			'transition':	this.options.transition
		}).inject(this.document.body);
		
		this.container.grab(this.target.setStyle('display', 'block'));
		
		this.togglePos	= {};
		this.toggleSize	= this.container.getSize();
		
		this.add_events();
	},
	
	add_events: function(){
		window.addEvents({
			'resize': function(e){
				if (!this.opened) return;
				
				this.zoomIn();
			}.bind(this),
			'scroll': function(e){
				if (!this.opened) return;
				
				this.zoomIn();
			}.bind(this)
		});
	},
	
	getCoordinates: function(el){
		var coords	= el.getCoordinates();
		
		return {
			'width':	(coords.width > 0) ? coords.width : 0,
			'height':	(coords.height > 0) ? coords.height : 0,
			'left':		coords.left,
			'top':		coords.top
		};
	},
	
	getOpenClosePos: function(el){
		this.togglePos = (el.getFirst()) ? this.getCoordinates(el.getFirst()) : this.getCoordinates(el);
		
		return this.togglePos;
	},
	
	open: function(){
		if (this.opened) return;
		
		this.container.setStyles(this.getOpenClosePos(this.element));
		
		this.zoomIn();
	},
	
	close: function(){
		if (!this.opened) return;
		
		this.zoomOut.bind(this).delay(this.options.duration);
	},
	
	zoomIn: function(){
		if (!this.ready) return;
		this.ready	= false;
		
		var left	= (window.getWidth() / 2) - (this.toggleSize.x / 2) + window.getScrollLeft();
		var top		= (window.getHeight() / 2) - (this.toggleSize.y / 2) + window.getScrollTop();
		
		this.container.set('morph', {'onComplete': this.onOpen.bind(this)});
		this.container.morph({
			'width':		this.toggleSize.x,
			'height':		this.toggleSize.y,
			'left':			(left > 0) ? left : 0,
			'top':			(top > 0) ? top : 0,
			'opacity':		1
		});
		
		if (this.options.overlay) {
			this.backdrop.setStyles({
				'left':		window.getScrollLeft(),
				'top':		window.getScrollTop()
			});
			
			this.backdrop.morph({'opacity': this.options.opacity});
		}
	},
	
	zoomOut: function(){
		if (!this.ready) return;
		this.ready	= false;
		
		this.container.set('morph', {'onComplete': this.onClose.bind(this)});
		this.container.morph({
			'width':		this.togglePos.width,
			'height':		this.togglePos.height,
			'left':			this.togglePos.left,
			'top':			this.togglePos.top,
			'opacity':		0
		});
		
		if (this.options.overlay) {
			this.backdrop.morph({'opacity': 0});
		}
	},
	
	onOpen: function(){
		this.container.setStyle('opacity', 1);
		
		this.opened	= true;
		this.ready	= true;
	},
	
	onClose: function(){
		this.container.setStyle('opacity', 0);
		
		this.opened	= false;
		this.ready	= true;
	},
	
	addTrigger: function(el){
		document.id(el).addEvent('click', function(){
			this.element.fireEvent('click');
		}.bind(this));
	}

});

var Slideshow = new Class({

	Implements: [Events, Options],

	options: {
		period:	5000
	},

	initialize: function(element, target, options){
		this.element	= document.id(element);
		this.elements	= this.element.getElement('ul').getElements('li');
		this.interval	= null;
		this.loaded		= true;
		this.selected	= 0;
		this.target		= document.id(target);
		this.setOptions(options);
		
		this.elements.each(function(el, i){
			var a = el.getElement('a').addEvent('click', this.select.bind(this, i));
			// first-child
			if (i == 0) this.select(i);
		}, this);
	},
	
	random: function(){
		if (!this.loaded) return;
		
		var rnd = this.selected + 1;
		this.select((rnd < this.elements.length) ? rnd : 0);
	},
	
	select: function(i){
		if (!this.loaded) return;
		this.loaded = false;
		
		this.elements[this.selected].removeClass('selected');
		this.selected = i;
		this.elements[this.selected].addClass('selected');
		
		var rel = this.elements[this.selected].getElement('a').get('rel');
		new Asset.image(rel, {onload: this.setsource.bind(this, rel)});
		
		this.interval = $clear(this.interval);
	},
	
	setsource: function(src){
		this.loaded = true;
		
		this.target.setStyle('background-image', 'url(' + src + ')');
		
		this.interval = this.random.delay(this.options.period, this);
	}

});

var Checkbox = new Class({
	
	Implements: [Events, Options],
	
	options: {
		css:	['checkbox', 'checked']
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		this.element	= $(element).set('opacity', 0.000001);
		
		this.container	= new Element('span', {'class': this.options.css[0]}).replaces(this.element);
		this.label		= new Element('label', {'class': this.options.css[0]}).inject(this.container).grab(this.element);
		
		this.attach();
		this.setstate();
	},
	
	attach: function(){
		this.element.addEvent('click', this.setstate.bind(this));
	},
	
	setstate: function(){
		if (this.element.checked) {
			this.label.addClass(this.options.css[1]);
		} else {
			this.label.removeClass(this.options.css[1]);
		}
	}
	
});

/*
---

script: Assets.js

description: Provides methods to dynamically load JavaScript, CSS, and Image files into the document.

license: MIT-style license

authors:
- Valerio Proietti

requires:
- core:1.2.4/Element.Event
- /MooTools.More

provides: [Assets]

...
*/

var Asset = {

	javascript: function(source, properties){
		properties = $extend({
			onload: $empty,
			document: document,
			check: $lambda(true)
		}, properties);

		var script = new Element('script', {src: source, type: 'text/javascript'});

		var load = properties.onload.bind(script), 
			check = properties.check, 
			doc = properties.document;
		delete properties.onload;
		delete properties.check;
		delete properties.document;

		script.addEvents({
			load: load,
			readystatechange: function(){
				if (['loaded', 'complete'].contains(this.readyState)) load();
			}
		}).set(properties);

		if (Browser.Engine.webkit419) var checker = (function(){
			if (!$try(check)) return;
			$clear(checker);
			load();
		}).periodical(50);

		return script.inject(doc.head);
	},

	css: function(source, properties){
		return new Element('link', $merge({
			rel: 'stylesheet',
			media: 'screen',
			type: 'text/css',
			href: source
		}, properties)).inject(document.head);
	},

	image: function(source, properties){
		properties = $merge({
			onload: $empty,
			onabort: $empty,
			onerror: $empty
		}, properties);
		var image = new Image();
		var element = document.id(image) || new Element('img');
		['load', 'abort', 'error'].each(function(name){
			var type = 'on' + name;
			var event = properties[type];
			delete properties[type];
			image[type] = function(){
				if (!image) return;
				if (!element.parentNode){
					element.width = image.width;
					element.height = image.height;
				}
				image = image.onload = image.onabort = image.onerror = null;
				event.delay(1, element, element);
				element.fireEvent(name, element, 1);
			};
		});
		image.src = element.src = source;
		if (image && image.complete) image.onload.delay(1);
		return element.set(properties);
	},

	images: function(sources, options){
		options = $merge({
			onComplete: $empty,
			onProgress: $empty,
			onError: $empty,
			properties: {}
		}, options);
		sources = $splat(sources);
		var images = [];
		var counter = 0;
		return new Elements(sources.map(function(source){
			return Asset.image(source, $extend(options.properties, {
				onload: function(){
					options.onProgress.call(this, counter, sources.indexOf(source));
					counter++;
					if (counter == sources.length) options.onComplete();
				},
				onerror: function(){
					options.onError.call(this, counter, sources.indexOf(source));
					counter++;
					if (counter == sources.length) options.onComplete();
				}
			}));
		}));
	}

};