var App = Class.create();
App.prototype = {
	initialize: function() {
		// FEAT DESIGN
		this.switcher = $$('.switcher li');
		this.wrap = $$('.designs')[0];
		this.design = $$('.designs li');
		this.info = $('design_info');
		this.active_index = 1;
		this.height = 100; // info height
		this.visible = false; // info visible
		
		$$('.frame_featured .frame_inner')[0].observe('click', function(event) {
			this.openBox(event);
		}.bind(this));
		
		//SWITCH BETWEEN DESIGNS
		this.switcher.each(function(el){
			el.observe('click', function(event) {
				this.doSwitch(el.previousSiblings().size()+1);
				this.switcher.each(function(el) {
					el.removeClassName('active');
				});
				el.addClassName('active');
			}.bind(this));								
		}.bind(this));
		this.doSwitch(1);

		// SHOW INFO BLOCK ON HOVER
		$$('.frame_featured')[0].observe('mouseleave', this.toggleInfo.bind(this)).observe('mouseenter', this.toggleInfo.bind(this));							

		// CONTACT
		this.area = $$(".contactform textarea")[0];
		this.dummy = $$(".contactform .dummy")[0];
		this.mail = $("e-mail");
		this.mail_wrapper = $$(".input_wrapper")[0];

		// RESIZE CONTACT FORM
		this.resizeIt(this.area);
		this.area.observe('click', function(event) {this.resizeIt(this.area)}.bind(this))
					.observe('keyup', function(event) {this.resizeIt(this.area)}.bind(this))
						.observe('changed', function(event) {this.resizeIt(this.area)}.bind(this));
		
		// CLOSE MESSAGES
		$$('.messages li').length && setTimeout("$$('.messages')[0].slideUp()", 5000);

		// SCROLLER
		$$('.toWrite')[0].observe('click', function(event) {
			event.preventDefault();
			Effect.ScrollTo($$('h2.writeme')[0], { duration:'0.8', offset:-20 });
		});
	},
	openBox: function(event) {
			if(Event.element(event).hasClassName('button'))
				return;
			var link = this.wrap.select('.button')[this.active_index-1].readAttribute('rel');
			new Funbox(link).show();
	},
	doSwitch: function(index) {
		this.active_index = index;
		var offset = this.wrap.getLayout().get('margin-left');
		new Effect.Tween(this.wrap, offset, -(index-1)*398+4, { duration: 0.4, transition: Effect.Transitions.sinoidal}, function (h) {
			this.setStyle({ 'marginLeft': h + 'px' });
		});	

		var descr = this.design[index-1].select('.featured_descr')[0].clone(true);
		var active = this.info.select('.featured_descr')[0];
		active && active.remove();
		this.info.insert(descr);
	},
	toggleInfo: function() {
		// var info_height = this.info.getLayout().get('height');
		// new Effect.Tween(this.info, info_height, this.visible ? 0 : this.height, { duration: 0.2, transition: Effect.Transitions.sinoidal}, function (h) {
		// 	this.setStyle({ 'height': h + 'px' });
		// });									
		// this.visible = this.visible ? false : true;					
		this.info.toggleClassName('visible');
	},
	resizeIt: function(el, ev) {					
		this.dummy.update(el.value.replace(/\n/g, '<br/>&#8203;'));
		var dheight = this.dummy.getLayout().get('height')+30;
		var boxheight = this.area.getLayout().get('height');
		if(boxheight!=dheight) {									
			new Effect.Tween(el, boxheight, dheight, { duration: 0.2}, function (h) {
				this.setStyle({ height: h + 'px' });
			});								
		}
	},
};