// JavaScript Document

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


var amearas = {};

amearas.easeOutFactor = 10;
amearas.movePixel = 50;

amearas.gotoPath = function(path){
	amearas.showPage(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
*/
	amearas.showPage = function(pageId, parameters){
	amearas.draggedManually = false;
	//amearas.historyController.addToHistory({pageId: pageId, parameters: parameters}, this);
	
	amearas.currentPageId = pageId;
	
	var width = document.viewport.getWidth();
	var height = document.viewport.getHeight();
	
	var element = $(pageId);
	var pageDimensions = Element.getDimensions(element);
	amearas.offsetLeft = (width-1000)/2;
	amearas.offsetTop = (height-pageDimensions.height)/2;
	
	amearas.canvas = $('canvas');
	
	if(element==null)
		return;
	
	amearas.targetPosition = {top: -element.offsetTop, left: -element.offsetLeft+amearas.offsetLeft};
	amearas.currentPosition  = Element.cumulativeOffset(amearas.canvas);
	
	//if another interval still exists then remove it...memory issues otherwise
	if(amearas.moveInterval!=null)
		window.clearInterval(amearas.moveInterval);
		
	amearas.moveInterval = window.setInterval(amearas.moveTo, 20);
	
	amearas.ySpeed = (amearas.targetPosition.top-amearas.currentPosition.top)/30;
	amearas.xSpeed = (amearas.targetPosition.left-amearas.currentPosition.left/30);
	
}

amearas.moveTo = function(){
	amearas.draggedManually = false;
	var speedY = ((amearas.targetPosition.top-amearas.currentPosition.top)/amearas.easeOutFactor);
	var speedX = ((amearas.targetPosition.left-amearas.currentPosition.left)/amearas.easeOutFactor);
	
	if(Math.abs(speedY)>amearas.movePixel){
		if(speedY>0)
			speedY=amearas.movePixel;
		else
			speedY=-amearas.movePixel;
	}
	
	if(Math.abs(speedX)>amearas.movePixel){
		if(speedX>0)
			speedX=amearas.movePixel;
		else
			speedX=-amearas.movePixel;
	}
		
	amearas.currentPosition.top = amearas.currentPosition.top+speedY;
	amearas.currentPosition.left = amearas.currentPosition.left+speedX;

	amearas.canvas.style.top = amearas.currentPosition.top+"px";
	amearas.canvas.style.left = amearas.currentPosition.left+"px";
	
	if(Math.abs(Math.round(amearas.currentPosition.top)-Math.round(amearas.targetPosition.top))<3&&
		Math.abs(Math.round(amearas.currentPosition.left)-Math.round(amearas.targetPosition.left))<3){
			amearas.clearmoveInterval();
	}	
}

amearas.clearmoveInterval = function(){
	window.clearInterval(amearas.moveInterval);
	amearas.moveInterval = null;
}
//, parameters){
amearas.positionScreen = function(pageId, parameters){
	amearas.draggedManually = false;
	amearas.currentPageId = pageId;

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

	var element = $(pageId);
	var pageDimensions = Element.getDimensions(element);
	//amearas.offsetLeft = (width-pageDimensions.width)/2;
	amearas.offsetLeft = (width-1000)/2;
	amearas.offsetTop = (height-pageDimensions.height)/2;

	amearas.canvas = $('canvas');
	
	if(element==null)
		return;

	//var offset = Element.cumulativeOffset(element);
	//amearas.targetPosition = {top: -element.offsetTop+amearas.offsetTop, left: -element.offsetLeft+amearas.offsetLeft};
	amearas.targetPosition = {top: -element.offsetTop, left: -element.offsetLeft+amearas.offsetLeft};

	amearas.canvas.style.top = amearas.targetPosition.top+"px";
	amearas.canvas.style.left = amearas.targetPosition.left+"px";
}

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

amearas.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];
}


amearas.init = function(){
	var draggable = new DragPage($('canvas'));
	draggable.onDragStart = amearas.onManualPan; 	
}

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

/*
 *	DragPage
 */

var DragPage = Class.create();
DragPage.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.

DragPage.prototype = {
	initialize: function(htmlElement){
		this.htmlElement = htmlElement;
		this.MaxY = 0;
		this.MinY = -3830;
		this.MaxX = 0;
		this.MinX = -6120;
		
		/*try{
			this.originalZIndex =  parseInt(htmlElement.style.zIndex);
		}catch(e){
			this.originalZIndex = 500;
		}
		
		if(isNaN(this.originalZIndex)){
			this.originalZIndex = 500;
		}*/
				
		this.MouseMove = this.MouseMoveEvent.bind(this);
		this.MouseStop = this.MouseStopEvent.bind(this);
		this.htmlElement.onmousedown = this.startDragging.bindAsEventListener(this);
	},
	
	startDragging: 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
		//DragPage.staticCounter++;
		//this.htmlElement.style.zIndex = 1000+DragPage.staticCounter;
		
		//start listening to mouse moves
		Event.observe(document, "mousemove", this.MouseMove);
		Event.observe(document, "mouseup", this.MouseStop);
		
		this.startingPointX = parseInt(Event.pointerX(event));
		this.startingPointY = parseInt(Event.pointerY(event));
		
		this.startingPointMainY = this.htmlElement.offsetTop;
		this.startingPointMainX = this.htmlElement.offsetLeft;
		return false; //image bug fix
	},
	
	onDragStart: function(){
		
	},
	
	/*
	 * This moves the box around after startDragging started it
	 */
	MouseMoveEvent: function(event){
		//event.cancelBubble = true; //in case of 2 draggables over each other we only want to notify the first one. eg: Trashcan
		var xDiff = Event.pointerX(event)-this.startingPointX;
		var yDiff = Event.pointerY(event)-this.startingPointY;
		var top = (parseInt(this.startingPointMainY)+parseInt(yDiff));
		var left = (parseInt(this.startingPointMainX)+parseInt(xDiff));
		
		//limit to area
		if(this.MaxY!=null&&top>this.MaxY)
			top=this.MaxY;
			
		if(this.MinY!=null&&top<this.MinY)
			top=this.MinY;
		
		if(this.MaxX!=null&&left>this.MaxX)
			left=this.MaxX;
			
		if(this.MinX!=null&&left<this.MinX)
			left=this.MinX;
			
		this.htmlElement.style.top  = top+"px";
		this.htmlElement.style.left = left+"px";
		return false;
	},
	
	/*
	 * This stops the dragging behaviour
	 */
	MouseStopEvent: function(){
		//this.htmlElement.style.zIndex = parseInt(htmlElement.style.zIndex); //this.originalZIndex+DragPage.staticCounter;
		Event.stopObserving(document, "mousemove", this.MouseMove);
		Event.stopObserving(document, "mouseup", this.MouseStop);
	}
}