//fix IE default Image dragging behaviour
document.ondragstart = function () { return false; }; 

var erwinbauer = {};
erwinbauer.padding = 10;
//erwinbauer.easeOutFactor = 20;
//erwinbauer.topSpeed = 50;
erwinbauer.framerate = 30;
erwinbauer.panDurationInMilliseconds = 3000;
erwinbauer.easing = function(t) { //surjective function [0, 1](time) -> [0, 1](space)
	return (t==1) ? 1 : - Math.pow(Math.E, -10 * t) + 1;
}
erwinbauer.panIntervalInMilliseconds = 1000 / erwinbauer.framerate;

erwinbauer.gotoPath = function(path){
	erwinbauer.gotoScreen(path.pageId, path.parameters);
}
/*
 * Tells the screen to move from one page to the other. 
 * pageId is the div id of the page to display
 * parameters send parameters to the page if dynamic
*/
erwinbauer.gotoScreen = function(pageId, parameters){

	erwinbauer.wasManuallyDragged = false;
	
	erwinbauer.currentPageId = pageId;
	erwinbauer.parameters = parameters;
	erwinbauer.activatedElement = this;
	
	var element = $(pageId);
	erwinbauer.offsetLeft = Math.max(20, (document.viewport.getWidth()-parseInt(element.getStyle('width')))/2);
	erwinbauer.offsetTop = Math.max(20, (document.viewport.getHeight()-parseInt(element.getStyle('height')))/2);
	

	erwinbauer.canvas = $('canvas');
	
	if(element==null)
		return;
	
	//var offset = Element.cumulativeOffset(element);
	erwinbauer.targetPosition = {top: -element.offsetTop+erwinbauer.offsetTop, left: -element.offsetLeft+erwinbauer.offsetLeft};
	erwinbauer.currentPosition  = Element.cumulativeOffset(erwinbauer.canvas);
	
	//if another interval still exists then remove it...memory issues otherwise
	if(erwinbauer.panInterval!=null)
		window.clearInterval(erwinbauer.panInterval);
		
	erwinbauer.startPosition = Object.clone(erwinbauer.currentPosition);
	erwinbauer.timer = 0;
	
	erwinbauer.panInterval = window.setInterval(erwinbauer.panToScreen, erwinbauer.panIntervalInMilliseconds);
	
	//erwinbauer.loadPage($(erwinbauer.currentPageId+"Container"), "work", {index:2});
}

erwinbauer.panToScreen = function(){
	var startTop = erwinbauer.startPosition.top;
	var startLeft = erwinbauer.startPosition.left;
	var endTop = erwinbauer.targetPosition.top;
	var endLeft = erwinbauer.targetPosition.left;
	var timerPosition = erwinbauer.timer / erwinbauer.panDurationInMilliseconds;
	
	erwinbauer.wasManuallyDragged = false;

	erwinbauer.currentPosition.top = startTop + erwinbauer.easing(timerPosition) * (endTop - startTop);
	erwinbauer.currentPosition.left = startLeft + erwinbauer.easing(timerPosition) * (endLeft - startLeft);

	erwinbauer.canvas.style.top = erwinbauer.currentPosition.top+"px";
	erwinbauer.canvas.style.left = erwinbauer.currentPosition.left+"px";

	erwinbauer.timer += erwinbauer.panIntervalInMilliseconds;
	if (timerPosition >= 1) {
		erwinbauer.clearPanInterval();
		erwinbauer.historyController.addToHistory({pageId: erwinbauer.currentPageId, parameters: erwinbauer.parameters}, erwinbauer.activatedElement);
	}

}

erwinbauer.clearPanInterval = function(){
	window.clearInterval(erwinbauer.panInterval);
	erwinbauer.panInterval = null;
	//erwinbauer.panCallback();
	erwinbauer.reachedScreen();
}

