'use strict';

if (typeof App === 'undefined')
	var App = {};
if (!App.Helper) 
	App.Helper = {};
if (!App.Layout) 
	App.Layout = {};

App.start = function (new_opts) {
	
	App.opts = {
		scroll_time: 0.5
	};

	App.opts = Object.extend(App.opts, new_opts || {});

	App.initAutoclears();
	App.Layout.initWheel();
	App.Layout.initHints();
	App.Layout.initScrolling();
	App.initMessages();
	window.onload = function() {
		// images in the slider must be loaded because
		// element dimensions must be known
		App.Layout.initSlider();
	};
	App.Layout.fixIE8fonts();
};

App.initMessages = function () {
	
	$('send_message') && setTimeout(function () {
		$('send_message').blindUp({ duration: 0.3 });
	}, 7000);

};

App.initAutoclears = function () {

	$$('input.autoclear').each(function (el) {
		App.Helper.Autoclear(el);
	});

};

App.Layout.initSlider = function () {

	var slider = $('slider');
	var slides = $('slider').select('li');
	var control = $$('.slider_c');
	var dim = slider.up().getLayout().get('width');

	var active = Math.floor(slides.length/2);

	$('slider').select('li').each(function (el, index) {
		el.centerOffset = el.positionedOffset().left + el.getLayout().get('width')/2;
		el.indic = new Element('li');
		$('slider_indic').insert({ bottom: el.indic });

		el.indic.observe('click', function (event) {
			moveSlider(index-active);
		});
	});

	var setOpacity = function () {

		slides.each(function (el) {
			el.removeClassName('active').removeClassName('l2');
		});

		slides[active].addClassName('active');
		if(typeof slides[active-1] != 'undefined')
			slides[active-1].addClassName('l2');
		if(typeof slides[active+1] != 'undefined')
			slides[active+1].addClassName('l2');
	};


	slider.setStyle({ 'left': -slides[active].centerOffset + dim/2 + 'px' });
	slides[active].indic.addClassName('active');
	setOpacity();

	var moveSlider = function (dir) {
		if(typeof slides[active+dir] === 'undefined')
			return;

		var upd = -slides[active+dir].centerOffset + dim/2;
		var cur = slider.getLayout().get('left');
		new Effect.Tween(slider, cur, upd, 
		{
			duration: 0.3
		},
		function (p) { 
			slider.setStyle({ 'left': p + 'px' });
		});		

		slides[active].indic.removeClassName('active');
		slides[active+dir].indic.addClassName('active');
		active = active + dir;

		setOpacity();
	}

	control.each(function (el) {
		el.observe('click', function (event) {
			if(this.readAttribute('id') === 'slider_l') {
				moveSlider(-1);
			}
			else {
				moveSlider(1);
			}
		});
	});

};

App.Layout.fixIE8fonts = function () {

	if ((/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 8 ? true : false) : false)
		document.body.select('*').each(function (el) {
			if(el.getStyle('font-weight') === '700') {			
				var tmpf = el.getStyle('font-family');
				el.setStyle({
					'fontFamily': 'GillB,'+tmpf
				});
			}
		});
};

App.Layout.initScrolling = function () {
	var rmores = $$('.rmore');
	var totops = $$('.totop');
	
	rmores.each(function (el) {
		el.cl = el.readAttribute('data-target');
		el.text = $$('article.'+el.cl).first();
		
		el.observe('click', function(event) {
			el.text && Effect.ScrollTo(el.text, { 
				duration: App.opts.scroll_time, 
				offset: -40 
			});
		});
		
	totops.each(function (el) {
		el.observe('click', function(event) {
			Effect.ScrollTo($('wrap'), { 
				duration: App.opts.scroll_time
			});			
			event.preventDefault();
		});
	});
	
		
	});
}

