$(document).ready(function() {

	var activator;
	var activeLayer;
	$("#nav li a").click(function() {
		if(!activeLayer) {
			$("#compNav").animate({'height':'200px'}, 400, 'easeOutExpo');
		} else {
			$(activator).fadeOut();
			$(".navActive").removeClass('navActive');
		}
		layID = $(this).parent().attr('class').split(' ')[1].split('-')[2];
		activator = "#comp-layer-"+layID;
		$(activator).fadeIn();
		$(this).parent().addClass("navActive");
		scrollComp(layID);
		activeLayer = layID;		
		if(!$(this).parent().find(".closeCompNav")[0]) {
			$(this).parent().append('<div class="closeCompNav"></div>').find(".closeCompNav").click(function() { 
				$(this).fadeOut().parent().removeClass('navActive');
				$(activator).fadeOut();
				$("#compNav").animate({'height':'1px'}, 400, 'easeOutExpo');
				activeLayer = null;
			});
		} else {
			$(this).parent().find(".closeCompNav").fadeIn();
		}
		return false;
	});
	
	var searchTerm = "";
	var jURL = $(location).attr('href').split("/")[3];
	
	if(jURL == "en") {
		searchterm = 'Search';
		$("#site-title a").attr('href','http://www.boxplan.de/en');

		$(".promo_slider_title a").each(function(i) {
			$(this).attr('href',$(this).attr('href').replace('http://www.boxplan.de','http://www.boxplan.de/en'));
		});
	} else {
		searchterm = 'Suchen';
	}
	
	if(!$("#searchform input#s").val()) {
		$("#searchform input#s").attr('value', searchterm);
		$("#searchform input#s").click(function(){
			if($("#searchform input#s").val() == searchterm) {
				$(this).attr('value','');
			}
		});
	}
		
	
	$(".promo_slider_wrapper, .home .entry-content").addClass('box');
	
	$(".entry-content h3").append('<a href="#header" title="go to top of page" class="jsToTop">to top</a>');
	$(".jsToTop").click(function() {
		$("html,body").animate({ scrollTop: 0},500,"easeOutExpo");
		return false;
	});
	
});

function scrollComp(item) {
	var scrollPane = $("#comp-layer-"+item), scrollContent = $("#comp-layer-"+item+" .comp-subsect");
    var stageW = scrollContent.find("li:first ul li:first").width()*scrollContent.find("li li").size();
    
    scrollContent.css({'width': stageW});
    
    if(stageW > 980) {
    	scrollPane.find(".cStrack").css({'display':'block'});    	
    	
    	var scrollbar = scrollPane.find(".compScroll").slider({
    		slide: function( event, ui ) {
    			if ( scrollContent.width() > scrollPane.width() ) {
    				scrollContent.css("margin-left", Math.round(
    					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
    				) + "px");
    			} else {
    				scrollContent.css("margin-left", 0 );
    			}
    		}
    	});
    	
    	var handleHelper = scrollbar.find(".ui-slider-handle")
    	.mousedown(function() {
    		scrollbar.width( handleHelper.width() );
    	})
    	.mouseup(function() {
    		scrollbar.width("100%");
    	})
    	.hover(function() {
    		handleHelper.find(".ui-icon").fadeIn('fast');
    	}, function() {    		
    		handleHelper.find(".ui-icon").fadeOut('fast');
    	})
    	.append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
    	.wrap("<div class='ui-handle-helper-parent'></div>").parent();

    	scrollPane.css("overflow", "hidden");

    	function sizeScrollbar() {
    		var remainder = scrollContent.width() - scrollPane.width();
    		var proportion = remainder / scrollContent.width();
    		var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
    		scrollbar.find(".ui-slider-handle").css({
    			width: handleSize,
    			"margin-left": -handleSize / 2
    		});
    		handleHelper.width("").width( scrollbar.width() - handleSize );
    	}
    	
    	function resetValue() {
    		var remainder = scrollPane.width() - scrollContent.width();
    		var leftVal = scrollContent.css("margin-left") === "auto" ? 0 :
    			parseInt( scrollContent.css("margin-left") );
    		var percentage = Math.round( leftVal / remainder * 100 );
    		scrollbar.slider("value", percentage );
    	}
    	
    	function reflowContent() {
    			var showing = scrollContent.width() + parseInt( scrollContent.css("margin-left"), 10 );
    			var gap = scrollPane.width() - showing;
    			if ( gap > 0 ) {
    				scrollContent.css("margin-left", parseInt( scrollContent.css("margin-left"), 10 ) + gap );
    			}
    	}
    	
    	$( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); });
    	setTimeout( sizeScrollbar, 10 );//safari wants a timeout
   
    }

}