erwinbauer.positionScreen = function(pageId, parameters){
	erwinbauer.wasManuallyDragged = false;
	erwinbauer.currentPageId = pageId;

    //erwinbauer.panCallback = callback;
	var width =document.viewport.getWidth();
	var height =document.viewport.getHeight();

	var element = $(pageId);
	var pageDimensions = Element.getDimensions(element);
	if(pageId=="box1"){
		pageDimensions.width = 900;
	}
	
	erwinbauer.offsetLeft = Math.max(20, (width-pageDimensions.width)/2);
	erwinbauer.offsetTop = Math.max(20, (height-pageDimensions.height)/2);
	
	erwinbauer.canvas = $('canvas');
	
	if(element==null)
		return;
	
	//var offset = Element.cumulativeOffset(element);
	erwinbauer.targetPosition = {top: -element.offsetTop+erwinbauer.offsetTop, left: -element.offsetLeft+erwinbauer.offsetLeft};
	if(erwinbauer.getURLParameter("debug")){
		alert("Dimensions: "+pageDimensions.height+" "+pageDimensions.width+" ");
		alert("Top: "+erwinbauer.targetPosition.top+" Left: "+erwinbauer.targetPosition.left+" ");
		alert(-element.offsetLeft+"+"+erwinbauer.offsetLeft);
	}
	erwinbauer.canvas.style.top = erwinbauer.targetPosition.top+"px";
	erwinbauer.canvas.style.left = erwinbauer.targetPosition.left+"px";
}

//this positions the window when a browser window is resized
erwinbauer.onResize = function(){
	if(erwinbauer.wasManuallyDragged==false) //if manually navigate you dont want to pan to screens on resize
		erwinbauer.gotoScreen(erwinbauer.currentPageId);
}

erwinbauer.reachedScreen = function(){
	
}

erwinbauer.getURLParameter = function( name )
{
	  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	  var regexS = "[\\?&]"+name+"=([^&#]*)";
	  var regex = new RegExp( regexS );
	  var results = regex.exec( window.location.href );
	  if( results == null )
		return null;
	  else
		return results[1];
}

erwinbauer.toggleboxs = function(boxs){

	if(boxs.className=="boxs-leer"+cssInt()){
		$("showbox").style.display = "none";
		boxs.className = "boxs"+cssInt();
	}else{
		$("showbox").style.display = "block";
		boxs.className = "boxs-leer"+cssInt();
		var elements = $("showbox").childNodes;
		for(var i=0; i<elements.length; i++){
			elements[i].style.display = "block";
		}
	}
}

function cssInt(){
	if(erwinbauer.language=="en"){
		return "_en";
	}
	return "";
}

erwinbauer.init = function(){
	var draggable = new Draggable($('canvas'), 0, -2200, 0, -5200);
	draggable.onDragStart = erwinbauer.onManualPan; 
	
	//make draggables out of all the trashcan images
	var showbox = $('showbox');
	showbox.cleanWhitespace();
	var images = showbox.childNodes; 
	for(var i=0; i<images.length; i++){
		new Draggable(images[i], null, null, null, null);
		images[i].onmouseover = function(){
			var element = Element.select(this, ".description");
			if(element!=null&&element[0]!=null){
				element[0].style.display = "block";
			}
		}.bind(images[i]);
		
		images[i].onmousemove = function(event){
			var y = Event.pointerY(event||window.event);
			var x = Event.pointerX(event||window.event);
			var element = Element.select(this, ".description");
			var offsets = Element.cumulativeOffset(this);
			if(element!=null&&element[0]!=null){
				element[0].style.top = (y-offsets.top)+"px";
				element[0].style.left = (x-offsets.left)+"px";
			}
		}.bind(images[i]);
		
		images[i].onmouseout = function(){
			var element = Element.select(this, ".description");
			if(element!=null&&element[0]!=null){
				element[0].style.display = "none";
			}
		}.bind(images[i]);
	}
}

