/* Dragger fuer Webcam */

var dragHelper = null;

var webcamDragger = Class.create();
webcamDragger.prototype = {

	initialize : function (webcams)
	{
		this.webcams = webcams;
		
		if($('timeslider'))
		{
			$('timeslider').style.left = 0 + "px";
					
			dragHelper = this;
			
			Event.observe('timeslider', 'mousedown', function(e){ dragHelper.startDrag(); });
			Event.observe('site', 'mouseup', function(e){ dragHelper.stopDrag(); });
		}
		
		this.playWebcams = false;
		this.selectWebcam(5);
	},
	
	selectWebcam : function (index)
	{
		this.activeWebcam = this.webcams[index];
		this.currentWebcam = this.activeWebcam['img'];
		this.webcamArrayIndex = 0;
		
		this.preloadImages(index);
		
		// texte umschreiben
		//$('headline').innerHTML = '<img src="/extensions/php_to_img/output.php?text=' + this.activeWebcam['name'].toUpperCase() + '&width=150&height=&color=cccccc&font=TheSans-B7Bold.ttf&size=10&bgcolor=f6f6f6" border="0" style="margin-top:5px;" />';
		$('headline').innerHTML = this.activeWebcam['name'].toUpperCase();
		$('camContent' + index).style.display = 'inline';
		for (var cam = 1; cam < 10; cam++)
		{
			if (cam != index)
			{
				$('camContent' + cam).style.display = 'none';	
			}
		}
		
		if(menuOpen == true)
		{
			$('menubutton').onclick = null;
			$('cam_menu_content').style.display = 'none';
			
			ex9 = new Animator({transition: Animator.makeEaseOut(4),duration: 1000,onComplete: function() {
				document.getElementById('menubutton').onclick = showCamDetail;}});
			ex9.addSubject(new NumericalStyleSubject($('cam_menu'), 'height', menuHeight, 28));
			ex9.play();
	
			menuOpen = false;
		}
		
		if (this.playWebcams == true)
		{
			clearInterval(this.playInterval);
		}
		
		this.reloadInit();
	},
	
	reloadInit : function ()
	{
		$('timeslider').style.left = dragStopPos + 'px';
		$('webcamImg').src = this.currentWebcam;
		this.webcamArrayIndex = 0;
	},
	
	startDrag : function ()
	{
		$('cam_controls').onmousemove = this.dragging.bind(this);
	},
	
	stopDrag : function ()
	{
		$('cam_controls').onmousemove = null;
	},
	
	dragging : function (e)
	{
		
		e = e || window.event;
		var cursor = {x:0, y:0};
		if (e.pageX || e.pageY) {
			cursor.x = e.pageX;
			cursor.y = e.pageY;
		} 
		else {
			var de = document.documentElement;
			var b = document.body;
			cursor.x = e.clientX + 
				(de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
			cursor.y = e.clientY + 
				(de.scrollTop || b.scrollTop) - (de.clientTop || 0);
		}		
		
		this.cursorPosition = cursor;
		
		diff = cursor.x - this.lastX;
		if (diff < -40) { diff = -1; }
		if (diff > 40) { diff = 1; }
		
		currentLeft = parseInt($('timeslider').style.left);
		
		if(currentLeft >= 0 && currentLeft <= 396)
		{
			newLeft = diff + currentLeft;
			if(newLeft < 0) { newLeft = 0; } else if (newLeft > 396) { newLeft = 396;}
			
			if(newLeft < dragStopPos)
			{
				if(newLeft >= 0)
				{
					this.positionPercent = Math.ceil((newLeft/396)*100);	
					this.webcamArrayIndex = Math.floor((this.positionPercent/100)*36);
					
					if(typeof(this.activeWebcam['urls'][this.webcamArrayIndex]) != 'undefined')
					{
						$('webcamImg').src = this.activeWebcam['urls'][this.webcamArrayIndex];
					}
					$('timeslider').style.left = newLeft + 'px';
				}
			}
			else
			{
				$('webcamImg').src = this.currentWebcam;	
			}
		}
		
		this.lastX = cursor.x;	
	},
	
	reloadCam : function ()
	{		
		$('webcamImg').src = this.currentWebcam;
		$('timeslider').style.left = dragStopPos + 'px';
	},
	
	play : function ()
	{	
		if (this.playWebcams == false)
		{			
			currentLeft = parseInt($('timeslider').style.left);
			
			if (currentLeft >= dragStopPos-15)
			{
				$('timeslider').style.left = 0;	
				this.webcamArrayIndex = 0;
			}
			else
			{
				this.positionPercent = Math.ceil((currentLeft/396)*100);	
				this.webcamArrayIndex = Math.floor((this.positionPercent/100)*36);
			}
			
			this.playInterval = window.setInterval(this.gotoNextWebcamsImage.bind(this),1500);
			this.playWebcams = true;
		}
		else
		{
			clearInterval(this.playInterval);
			this.playWebcams = false;
		}
	},
	
	gotoNextWebcamsImage : function ()
	{
		if (this.webcamArrayIndex == this.activeWebcam['urls'].length)
		{
			clearInterval(this.playInterval);
			this.playWebcams = false;
			$('timeslider').style.left = 11*this.webcamArrayIndex + 'px';
			$('webcamImg').src = this.currentWebcam;
		}
		if (this.webcamArrayIndex < this.activeWebcam['urls'].length)
		{
			this.webcamArrayIndex++;
			$('timeslider').style.left = 11*this.webcamArrayIndex + 'px';
			$('webcamImg').src = this.activeWebcam['urls'][this.webcamArrayIndex];
		}
	},
	
	preloadImages : function (cam)
	{
		if (camData[cam]['urls'])
		{
			for (i=0; i < camData[cam]['urls'].length; i++) 
			{
				var webcam = new Image();
				webcam.src = camData[cam]['urls'][i];
			}
		}
	}
}


//Auf und zuslide Funktion fuer Webcam Auswahlmenue
var menuOpen = false;

function showCamDetail()
{
	
	contentHeight = $('cam_menu_content').getHeight();
	menuHeight = contentHeight + 28;
	
	if(menuOpen == false)
	{
		$('menubutton').onclick = null;
		
		ex9 = new Animator({transition: Animator.makeEaseOut(4),duration: 1000,onComplete: function() {
			document.getElementById('menubutton').onclick = showCamDetail;
			$('cam_menu_content').style.display = 'block';
		}});
		ex9.addSubject(new NumericalStyleSubject($('cam_menu'), 'height', 28, menuHeight));
		ex9.play();
		
		var initGMap = window.setTimeout("setupGoogleMap()", 2000);
		menuOpen = true;
	}
	else
	{
		
		$('menubutton').onclick = null;
		$('cam_menu_content').style.display = 'none';
		
		ex9 = new Animator({transition: Animator.makeEaseOut(4),duration: 1000,onComplete: function() {
			document.getElementById('menubutton').onclick = showCamDetail;}});
		ex9.addSubject(new NumericalStyleSubject($('cam_menu'), 'height', menuHeight, 28));
		ex9.play();
		
		
		menuOpen = false;
	}
}

/*
function preloadWebcams()
{
	for (var c = 1; c < 9; c++) 
	{
		if (camData[c]['urls'])
		{
			for (i=0; i < camData[c]['urls'].length; i++) 
			{
				var webcam = new Image();
				webcam.src = camData[c]['urls'][i];
			}
		}
	}
}
*/