$(document).ready(function(){
	
	//mother
	helper	= $('#helper');
	
	//height of header
	header = 157;
	
	//height of half-transparent background
	bgHeight 	= $(document).height() - header;
	
	//flag - helper active?
	helperActivated = false;
	
	//related objects
	elements = {
		'col-1' : $('div#categories h1'), 	
		'col-2' : $('div#search'), 	
		'col-3' : $('div#filter') 	
	};	
	
	//animate to this
	var colsOffset = $('div.cols').offset();
	
	debug( $('div.cols').position() );
	
	if( $.browser.safari  ){
		var correction = 187;
	}else{
		var correction = 0;
	}
	
	animationTop = {
		'col-1' : parseInt(colsOffset.top) - 265 + 22 + correction, 	
		'col-2' : parseInt(colsOffset.top) - 417 + 22 + correction, 	
		'col-3' : parseInt(colsOffset.top) - 265 + 22 + correction 	
	};	
	
	debug( animationTop );

	//add helper
	helper.find('div.col').click(function(e){
		
		//build background with invisible links
		if( $('#helper-bg').length == 0 ){
 			
			$('body')
 				.append('<div id="helper-bg"/>');
 			
			$('#helper-bg')
				.height( bgHeight )
 				.hide()
 				.fadeIn(250)
 				.append('<a class="link link-1" rel="col-1" href="#"/>')
				.append('<a class="link link-2" rel="col-2" href="#"/>')
				.append('<a class="link link-3" rel="col-3" href="#"/>');
			
			//position links over cols
			helper.find('div.col').each(function(index,value){
				
				pos = $(this).offset();

				$('#helper-bg')
					.find('a[rel='+  $(this).attr('id') +']') 
					.css({
						top:	parseInt(pos.top - header),
						left:	parseInt(pos.left)
					});	
			});
			
		}
		
		//close/open helper
		if( $(this).hasClass('active') ){
			$('#helper-bg').trigger('click');
		}else{
			deactivateColumns();
			activateColumn( $(this) );
		}
		
		return false;
	});
	
	//open helper clicking on invisible link
	$('#helper-bg').find('.link').live('click', function(e){
		
		var col = $('#'+ $(this).attr('rel'));
		
		if( !col.hasClass('active') ){
			deactivateColumns();
			activateColumn( col );
		}
		
		return false;
	});
	
	//remove helper clicking on bg
	$('#helper-bg').live('click', function(e){
		
		deactivateColumns();
		$(this).fadeOut(200, function(e){
			$(this).remove();
		})
		
		return false;
	});
	
	//close button: remove helpers 
	helper.find('.close').click(function(e){
		$('#helper-bg').trigger('click');
		return false;
	});
	
	//close button: remove helpers 
	helper.find('.next').click(function(e){
		activateNext();
		return false;
	});
	
	//go to next/prev element on key events
	$(window).keydown(function(e){
		
		if( helperActivated ){
			
			switch(e.keyCode){
				
				//space, space safari, enter, key right, key down
				case 0:
				case 32 :
				case 13:
				case 39:
				case 40:
					activateNext();
					break;
				
				//backspace, key left, key up
				case 8:
				case 37:
				case 38:
					activatePrev();
					break;
				
				//esc,remve	
				case 27:
				case 46:
					$('#helper-bg').trigger('click');
					break;
				
			}
			
			return false;
			
		}
			
	});
	
});

//activate next column, pointer on last, next is first
function activateNext(){
	
	var current	= helper.find('div.col.active');
	
	if( current.hasClass('last') ){
		var next = helper.find('div.col.first');
	}else{
		var next = current.next();
	}
	
	deactivateColumns();
	activateColumn(next);
	
}

//activate prev column, pointer on first, prev is last
function activatePrev( current ){
	
	var current	= helper.find('div.col.active');
	
	if( current.hasClass('first') ){
		var prev = helper.find('div.col.last');
	}else{
		var prev = current.prev();
	}
	
	deactivateColumns();
	activateColumn(prev);
	
}

//deactivate columns
function deactivateColumns(){
	
	//helper is deactivated
	helperActivated = false;

	//remove all active classes from columns
	helper
		.find('.col.active')
		.removeClass('active')
		.stop().animate({top:0,left:0},350);

	//remove all active classes from "related" object
	$.each(elements,function(index,value){
		
		value.removeClass('active');
			
		if(value.next().hasClass('helper')){
			value.next().fadeOut(150);
		}
		
	});
	

}

//active specific column
function activateColumn( el ){
	
	pos =  $('html').position();
	
	if( pos.top < 0 ){
		$('html, body').stop().animate({scrollTop:0}, 'slow');
	}
	
	//related object
	related = eval(elements[el.attr('id')]);
	
	//margin
	valueTop = parseInt(animationTop[el.attr('id')]);
	
	//animating
	if( el.attr('id') == 'col-1' ){
		el.stop().animate({top:-valueTop,left:20},350);
	}else{
		el.stop().animate({top:-valueTop},350);
	}
	
	//helper is activated
	helperActivated = true;
	
	//add active class to column
	el.addClass('active');

	//fade in helper
	helpingText = el.find('.helper');	
	
	//add actice class to related object
	related.addClass('active');
	
	//replace helping text in DOM, fade in and remove original
	if( !related.next().hasClass('helper') ){
		related.after(function(){
			return helpingText.fadeIn(250);
		})
		el.find('.helper').remove();
	}else{
		related.next().fadeIn(250);
	}
		
}