erwinbauer.onManualPan = function(){
	erwinbauer.wasManuallyDragged = true; //on resize we dont want to pan to screen anymore
	erwinbauer.clearPanInterval(); //on drag start we want to clear the panning
	erwinbauer.currentPageId = null;
}

//preload hover-images once the body is loaded
erwinbauer.preloadHoverImages = function(){
	var path = "img/" + cssInt() + "/";
	var images = ["1.png", "2.png"];
	images.each(function(image){
		var preloader = new Image();
		preloader.src = path + image;
	});
}
Event.observe(window, 'load', erwinbauer.preloadHoverImages);

/* Draggable*/
var Draggable = Class.create();
Draggable.staticCounter = 0; //this is a counter that increments when an item is dragged. It is added to the Z-Index so that the last dragged item is always on top.

Draggable.prototype = {
	initialize: function(htmlElement, limitYMax, limitYMin, limitXMax, limitXMin){
		this.htmlElement = htmlElement;
		this.limitYMax = limitYMax;
		this.limitYMin = limitYMin;
		this.limitXMax = limitXMax;
		this.limitXMin = limitXMin;
		
		try{
			this.originalZIndex =  parseInt(htmlElement.style.zIndex);
		}catch(e){
			this.originalZIndex = 500;
		}
		
		if(isNaN(this.originalZIndex)){
			this.originalZIndex = 500;
		}
				
		this.boundMouseMainMoveListener = this.mouseMainMoveListen.bind(this);
		this.boundStopObservingMain = this.stopObservingMain.bind(this);
		this.htmlElement.onmousedown = this.startDragMain.bindAsEventListener(this);
	},
	
	startDragMain: function(event){
		this.onDragStart();
		event.cancelBubble = true; //in case of 2 draggables over each other we only want to notify the first one. eg: Trashcan
		Draggable.staticCounter++;
		this.htmlElement.style.zIndex = 1000+Draggable.staticCounter;
		
		//start listening to mouse moves
		Event.observe(document, "mousemove", this.boundMouseMainMoveListener);
		Event.observe(document, "mouseup", this.boundStopObservingMain);
		
		this.initialMouseX = parseInt(Event.pointerX(event));
		this.initialMouseY = parseInt(Event.pointerY(event));
		
		this.initialMainY = this.htmlElement.offsetTop;
		this.initialMainX = this.htmlElement.offsetLeft;
		return false; //image bug fix
	},
	
	onDragStart: function(){
		
	},
	/*
	 * This moves the box around after startDragMain started it
	 */
	mouseMainMoveListen: function(event){
		event.cancelBubble = true; //in case of 2 draggables over each other we only want to notify the first one. eg: Trashcan
		var xDelta = Event.pointerX(event)-this.initialMouseX;
		var yDelta = Event.pointerY(event)-this.initialMouseY;
		var top = (parseInt(this.initialMainY)+parseInt(yDelta));
		var left = (parseInt(this.initialMainX)+parseInt(xDelta));
		
		//limit to area
		if(this.limitYMax!=null&&top>this.limitYMax)
			top=this.limitYMax;
			
		if(this.limitYMin!=null&&top<this.limitYMin)
			top=this.limitYMin;
		
		if(this.limitXMax!=null&&left>this.limitXMax)
			left=this.limitXMax;
			
		if(this.limitXMin!=null&&left<this.limitXMin)
			left=this.limitXMin;
			
		this.htmlElement.style.top  = top+"px";
		this.htmlElement.style.left = left+"px";
		return false;
	},
	/*
	 * This stops the dragging behaviour
	 */
	stopObservingMain: function(){
		this.htmlElement.style.zIndex = this.originalZIndex+Draggable.staticCounter;
		Event.stopObserving(document, "mousemove", this.boundMouseMainMoveListener);
		Event.stopObserving(document, "mouseup", this.boundStopObservingMain);
	}
}