/*

Class: UI.Interface
	The UI.Interface class let you replace default dom components by mooolego components.

Require:
	UI.Skin
	UI.Canvas
	UI.Element
	And the compinents you want to be replaced

Arguments:
	Options
	
Options: 
	target - (string) define the element container id of what you want to be replaced (nice english, is'nt it?)

Example:
	(start code)
	new UI.Interface({
		target : 'formular'
	});
	(end)
*/

var Site = new Class({
	Implements : [Options, Events],
	
	options: {
		target: 'div.element',
		container : $(document.body)
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.zIndex = '1';
		
		this.handleBox(this.options.target,this.options.container);
		this.handleLogo();
		this.handleTop();
	},
	
	handleBox: function(target,container) {
		
		
		document.body.getElements(target).each(function(el){
			//console.log(el.getCoordinates());
			el.store('coordinates',el.getCoordinates());
			
			if (el.hasClass('blue')) { return; }
			
			// morph opacity of the logo
			
			el.set('morph', {duration: '1000', transition: 'quart:out'});
			
			el.morph({opacity: '.4'});
			
			el.addEvents({
				mouseenter: function(){
					el.set('morph', {duration: '50', transition: 'quart:in'});
					el.morph({opacity: '1' });
					//el.fade(1,{duration: 2000});
				}.bind(this),
				mouseleave: function(){
					el.set('morph', {duration: '2500', transition: 'bounce:out'});
					el.morph({opacity: '.1'});
				}.bind(this)	
			});
			
			/*
			var close = new Element('div',{
				styles : {
					position : 'absolute',
					bottom:0,
					right:0,
					width: '10px',
					height: '10px',
					backgroundColor:'#000',
					opacity:'.3'
				}					
			})
			.inject(el)
			.addEvents({
				click: function(){
					el.destroy();
					el.setStyle('display','none');
				}
			});
			*/
			el.addEvents({
				mousedown: function(){
					el.setStyle('zIndex',this.zIndex++);
				}.bind(this)
			});
			
			
			
			this.dragHandler = new Drag(el, {
				limit: {
					x: '1000',
					y: '1000'
				},
				onStart: function() {
					
				},
				onDrag: function() {
				},
				onComplete: function() {
					el.setStyles({
						left :	el.retrieve('coordinates').left,
						top :	el.retrieve('coordinates').top
					});
				}
			});
		},this);
	},
	
	handleLogo: function() {
		var logo = $('logo');
		logo.set('morph', {duration: '1000', transition: 'quart:out'});
		logo.morph({opacity: '1'});	
		
		logo.addEvents({
			mouseenter: function(){
				logo.set('morph', {duration: '1250', transition: 'bounce:out'});
				logo.morph({opacity: '.1'});
				//el.fade(1,{duration: 2000});
			}.bind(this),
			mouseleave: function(){
				logo.set('morph', {duration: '50', transition: 'quart:out'});
				logo.morph({opacity: '1'});
			}.bind(this)	
		});
		
		
		
	},
	handleTop: function() {
		var myfx = new Fx.Scroll(window);
		$(document.body).getElements('.topofpage').each(function(el){											
			addEvent('click',function() { 
				myfx.toTop(); 
			});
		});
	}
});


window.addEvent('domready', function(){
	var site = new Site();		
	
	this.sortableElements = new Sortables($(document.body).getElements('.section'), {
   		constrain: false,
    	clone: true,
		opacity: '.3',
    	revert: true/*,
    	onStart : function() { this.selector.hide(); }.bind(this),
    	onSort : function() { this.selector.show(); this.selector.select(); }.bind(this),
		onComplete : function() { this.selector.show(); this.selector.select(); }.bind(this)*/
	});	
	
	var smoothscroll = new SmoothScroll({ duration: '700' }, window); 
});