/**
 * @author frukt
 */

/** Delay before popup is opened (ms). **/
var popupDelay = 800;
/** Time of transition in effect (ms). **/
var transInTime = 400;
/** Time of transition out effect (ms). **/
var transOutTime = 400;

var elementId = 0;
var wPos = {}, wSize = {}; pPos = {}, cPos = {}, pSize = {}, cSize = {}, pMedian = {}, cMedian = {};
var imageCount = 0, loadedImages = 0;

/** initSplash not used due to troubles getting 'load' event of images. Initiating effects bound to window.load event **/
function initSplash(){
	/** get count of images in the splash area **/
	imageCount = jQuery('div.images img').length;
	/** bind load event to all of them, to get their loaded/not loaded status **/
	jQuery('div.images img').bind('load', function(){
		loadedImages++;
		/** when all images are loaded, set size of every hot-area according to size of image and call initEffects **/
		if (loadedImages == imageCount){
			jQuery('div.hot-area a').each(function(){
				id = jQuery(this).attr('class');
				jQuery(this).css({
					'width': jQuery('div.images').children('.'+id).width() + 'px',
					'height': jQuery('div.images').children('.'+id).height() + 'px'
				});
			});
			initEffects();
		}
	});
}

function initEffects(){

	// define element selectors as variables
	wrapper = '.wrapper';
	images = '.images img';
	hotarea = '.hot-area';
	popups = '.popups';

	jQuery(hotarea).children('a').each(function(){
		id = jQuery(this).attr('class');
		jQuery(this).css({
			'width': jQuery('div.images').children('.'+id).width() + 'px',
			'height': jQuery('div.images').children('.'+id).height() + 'px'
		});
	});


	// get wrapper's position
	wPos = jQuery(wrapper).offset();
	wSize.width = jQuery(wrapper).width();
	wSize.height = jQuery(wrapper).height();
	// get all images and do stuff
	jQuery(images).each(function(item){

		element = jQuery(this).attr('class');
		popup = jQuery(popups).children('#'+element);
		trigger = jQuery(hotarea).children('.'+element);

		jQuery(trigger).data('state', 'closed');

		pGetPos = {
			'left': jQuery(this).offset().left - wPos.left,
			'top': jQuery(this).offset().top - wPos.top
		}

		pGetSize = {
			'width': jQuery(this).width(),
			'height': jQuery(this).height()
		}

		pGetMedian = {
			'x': jQuery(this).width()/2 + pGetPos.left,
			'y': jQuery(this).height()/2 + pGetPos.top
		}

		cAlignment = {
			'horizontal': (pGetMedian.x < wSize.width/2 ? 'left' : 'right'),
			'vertical': (pGetMedian.y < wSize.height*0.33 ? 'top' : (pGetMedian.y >= wSize.height*0.33 && pGetMedian.y <= wSize.height*0.66) ? 'middle' : 'bottom')
		}

		switch(cAlignment.horizontal){
			case 'left':
				jQuery(popup).css({
					'left': '-20px'
				});
				break;
			case 'right':
				jQuery(popup).css({
					'right': '-20px'
				});
				break;
			default:
				break;
		}

		switch(cAlignment.vertical){
			case 'top':
				jQuery(popup).css({
					'top': (pGetPos.top + pGetSize.height + 10) + 'px',
					'display': 'none',
					'visibility': 'visible',
					'opacity': 0,
					'margin-top': '100px'
				});
				jQuery(trigger).bind('mouseenter', transSlideInUp).bind('mouseleave', transSlideOutUp);
				break;
			case 'middle':
				jQuery(popup).css({
					'top': (pGetPos.top + pGetSize.height + 10) + 'px',
					'display': 'none',
					'visibility': 'visible',
					'opacity': 0,
					'margin-top': '100px'
				});
				jQuery(trigger).bind('mouseenter', transSlideInUp).bind('mouseleave', transSlideOutUp);
				break;
			case 'bottom':
				jQuery(popup).css({
					'bottom': (pGetSize.height + 10) + 'px',
					'display': 'none',
					'visibility': 'visible',
					'opacity': 0,
					'margin-bottom': '100px'
				});
				jQuery(trigger).bind('mouseenter', transSlideInDown).bind('mouseleave', transSlideOutDown);
				break;
			default:
				break;
		}
	});
	jQuery('div.wrapper .preloader').animate({'opacity': 0}, transOutTime, function(){
		jQuery(this).remove();
	});
}

function transSlideInUp(){
	var id = jQuery(this).attr('class');
	jQuery(this).data('state', 'open');
	jQuery(this).animate({opacity: 1}, popupDelay, function(){
		if (jQuery(this).data('state') == 'open') {

			jQuery('#'+id).css({
				'display': 'block',
				'margin-top': '100px'
			}).animate({
				marginTop: '0',
				opacity: 1
			}, transInTime, function(){

				if (jQuery(hotarea).children('.'+id).data('state') == 'closed') {
					jQuery(hotarea).children('.'+id).trigger('mouseleave');
				}
			});
		}
	});
}

function transSlideInDown(){

	var id = jQuery(this).attr('class');
	jQuery(this).data('state', 'open');
	jQuery(this).animate({opacity: 1}, popupDelay, function(){

		if (jQuery(this).data('state') == 'open') {

			jQuery('#'+id).css({
				'display': 'block',
				'margin-bottom': '100px'
			}).animate({
				marginBottom: '0',
				opacity: 1
			}, transInTime, function(){
				if (jQuery(hotarea).children('.'+id).data('state') == 'closed') {
					jQuery(hotarea).children('.'+id).trigger('mouseleave');
				}
			});
		}
	});
}

function transSlideOutUp(){
	var id = jQuery(this).attr('class');
	jQuery(this).data('state', 'closed');
	jQuery('#'+id).animate({
		marginTop: '-100px',
		opacity: 0
	}, transOutTime, function(){
		jQuery(this).css({'display': 'none', 'margin-top': '100px'});
	});
}

function transSlideOutDown(){
	var id = jQuery(this).attr('class');
	jQuery(this).data('state', 'closed');
	jQuery('#'+id).animate({
		marginBottom: '-100px',
		opacity: 0
	}, transOutTime, function(){
		jQuery(this).css({'display': 'none', 'margin-bottom': '100px'});
	});
}