var debug=false;
  var openElement;


  $(document).ready(function(){
	$("#navigate").css('overflow', 'hidden');
	hideAnimationContents();
	addClickTriggerForDetails();
	addMouseTriggerForMove();

  });





 function hideAnimationContents()
 {
	$('.contentpos').css({height:0, minHeight: 0, overflow:'hidden', paddingTop:0});
	openElement = null;
 }


 function addClickTriggerForDetails() {
	$(".click_open").click(function(event) {
		event.preventDefault();
		enableOpen($(this));
	});
 }
 function addMouseTriggerForMove() {
  $("#navigate").mousemove(
  	function(event){
		moveElement($(this), event);
 	});
 }


function moveElement(_this, event){

	
	event.preventDefault();
  	var x = event.pageX - _this.offset().left;
	var y = event.pageY - _this.offset().top;

	var nwidth =  $("#navigate").width();
	var bgwidth =  $("#bg").width();

        var percent = (x * 100) / nwidth;
	var x_neu = (percent * bgwidth) / 100;
        var left = parseInt(x - x_neu);

	moveElementByLeft(left, 10);
}


function moveElementByLeft(left, durationTime)
{
	var nwidth =  $("#navigate").width();
	var bgwidth =  $("#bg").width();
	if(debug == true)
	{
  		$("#status").text(" Nav Breite: " + nwidth + " BG Breite: " + bgwidth + " Left: " + left);
	}
        if(left < (nwidth-bgwidth)+15) left = (nwidth-bgwidth)+15;
        if(left > 0) left = 0;
        $('#bg').stop().animate(
		{left:"" + left + "px"},
		{duration: durationTime}
	)

}

function enableOpen(_this) {
	_this.unbind().click(function(event) { event.preventDefault(); });// once the button is pressed, disable any further action
	var line = _this.parent();
	openContent(line);
}

function enableClose(_this) {
	_this.unbind().click(function(event) { event.preventDefault(); });// once the button is pressed, disable any further action
	var line = _this.parent();
 	closeContent(line);
}

function openContent(line)
{
	if(openElement != null)
	{
		var line2 = openElement.parent();
		closeContent(line2);
	}
	var height = line.find('.contentpos').height();
	var imgheight = line.find('.left').height();
	var maxheight = Math.max(height, imgheight)+10;




	var x = parseInt(line.css("margin-left"));

	var nwidth =  $("#navigate").width();
	var bgwidth =  $("#bg").width();

        var percent = (x * 100) / bgwidth;
	var x_neu = (percent * nwidth) / 100;
        var left = parseInt(x_neu - x);

        if(percent>50)
        	left -= line.width()/2;
        else
        	left += line.width()/2;
	moveElementByLeft(left);


	$("#navigate").unbind().mousemove(function(event) { event.preventDefault(); });



	line.find('.contentpos').css({height: 0 }).animate( {height: maxheight , minHeight: imgheight, paddingTop:10 }, 250, function() {
		$(this).css({overflow:'hidden'});
		openElement=$(this);
        	line.find('.click_open').unbind().click(function(event) {
			event.preventDefault();
			enableClose($(this));
		});
	});

}


function closeContent(line)
{
	line.find('.contentpos').animate( {height: 0, minHeight: 0, paddingTop:0}, 250, function(){
		$(this).css({overflow:'hidden'});
		openElement=null;
		line.find('.click_open').click(function(event) {
			event.preventDefault();
			enableOpen($(this));
		});
	});

	$("#navigate").mousemove(function(event){ moveElement($(this), event); });



}