/**
 * Algemene traphic functies voor het navigeren van de kaart
 * @author 	Kevin Franke
 * @version 	1.0 
 */

var kaartbreedte=1689; var kaarthoogte=2011; // afmetingen van de grote kaart
var kaartbreedteKlein=136; var kaarthoogteKlein=160;  // afmetingen van de kleine kaart
var bigMapDragObject,magnifierDragObject; 
var xconstraint_links, xconstraint_rechts;
var yconstraint_onder, yconstraint_boven;
var treininfo_anim_uit;

var traphic = {
	/**
	 * bepaal hoever de kaart naar links, rechts, boven en onder geschoven mag worden.		
	 */
	zet_schuif_beperkingen: function(){
 
		// alleen als het drag en drop element al bestaat;		
		if (bigMapDragObject&&magnifierDragObject){

			var mapContainerBreedte=traphic.getSize('mapContainer',0);
			var mapContainerHoogte=traphic.getSize('mapContainer',1);

			// hoever mag de kaart nog naar rechts en links bewegen?			
			xconstraint_rechts=YAHOO.util.Dom.getX('mapContainer')-YAHOO.util.Dom.getX('bigmap');
			xconstraint_links=kaartbreedte-mapContainerBreedte-xconstraint_rechts; 						
    		bigMapDragObject.setXConstraint(xconstraint_links, xconstraint_rechts);
	
			// hoever mag de kaart naar boven en beneden bewegen?
			yconstraint_onder=YAHOO.util.Dom.getY('mapContainer')-YAHOO.util.Dom.getY('bigmap');
			yconstraint_boven=kaarthoogte-mapContainerHoogte-yconstraint_onder; 
	   		bigMapDragObject.setYConstraint(yconstraint_boven, yconstraint_onder);
			
			// schuifbeperkignen voor 'vergrootglas'
			var vergrootglasBreedte=mapContainerBreedte/(kaartbreedte/kaartbreedteKlein);
			var vergrootglasHoogte=mapContainerHoogte/(kaarthoogte/kaarthoogteKlein);
			var xPositieKaartKlein=YAHOO.util.Dom.getX('smallmap');
			var yPositieKaartKlein=YAHOO.util.Dom.getY('smallmap');
			var xPositieVergrootglas=YAHOO.util.Dom.getX('magnifier')
			var yPositieVergrootglas=YAHOO.util.Dom.getY('magnifier')
	
			magnifierDragObject.setXConstraint(
			(xPositieVergrootglas-xPositieKaartKlein),
			(kaartbreedteKlein-vergrootglasBreedte-xPositieVergrootglas+xPositieKaartKlein));
			magnifierDragObject.setYConstraint(
			(yPositieVergrootglas-yPositieKaartKlein),
			(kaarthoogteKlein-vergrootglasHoogte-yPositieVergrootglas+yPositieKaartKlein));
			}
		},
		
	/**
	 * maak Mapcontainer de gewenste maat, afhankelijk van de schermgrootte.		
	 */
	sizeviewport: function(){
		// laat alle schuifbeperking los bij het resizen:
		//bigMapDragObject.resetConstraints();
		
		// schaal het grote venster
		var schermhoogte=YAHOO.util.DragDropMgr.getClientHeight();
	  	var schermbreedte=YAHOO.util.DragDropMgr.getClientWidth();
		hoogte=eval(schermhoogte-20);
		breedte=eval(schermbreedte-340); 		
		YAHOO.util.Dom.setStyle('mapContainer','width', breedte+'px'); 
		YAHOO.util.Dom.setStyle('mapContainer','height', hoogte+'px'); 
		
		// schaal het kleine venster
		if (document.getElementById('magnifier')){
			breedteklein=eval(breedte/(kaartbreedte/kaartbreedteKlein));
			hoogteklein=eval(hoogte/(kaarthoogte/kaarthoogteKlein));
			YAHOO.util.Dom.setStyle('magnifier','width', breedteklein+'px'); 
			YAHOO.util.Dom.setStyle('magnifier','height', hoogteklein+'px'); 
			// na het resizen (opnieuw) de beperkingen berekenen...
			traphic.zet_schuif_beperkingen();
			}
		
		},
	/**
	 * Update de pagina, na het het resizen van het browser-window
	 */
	resizeWindow: function(){
	
		// pas de viewport aan...
		traphic.sizeviewport();
		
		var mapContainerBreedte=traphic.getSize('mapContainer',0)*1 ; 	// *1 om de string om te zetten naar een getal
		var mapContainerHoogte=traphic.getSize('mapContainer',1)*1; 	// http://www.quirksmode.org/js/strings.html
		// kijk of er bij het resizen geen gebied 'buiten de kaart' in beeld is gekomen...
		if ((kaartbreedte+YAHOO.util.Dom.getX('bigmap'))<(YAHOO.util.Dom.getX('mapContainer')+mapContainerBreedte )
			||(kaarthoogte+YAHOO.util.Dom.getY('bigmap'))<(YAHOO.util.Dom.getY('mapContainer')+mapContainerHoogte)
			){
			// het nieuwe venster is nu groter dan het getoonde deel van de kaart
			// schuif de kaart nu weer terug in beeld	
			var verschilx=(YAHOO.util.Dom.getX('mapContainer')+mapContainerBreedte)-(kaartbreedte+YAHOO.util.Dom.getX('bigmap'))
			var verschily=(YAHOO.util.Dom.getY('mapContainer')+mapContainerHoogte)-(kaarthoogte+YAHOO.util.Dom.getY('bigmap'))
			var nieuwelocatie = new Array(verschilx,verschily);
			
			// verplaats de kaart
			traphic.moveMap({ points: { by: nieuwelocatie } });
			}
		},
	/**
	 * als op de kaart gedubbelklikt wordt, wordt vervolgens de kaart
	 * op die plek gecentreerd.
	 * @param {Object} e
	 */
	centerkaart: function(e){
		// update de constraints, zodat we de actuele waarden van die
		// variabelen hieronder kunnen gebruiken...
		traphic.zet_schuif_beperkingen();
				
		// bereken de afstand tussen het midden van de kaart en de plek waar geklikt is
		var x = YAHOO.util.Event.getPageX(e);
		var xPositieMapContainer=YAHOO.util.Dom.getX('mapContainer');
		var verschilx=xPositieMapContainer+(traphic.getSize('mapContainer',0)/2)-x;
				
		var y = YAHOO.util.Event.getPageY(e);
		var yPositieMapContainer=YAHOO.util.Dom.getY('mapContainer');
		var verschily=yPositieMapContainer+( traphic.getSize('mapContainer',1) /2)-y;			

		// zorg dat de kaart niet 'buiten beeld' wordt verplaatst...
		if (verschilx>0&&verschilx>xconstraint_rechts){verschilx=xconstraint_rechts};
		if (verschilx<0&&-verschilx>xconstraint_links){verschilx=-xconstraint_links};

		if (verschily>0&&verschily>yconstraint_onder){verschily=yconstraint_onder};
		if (verschily<0&&-verschily>yconstraint_boven){verschily=-yconstraint_boven};		
		var berekendewaarde = new Array(verschilx,verschily);
			
		// verplaats de kaart
		traphic.moveMap({ points: { by: berekendewaarde } });

		},
		
	/**
	 * verplaats de grote kaart, werk de positie van het vergrootglas bij
	 * en bereken de constraints opnieuw
	 */
	moveMap: function(attributen){
		var attributes = attributen;
		var centerkaart_anim = new YAHOO.util.Motion('bigmap', attributes, 0.7, YAHOO.util.Easing.easeOut );
		centerkaart_anim.animate();
		centerkaart_anim.onComplete.subscribe(traphic.onEndStartXY,centerkaart_anim, true);
		bigMapDragObject.resetConstraints();
		magnifierDragObject.resetConstraints();	
		},
	
	/**
	 * verplaats het vergrootglas aan de hand van de positie van de grote kaart
	 */
	movemagnifier: function(){
		YAHOO.util.Dom.setStyle('magnifier','left', ((YAHOO.util.Dom.getX('mapContainer')-YAHOO.util.Dom.getX('bigmap'))/(kaartbreedte/kaartbreedteKlein))+'px'); 
		YAHOO.util.Dom.setStyle('magnifier','top', ((YAHOO.util.Dom.getY('mapContainer')-YAHOO.util.Dom.getY('bigmap'))/(kaarthoogte/kaarthoogteKlein))+'px'); 
		},
	/**
	 * Geeft de afmetingen van een element terug 
	 * @param {Object}	 	el	het element waarvan de eigenschappen worden opgevraagd.
	 * @param	{object}	s	0 geeft breedte, 1 geeft hoogte
	 * @return	{value}		breedte of de hoogte
	 */
	getSize: function(el,s){
		//var elBreedtePX=YAHOO.util.Dom.getStyle(el,'width');
		//var elBreedte=elBreedtePX.substring(0,elBreedtePX.indexOf('px'));
		var elBreedte=document.getElementById(el).offsetWidth;
		//var elHoogtePX=YAHOO.util.Dom.getStyle(el,'height');
		//var elHoogte=elHoogtePX.substring(0,elHoogtePX.indexOf('px'));
		var elHoogte=document.getElementById(el).offsetHeight;
		//return new Array(mapContainerBreedte,mapContainerHoogte);
		return (s==0)?elBreedte:elHoogte;
		},
	/**
	 * Lees een cookie uit
	 * @param {Object} name
	 */
	getCookie: function(name) {
    	var start = document.cookie.indexOf(name+"=");
   		var len = start+name.length+1;
    	if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
    	if (start == -1) return null;
    	var end = document.cookie.indexOf(";",len);
    	if (end == -1) end = document.cookie.length;
    	return unescape(document.cookie.substring(len,end));
		},
	/**
	 * Zet een cookie
	 * @param {Object} name
	 * @param {Object} value
	 * @param {Object} expires
	 * @param {Object} path
	 * @param {Object} domain
	 * @param {Object} secure
	 */
	setCookie: function (name,value,expires,path,domain,secure) {
    	document.cookie = name + "=" +escape(value) +
        ( (expires) ? ";expires=" + expires.toGMTString() : "") +
        ( (path) ? ";path=" + path : "") + 
        ( (domain) ? ";domain=" + domain : "") +
        ( (secure) ? ";secure" : "");
		},
	/** Correctly handle PNG transparency in Win IE 5.5 or higher.
	 * http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
	 * 
	 */
	iePNGFix: function(){
		for(var i=0; i<document.images.length; i++){
	 		var img = document.images[i]
	  		var imgName = img.src.toUpperCase()
			if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
		 		var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 		var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 		var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 		var imgStyle = "display:inline-block;" + img.style.cssText 
				if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		 		if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		 		if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;		
				var strNewHTML = "<span " + imgID + imgClass + imgTitle
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     		+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 		+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 		img.outerHTML = strNewHTML
		 		i = i-1
	    		}
     		}		
		},
	/** 
	 * Haal de opgeslagen XY coordinaten op, en zet de kaart terug
	 * op de vorige locatie
	 */
	setStartXY: function (){
	// lees cookie uit, en zet de kaart op de bewaarde positie.
		var Cookie_InitialX = traphic.getCookie("InitialtreinX");
		if (Cookie_InitialX == null){
			InitialX = -400;
			}
		else {InitialX = Cookie_InitialX;
			}	
		var Cookie_InitialY = traphic.getCookie("InitialtreinY");
		if (Cookie_InitialY == null){
			InitialY = -600;
			}
		else{InitialY = Cookie_InitialY};
		// verplaats de kaart naar de positie van het cookie
		newposition = new Array(InitialX,InitialY);
		var attributes = { points: { to: newposition  } };
		var verschuifkaart_anim = new YAHOO.util.Motion('bigmap', attributes, 0.1, YAHOO.util.Easing.easeOut );
		verschuifkaart_anim.animate();
		verschuifkaart_anim.onComplete.subscribe(traphic.onEndStartXY,verschuifkaart_anim, true); //traphic.movemagnifier();
		//bigMapDragObject.moveTo(newposition); traphic.movemagnifier();
		bigMapDragObject.resetConstraints();
		magnifierDragObject.resetConstraints();
		},
	/**
	 * Onthoud de coordinaten van de kaart
	 * bij het afsluiten van de pagina.
	 */
	rememberXY: function(){
	// onthoud de positie van de grote kaart
		var BigMapLeft = YAHOO.util.Dom.getX("bigmap");
		var BigMapTop = YAHOO.util.Dom.getY("bigmap");
		var todays_date = new Date();
	  	var expires_date = new Date(todays_date.getTime() + (52 * 86400000)); // 52 weeks from now
		traphic.setCookie("InitialtreinX",BigMapLeft,expires_date);
		traphic.setCookie("InitialtreinY",BigMapTop,expires_date);		
		},
	/**
	 * wannneer de kaart naar de goede positie is geschoven, verplaats dan ook het kleine kader...
	 */
	onEndStartXY: function(){
		traphic.movemagnifier();
		},
	/**
	 * Initialiseer de pagina.
	 */
	init: function() {
		// maak de grote kaart dragable
		bigMapDragObject = new YAHOO.util.DD("bigmap");
		//bigMapObject = new YAHOO.util.Element("bigmap");
		// maak het kleine vernster dragable
		magnifierDragObject = new YAHOO.util.DD("magnifier");
		
		// schaal het kaartvenster naar de beschikbare ruimte, en zet de schuifbeperkingen
		traphic.sizeviewport();

		// zet de kaart op de onthouden positie:
		traphic.setStartXY();
		
		// maak PNG-tjes in IE transparant...
		if (window.ActiveXObject){traphic.iePNGFix();}
		
		// verplaats het kader om de kleine kaar naar de goede positie
		//traphic.movemagnifier();
		// centreer de kaart wanneer er op geklikt wordt:
   		YAHOO.util.Event.addListener('bigmap',"dblclick", traphic.centerkaart);
   		
		// wijs tooltips toe aan alle stations. Gebruik de standaard 'alt' tekst.
   		tooltipstations=YAHOO.util.Dom.getElementsByClassName('station');
		tooltip = new YAHOO.widget.Tooltip("tt3", { context:tooltipstations, iframe:true});
		
		bigMapDragObject.endDrag=function(){
			// taken uit te voeren aan het einde van de drag
			// verplaats het kader om de kleine kaar naar de goede positie
			traphic.movemagnifier();
			};
		magnifierDragObject.endDrag=function(){
			// taken uit te voeren aan het einde van de drag
			// verplaats de grote kaart aan de hand van de positie van de kleine

	// hier wordt nog geen rekening gehouden met de positie van de kaart!
			var new_x=YAHOO.util.Dom.getX("mapContainer")-((YAHOO.util.Dom.getX("magnifier")-YAHOO.util.Dom.getX("smallmap"))*kaartbreedte/kaartbreedteKlein);
			var new_y=YAHOO.util.Dom.getY("mapContainer")-((YAHOO.util.Dom.getY("magnifier")-YAHOO.util.Dom.getY("smallmap"))*kaarthoogte/kaarthoogteKlein);
			newposition = new Array(new_x,new_y);
			var attributes = { points: { to: newposition  } };
			var verschuifkaart_anim = new YAHOO.util.Motion('bigmap', attributes, 0.7, YAHOO.util.Easing.easeOut );
			verschuifkaart_anim.animate();
			};
		bigMapDragObject.onDrag=function(){
			//window.status=('x,y:'+YAHOO.util.DragDropMgr.getPosX("bigmap")+			','+YAHOO.util.DragDropMgr.getPosY("bigmap"));
			};
   		}	
	}

YAHOO.util.Event.addListener(window, "load", traphic.init);
// resizen van het window is lastig, omdat er gebied 'buiten de kaart' zichtbaar kan worden...
// wat doen we dan? Het viewport op nieuw sizen? Alles opnieuw initialiseren?
YAHOO.util.Event.addListener(window, "resize", traphic.resizeWindow);