/*



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();
		this.initSortable();
		this.initScrollingWizard();
	},
	
	handleBox: function(target,container) {
		// init autolast
		/*
		var last_top = 0;
		var last = false;
		var i = 0;
		$(document.body).getElements('.section').each(function(s) {
			s.getElements('.element').each(function(el){
				i++;
				el.addClass('last');
				var el_top = el.getCoordinates().top;
				if (el.hasClass('span-1')){
					console.log('i', el_top)
					}
				if ((el_top > last_top)) {
					if (el)  { el.removeClass('last') } 
				}
				
				if (last)

				last = el; 
				last_top = el_top;
			});
		});		
		*/
		
		document.body.getElements(target).each(function(el){
			//console.log(el.getCoordinates());
			el.store('coordinates',el.getCoordinates());
			
			if (el.hasClass('blue')) { return; }
			if (el.hasClass('noeffect')) { return; }
	
			if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   				return;
			}

			// morph opacity of the logo
			
			el.set('morph', {duration: '1000', transition: 'quart:out'});
			
			el.morph({opacity: '.85'});
			
			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: '.85'});
				}.bind(this)	
			});

			el.addEvents({
				mousedown: function(){
					el.setStyle('zIndex',this.zIndex++);
				}.bind(this)
			});
		},this);
		
	},
	
	initMasonry : function() {
		if ($('content')) {
			$('content').masonry({
				itemSelector: '.box' ,
				singleMode: true
			});
		}
	},
	
	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(); 
			});
		});
	},
	
	initSortable: function() {
		if (!$('topath').hasClass('nodrag')) {
			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); 
	},
	
	initScrollingWizard: function() {
		
		var selected = $('link1');
		
		if (!document.body.getElement('.wizard')){
			return;	
		}
		
		var scroller = new Fx.Scroll('slide-wrapper', {
			wait: false,
			duration: 1000,
			offset: {'x': 0, 'y': 0},
			transition: Fx.Transitions.Quad.easeInOut
		});
		 
		$('link1').addEvent('mouseenter', function(event) {
			event = new Event(event).stop();
			scroller.toElement('content1');
			this.addClass('selectedwiz');
			selected.removeClass('selectedwiz');
			selected = this;
		});
		 
		$('link2').addEvent('mouseenter', function(event) {
			event = new Event(event).stop();
			this.addClass('selectedwiz');
			scroller.toElement('content2');
			selected.removeClass('selectedwiz');
			selected = this;

		});
		 
		$('link3').addEvent('mouseenter', function(event) {
			event = new Event(event).stop();
			scroller.toElement('content3');
			this.addClass('selectedwiz');
			selected.removeClass('selectedwiz');
			selected = this;

		});
		 
		$('link4').addEvent('mouseenter', function(event) {
			event = new Event(event).stop();
			scroller.toElement('content4');
			this.addClass('selectedwiz');
			selected.removeClass('selectedwiz');
			selected = this;
		});
	}
});


window.addEvent('domready', function(){
		
	var site = new Site();		
	
	window.addEvent('load', function(){
		site.initMasonry();	
	});
	
});