App.Layout.initHints = function () {

	var updatePos = function (el, event) {
		el.setStyle({
			left: Event.pointerX(event) + 15 + 'px',
			top: Event.pointerY(event) + 25 + 'px'
		});
	}

	var els = $$('.hinted');
	els.each(function (el) {
		el.hint = el.readAttribute('alt') || el.readAttribute('title');
		el.hintbox = new Element('span', {'class': 'hintbox'}).update(el.hint).hide();
		document.body.insert(el.hintbox);
		
		el.observe('mouseover', function (event) {
			updatePos(el.hintbox, event);
			el.writeAttribute('title', '');
			el.hintbox.show();
		});
		
		el.observe('mousemove', function (event) {
			updatePos(el.hintbox, event);
		});		
		
		el.observe('mouseout', function (event) {
			el.hintbox.hide();
			el.writeAttribute('title', el.hint);
		});
	});
	
};

App.Layout.initWheel = function () {

	var center = $('wheel_center');
	var lis = center.select('li');
	var icons = center.select('li img');
	var descs = $('descriptions').select('li');
	descs.without(descs[2]).invoke('hide');
	
	var angle = 0;
	
	var rotate = function () {
		center.setStyle('-moz-transform: rotate(' + angle + 'deg)')
			.setStyle('-webkit-transform: rotate(' + angle + 'deg)')
			.setStyle('-o-transform: rotate(' + angle + 'deg)')
			.setStyle('-ms-transform: rotate(' + angle + 'deg)')
			.setStyle('transform: rotate(' + angle + 'deg)');
				
		icons.each(function (el) {
			var angle_fix = -angle;
			el.setStyle('-moz-transform: rotate(' + angle_fix + 'deg)')
				.setStyle('-webkit-transform: rotate(' + angle_fix + 'deg)')
				.setStyle('-o-transform: rotate(' + angle_fix + 'deg)')
				.setStyle('-ms-transform: rotate(' + angle_fix + 'deg)')
				.setStyle('transform: rotate(' + angle_fix + 'deg)');		
		}.bind(this));
	};
	
	var swapDescription = function (id) {
		var index = -1;
		
		if(id == 'q3') 			index = 2;
		else if(id == 'q4') 	index = 3;
		else if(id == 'q2') 	index = 1;
		else if(id == 'q1')		index = 0;
		
		descs.invoke('hide');
		descs[index].appear();
	};
	
	$$('.wheel_control').each(function (el) {
		el.observe('click', function(event) {
			event.preventDefault();
			if(el.readAttribute('id') == 'wheel_r')
				angle = angle + 90;
			else
				angle = angle - 90;
				
			var pos = (angle/90)%4;			
			(pos == -1) && (pos = 3);
			(pos == -3) && (pos = 1);
			pos = Math.abs(pos);

			lis.invoke('removeClassName', 'active');
			if(pos == 0) {
				$('q3').addClassName('active');				
				swapDescription('q3');
			}
			else if(pos == 1) {
				$('q4').addClassName('active');				
				swapDescription('q4');
			}
			else if(pos == 2) {
				$('q2').addClassName('active');				
				swapDescription('q2');
			}
			else if(pos == 3) {
				$('q1').addClassName('active');				
				swapDescription('q1');
			}
			rotate();
			
		});
	});

	icons.each(function (el) {
			
		// order of elements is different than real angle order,
		// need to swap indexes
		var id = el.up().readAttribute('id');
		
		if(id == 'q1')
			el.index = 0;			
		else if(id == 'q2')
			el.index = 1;			
		else if(id == 'q3')
			el.index = 3;			
		else if(id == 'q4')
			el.index = 2;

		el.observe('click', function(event) {					
			lis.invoke('removeClassName', 'active');
			el.up().addClassName('active');		

			var position = (angle/90)%4;
			var diff = (position+el.index)%4;
			
			if(diff == 0)
				angle = angle-90;
			else if(diff != 3)
				angle = angle+(3-diff)*90;
				
			rotate();			
			swapDescription(el.up().readAttribute('id'));
		}.bind(this))
	});
};