/*
 *
 * Main.js by Joachim Jansen | JDI - ICY
 *
 * 27-11-2007
 *
 */
var Map = null;
var OriginalTitle = null;
var PageLoaded = false;
var GemeenteID = null;
var insert1 = null;
var SuperHome = null;

var OpHome = false;

function SetPageTitleTo( Str ){
  var element = document.getElementById( 'MenuKop' );
 
 //  Str = Str.toLowerCase();
 
  if ( element ) {

    if ( OriginalTitle == null ){
      var mk = document.getElementById( 'MenuKop' );
      if ( mk && mk.innerHTML ){
        OriginalTitle = mk.innerHTML;
      }
    } 

    if ( OriginalTitle == null ){
      OriginalTitle = Str;
    }

    element.innerHTML = Str;
  }
}

function SetPageTitle(){
  var element = document.getElementById( 'MenuKop' );
  if ( element ) {
    OriginalTitle = element.innerHTML;
  }
}

function RestorePageTitle(){
  var element = document.getElementById( 'MenuKop' );
  if ( element ) {
    element.innerHTML = OriginalTitle;
  }
}

function OpenDeelgebiedenLijst(){
  var dgb = document.getElementById( 'Deelgebieden' );
  var dgbLijst = document.getElementById( 'DeelgebiedenLijst' );
  if ( dgb && dgbLijst ){
    dgb.style.display = 'block';
    dgbLijst.style.display = 'block';

    dgb.onmouseover = DeelgebiedLijst_OnMouseOver;
    dgb.onmouseout  = DeelgebiedLijst_OnMouseOut;

    for( var i = 0; i < dgbLijst.childNodes.length; i++ ){
      var ChildLI = dgbLijst.childNodes[ i ];
      if ( ChildLI.tagName == 'LI' ) {
        for( var j = 0; j < ChildLI.childNodes.length; j++ ){
          var ChildA = ChildLI.childNodes[ j ];
          if ( ChildA.tagName == 'A' ) {
            ChildA.dgbID = ChildA.id.substr( 10 );
            ChildA.onmouseover = DeelGebied_OnMouseOver;
            ChildA.onmouseout  = DeelGebied_OnMouseOut;
            ChildA.onclick     = DeelGebied_OnClick;
          }
        }
      }
    }
  }
}

function DeelgebiedLijst_OnMouseOver(){
  EndCloseDeelgebiedenLijstTimer();
}

function DeelgebiedLijst_OnMouseOut(){
  StartOutDeelgebiedenLijst();
}

function DeelGebied_OnMouseOver(){
  return MouseOverDeelgebied( this.dgbID );
}

function DeelGebied_OnMouseOut(){
  RestorePageTitle(); return MouseOutDeelgebied( this.dgbID );
}

function DeelGebied_OnClick(){
  if ( this.dgbID ){
    return ClickDeelgebied( this.dgbID );
  }
}

function SluitDeelgebiedenLijst(){
  var dgb = document.getElementById( 'Deelgebieden' );
  var dgbLijst = document.getElementById( 'DeelgebiedenLijst' );
  if ( dgb && dgbLijst ){
    dgb.style.display = 'none';
    dgbLijst.style.display = 'none';
  }
}

function SetBarTo( Left ){
  var Bar = document.getElementById( 'Bar' );
  if ( Bar ){
    Bar.style.backgroundPosition = Left + 'px 0px';
  }
}

function GPositionAndZoomLevel( X, Y, Z ){
  this.X = X;
  this.Y = Y;
  this.Z = Z;
}

function KeepInBounds( AtOnce ){
  var newBounds = map.getBounds();
  if ( ! CurrentBounds.containsBounds( newBounds ) ){
    CurrentCenter = map.getCenter();

    latChange = 0;
    lngChange = 0;

    if ( newBounds.getNorthEast().lat() > CurrentBounds.getNorthEast().lat() ){
      latChange = CurrentBounds.getNorthEast().lat() - newBounds.getNorthEast().lat();
    }

    if ( newBounds.getNorthEast().lng() > CurrentBounds.getNorthEast().lng() ){
      lngChange = CurrentBounds.getNorthEast().lng() - newBounds.getNorthEast().lng();
    }

    if ( CurrentBounds.getSouthWest().lng() > newBounds.getSouthWest().lng() ){
      lngChange = CurrentBounds.getSouthWest().lng() - newBounds.getSouthWest().lng();
    }

    if ( CurrentBounds.getSouthWest().lat() > newBounds.getSouthWest().lat() ){
      latChange = CurrentBounds.getSouthWest().lat() - newBounds.getSouthWest().lat();
    }

    if ( AtOnce ){
      map.setCenter( new GLatLng( CurrentCenter.lat() + latChange, CurrentCenter.lng() + lngChange ) );
    } else {
      map.panTo( new GLatLng( CurrentCenter.lat() + latChange, CurrentCenter.lng() + lngChange ) );
    }
  }
}

var ImagesPath = absPath +"images/";

if ( self.GIcon ){
  var bibIcon = new GIcon( G_DEFAULT_ICON );
  bibIcon.shadow = null;
  bibIcon.iconSize.width = 44;
  bibIcon.iconSize.height = 41;
  bibIcon.imageMap = [5,21,24,2,42,14,32,34,9,32];
  bibIcon.iconAnchor = new GPoint( 26, 19);
  bibImages = {
    bp266:{n:ImagesPath+'266.png',u:ImagesPath+'266_Over.png'},
    bp267:{n:ImagesPath+'267.png',u:ImagesPath+'267_Over.png'},
    bp268:{n:ImagesPath+'268.png',u:ImagesPath+'268_Over.png'},
    gemeentehuis:{n:ImagesPath+'274.png',u:ImagesPath+'274_Over.png'}
  };
}

var markerCollection = [];
var BeleidsPuntCollection = [];
var DeelgebiedenCollection = [];
var PreSelectedRealisatie = null;
var SelectedRealisatie = null;
var PreSelectedDeelgebied = null;
var SelectedDeelgebied = null;
var GemeenteBreedSelected = false;
var MapVisible = false;


function bibMarker( Position, Options ){
  this.id = Options.ID;
  this.Options = Options;
  this.Name = Options.Name;

  this.ImageType = Options.ImgT;

  this.marker = new GMarker( 
    new GLatLng( Position.X, Position.Y, Position.Z ),
    bibIcon
  );

  this.CurImage = null;

  this.MouseOn = false;
  this.ManualActive = false;
  this.Visible = true;

  this.InitListeners();

  map.addOverlay(this.marker);

  this.SetCorrectImage();
}

bibMarker.prototype = {

  InitListeners : function (){
     var self = this;

    GEvent.addListener( this.marker, "mouseover", function(){
      self.MouseOver();
      if ( self.Options.Events && self.Options.Events.onmouseover ){
        self.Options.Events.onmouseover();
      }
    });

    GEvent.addListener( this.marker, "mouseout", function(){
      self.MouseOut();
      if ( self.Options.Events && self.Options.Events.onmouseout ){
        self.Options.Events.onmouseout();
      }
    });

    GEvent.addListener( this.marker, "click", function(){
      location.href = absPath + self.Options.Link;
    });

  },

  MouseOver : function ( ) {
    if ( this.Visible ) {
      this.MouseOn = true;
      if ( this.Options.MouseOverNotifier ){
        this.Options.MouseOverNotifier.MouseOverElement( this, true );
      }
      this.SetCorrectImage(); 
    }
  },
 
  MouseOut : function ( ) {
    this.MouseOn = false;
    if ( this.Options.MouseOverNotifier ){ 
      this.Options.MouseOverNotifier.MouseOverElement( this, false );
    }
    this.SetCorrectImage();
  },

  setVisible : function ( visibility ){
    if ( this.Visible != visibility ){
      this.Visible = visibility;
      if ( this.Visible ){
//        this.marker.show();
        this.CurImage = null;
        this.SetCorrectImage();
        this.InitListeners();
      } else {
        this.CurImage = null;
        this.marker.setImage( ImagesPath + 'blank.gif' );
        GEvent.clearInstanceListeners( this.marker );
//        this.marker.hide();
      }
    }
  },

  Active : function(){ 
    return this.MouseOn || this.ManualActive;
  },
 
  SetCorrectImage : function ( ){
    if ( this.Visible ) {
      var newImg = this.Active() ?  bibImages[ this.ImageType ].u : bibImages[ this.ImageType ].n;
      if ( newImg != this.CurImage ){
        this.marker.setImage( newImg );
        this.CurImage = newImg;
      }
    }
  }
};

function BeleidsPunt( Options, MarkerPositions ){
  Options.ImgT = 'bp' + Options.RelN;
  this.Options = Options;

  this.BeleidspuntInLijst = null;
  this.ExtraBPLink = null;

  this.KaartTab = Options.KaartTab;

  this.MarkerPositions = MarkerPositions;

  this.Markers = [];

  this.LinkMouseOver = false;

  Options.MouseOverNotifier = this;

  this.Init();
}

BeleidsPunt.prototype = {

  Init : function (){
    this.Zichtbaar = true;
    this.Actief = false;

    this.CheckActive( );
    for( i = 0; i < this.Markers.length; i ++ ){
      this.Markers[ i ].setVisible( true );
    }
  },

  InitLink : function( ){
    if ( this.KaartTab == KaartTab ){
      this.BeleidspuntInLijst = document.getElementById( 'BP' + this.Options.ID );
    }
  },

  InitMarkers : function(){
    if ( this.KaartTab == KaartTab ){

      for( var i in this.MarkerPositions ){
        var Marker = new bibMarker( this.MarkerPositions[ i ], this.Options );
        this.Markers.push( Marker );
        markerCollection[ this.Options.ID + '-' + i ] = Marker;
      }
      this.Init();
    }
  },

  SetLinkMouseOver : function( TrueOrFalse, NoUpdate ){
    if ( TrueOrFalse != this.LinkMouseOver ){
      this.LinkMouseOver = TrueOrFalse;
      if ( ! NoUpdate ){
        this.CheckActive();
      }
    }
  },

  AttachExtraBPs : function(){
    this.ExtraBPLink = document.getElementById( 'BPExtraPunt' + this.Options.ID );
  },

  MouseOverElement : function( Element, Over ){
    this.SetLinkMouseOver( Over );
  },

  CheckActive : function( NoUpdate ){

    this.Actief = PreSelectedRealisatie == this.Options.RelN || PreSelectedDeelgebied != null && PreSelectedDeelgebied == this.Options.DeelGB || this.LinkMouseOver || this.Options.DeelGB == null && GemeenteBreedSelected;
    this.Zichtbaar = SelectedRealisatie == null || SelectedRealisatie == this.Options.RelN || this.Actief;

//    if ( SelectedDeelgebied != null && SelectedDeelgebied != this.Options.DeelGB ){ 
//      this.Zichtbaar = false;
  //  }

    for( i = 0; i < this.Markers.length; i ++ ){
      this.Markers[ i ].ManualActive = this.Actief;
    }

    if ( ! NoUpdate ){
      for( i = 0; i < this.Markers.length; i ++ ){
        this.Markers[ i ].SetCorrectImage();
      }

      if ( this.BeleidspuntInLijst ){
        CurrentClassName = this.BeleidspuntInLijst.className;
        CurrentLIClassName = this.BeleidspuntInLijst.parentNode.className;
        CurrentBPClassName = this.ExtraBPLink ? this.ExtraBPLink.className : null;

        NewClassName = '';
        NewLIClassName = '';
        NewBPClassName = '';

 // this.ExtraBPLink
         
        if ( this.Actief ){

          NewClassName = 'BeleidsPuntUp';

          NewClassName += ' BP' + this.Options.RelN;

          NewBPClassName = 'BeleidsPuntUp';

//          if ( this.Options.GemeenteBreed ){
          if ( this.Options.DeelGB == null && GemeenteBreedSelected || this.LinkMouseOver && this.Options.DeelGB == null ){
            NewLIClassName = 'GemeenteBreed';
          }
        }

        if ( CurrentClassName != NewClassName ){
          this.BeleidspuntInLijst.className = NewClassName;
        }

        if ( CurrentLIClassName != NewLIClassName ){
          this.BeleidspuntInLijst.parentNode.className = NewLIClassName;
        }

        if ( this.ExtraBPLink && CurrentBPClassName != NewBPClassName ){
          this.ExtraBPLink.className = NewBPClassName;
        }
      }
    }

    for( i = 0; i < this.Markers.length; i ++ ){
      this.Markers[ i ].setVisible( this.Zichtbaar );
    }
  }

};

function GaNaarDeelgebied( Deelgebied, X, Y, Z ){
  if ( insert1 ){
    insert1.hide();
  }
  var center = new GLatLng( X, Y );
  map.setZoom( Z );

  map.panTo( center );
}

function ClickHome(){

  if ( SuperHome && OpHome ){
    location.href = SuperHome;
    return false;
  }

  SluitDeelgebiedenLijst();

  if ( ! MapVisible ){ return true; }
  SetPageTitle();
  RestoreWelkomstTekst();
  
  SetBarTo( 52 );
  PreSelectedRealisatie = null;
  SelectedRealisatie = null;
  PreSelectedDeelgebied = null;
  SelectedDeelgebied = null;

  for( var id in BeleidsPuntCollection ){
    BeleidsPuntCollection[ id ].Init();
  }
  UpdateBeleidspuntenMarkers();
  if ( insert1 ){
    insert1.show();
  }

  new FlyGoogleMapTo( [ {p:HomePostion,a:['zooming','navigate']} ] );

  Teaser.Run();

  OpHome = true;

  return false;
}

var BarInfo = {
  bp266:{t:'Gerealiseerd',p:109},
  bp267:{t:'Actueel',p:152},
  bp268:{t:'Nog te realiseren',p:194}
};

function ClickRealisatieLevel( Level ){
  Teaser.Run();

  if ( ! MapVisible ){ return true; }
  SluitDeelgebiedenLijst();

  SetPageTitle();

  SetBarTo( BarInfo[ 'bp' + Level ].p );
  SetPageTitleTo( BarInfo[ 'bp' + Level ].t );
  SelectedRealisatie = Level;
  UpdateBeleidspuntenMarkers();

  OpHome = false;
  return false;
}

function MouseOverRealisatieLevel( Level ){
  SluitDeelgebiedenLijst();

  SetPageTitleTo( BarInfo[ 'bp' + Level ].t);
  PreSelectedRealisatie = Level;
  UpdateBeleidspuntenMarkers();
  return false;
}

function MouseOutRealisatieLevel( Level ){
  PreSelectedRealisatie = null;
  UpdateBeleidspuntenMarkers();
}

var CloseDeelgebiedenLijstTimer = null;
function StartOutDeelgebiedenLijst(){
  EndCloseDeelgebiedenLijstTimer();
  CloseDeelgebiedenLijstTimer = setTimeout( 'SluitDeelgebiedenLijst()', 800 );
}

function EndCloseDeelgebiedenLijstTimer(){
  clearTimeout( CloseDeelgebiedenLijstTimer );
}

function OnMouseOutDeelgebiedenLijst(){
  StartOutDeelgebiedenLijst();
}

function MouseOverDeelgebied( Gebied ) {
  EndCloseDeelgebiedenLijstTimer();
  if ( SelectedDeelgebied == null ){
    PreSelectedDeelgebied = Gebied;
    UpdateBeleidspuntenMarkers();
  }
  return false;
}

function MouseOutDeelgebied( Gebied ) {
  StartOutDeelgebiedenLijst();
  PreSelectedDeelgebied = null;
  UpdateBeleidspuntenMarkers();
  return false;
}

function UpdateBeleidspuntenMarkers(){
  for( var i in BeleidsPuntCollection ){ 
    BeleidsPuntCollection[ i ].CheckActive();
  }

  if ( markerCollection[ 'Gemeentehuis' ] ){
    markerCollection[ 'Gemeentehuis' ].ManualActive = PreSelectedRealisatie != null || GemeenteBreedSelected;
    markerCollection[ 'Gemeentehuis' ].SetCorrectImage();
  }
}

function AttachExtraBPs(){
  for( var i in BeleidsPuntCollection ){
    BeleidsPuntCollection[ i ].AttachExtraBPs();
  }
}

function MouseOverGemeenteIcon(){
  SetPageTitleTo( Labels.OrganisatieBreedBeleid );

  GemeenteBreedSelected = true;
  UpdateBeleidspuntenMarkers();

  return true;
}

function MouseOutGemeenteIcon(){
  GemeenteBreedSelected = false;
  UpdateBeleidspuntenMarkers();

  return true;
}


function MouseOverGemeenteIconMap(){

  GemeenteBreedSelected = true;

  markerCollection[ 'Gemeentehuis' ].ManualActive = PreSelectedRealisatie != null || GemeenteBreedSelected;
  markerCollection[ 'Gemeentehuis' ].SetCorrectImage();

}

function MouseOutGemeenteIconMap(){
  GemeenteBreedSelected = false;
  UpdateBeleidspuntenMarkers();

  return true;
}


function MouseOverBeleidsPuntLink(Beleidspunt){
  if ( BeleidsPuntCollection[ Beleidspunt ] ){
    BeleidsPuntCollection[ Beleidspunt ].SetLinkMouseOver( true );
  }
  return false;
}

function MouseOutBeleidsPuntLink(Beleidspunt){
  if ( BeleidsPuntCollection[ Beleidspunt ]){  
    BeleidsPuntCollection[ Beleidspunt ].SetLinkMouseOver( false );
  }
  return false;
}

function InitBeleidspuntenMarkers(){
  for( var i in BeleidsPuntCollection ){
    BeleidsPuntCollection[ i ].InitMarkers();
  }
}

function InitBeleidspuntenLinks(){
  for( var i in BeleidsPuntCollection ){
    BeleidsPuntCollection[ i ].InitLink();
  }
}

function ClickDeelgebied( Gebied ) {
  if ( ! MapVisible ){ return true; }

  SetBarTo( 292 );
  SelectedRealisatie = null;

  SelectedDeelgebied = Gebied;  
  SluitDeelgebiedenLijst();
  if ( insert1 ){
    insert1.hide();
  }

  if ( DeelgebiedenData[ Gebied ] ){
    Teaser.SetActive( 'Teaser_Deelgebied_' + Gebied );
    SetPageTitleTo( DeelgebiedenData[ Gebied ].name );
    SetPageTitle();
  }

  new FlyGoogleMapTo( [ {p:HomePostion,a:['zooming']}, {p:new GPositionAndZoomLevel(DeelgebiedenData[ Gebied ].XPos,DeelgebiedenData[ Gebied ].YPos,DeelgebiedenData[ Gebied ].ZPos),a:['navigate','zooming']} ] );

  OpHome = false;

  return false;
}

var FlyMovement = null;

function FlyGoogleMapTo( Positions, Settings ){
  
  if ( Positions.length > 0 ){
    var LastPosition = Positions[ Positions.length - 1 ];
    map.setZoom( LastPosition.p.Z );

    var NewCenter = new GLatLng( LastPosition.p.X, LastPosition.p.Y );

    map.setCenter( NewCenter );
//    map.panTo( NewCenter );
  }


  return;
 
  if ( FlyMovement ){ 
    clearTimeout( FlyMovement.Interval );
    clearTimeout( FlyMovement.Timeout );
  }

  Settings = Settings ? Settings : {};
  if ( ! Settings.ZoomTime ) Settings.ZoomTime = 600;
  if ( ! Settings.PanTime ) Settings.PanTime = 800;
  
  this.Positions = Positions;
  this.CurrentIndex = 0;
  this.NextPoint = null;
  this.ActionIndex = 0;
  this.Settings = Settings;
  this.Direction = 1;

  this.CurrentLevel = map.getZoom();
  this.InnerTime = Settings.ZoomTime;
  this.Interval = null;
  this.Timeout = null;

  FlyMovement = this;

  if ( ! this.GetNextPoint() ){
    return;
  }
}

  
FlyGoogleMapTo.prototype = {

  GetNextPoint: function( ){
    if ( this.Positions.length > this.CurrentIndex ){
      this.NextPoint = this.Positions[ this.CurrentIndex ];
      this.TargetLevel = this.NextPoint.p.Z;

      this.CurrentIndex ++;
      this.ActionIndex = 0;
      this.NextAction();
    }

  },

  NextAction : function (){
    if ( this.NextPoint.a.length > this.ActionIndex ){

      this.ActionIndex ++;

      switch( this.NextPoint.a[ this.ActionIndex - 1 ] ){

        case 'navigate' : {
          this.CenterStart();
        } break;
   
        case 'zooming' : {
          this.ZoomTo_Start();
        } break;

      }
    } else {
      this.GetNextPoint();
    }
  },
 
  ZoomTo_Start : function(){
    if ( this.CurrentLevel != this.TargetLevel ){
      this.Direction = this.CurrentLevel > this.TargetLevel ? -1 : 1;
      this.InnerTime = this.Settings.ZoomTime / ( this.CurrentLevel - this.TargetLevel ) * this.Direction * -1;
      FlyMovement.ZoomTo_Step();
    } else {
      this.NextAction();
    }
  },

  ZoomTo_Step : function(){
    if ( this.CurrentLevel != this.TargetLevel ){

      this.CurrentLevel += this.Direction;

      map.setZoom( this.CurrentLevel );

      this.Interval = setTimeout( 'FlyMovement.ZoomTo_Step()', this.InnerTime );
    } else {
      clearInterval( this.Interval );
      this.NextAction();
    }
  },
 
  CenterStart : function( ){
    clearInterval( this.Interval );

    var NewCenter = new GLatLng( this.NextPoint.p.X, this.NextPoint.p.Y );
  
    if ( ! NewCenter.equals( map.getCenter() ) ){
      map.panTo( NewCenter );
      this.Timeout = setTimeout( 'FlyMovement.CenterEnd()', this.Settings.PanTime );
    } else { 
      this.CenterEnd();
    }    
  },
  
  CenterEnd : function(){
    clearTimeout( this.Timeout ); 
    this.NextAction();
  }
};

function SetWelkomsTekstTo( text, image ){
alert( text );
  var wdiv = document.getElementById( 'WelkomTekst' );
  if ( wdiv ){
    wdiv.innerHTML = '';
    var div = document.createElement( 'div' );
    div.innerHTML = text;
    if ( image ){
      if ( 'url(' + image + ')' != wdiv.style.backgroundImage ){
        wdiv.style.backgroundImage = 'url(' + image + ')';
      }
    } else {
      wdiv.style.backgroundImage = 'none';
    }
    wdiv.appendChild( div );
  }
}

function RestoreWelkomstTekst(){
  Teaser.SetActive( 'Teaser_Burgemeester' );

//  SetWelkomsTekstTo( HomeWelkom.txt + '<br /><a href="' + absPath + 'lees-meer-over-welkom/" >&gt;&gt;&gt; lees verder</a>', absPath + HomeWelkom.img );
}

if ( self.GControl ){

  function MyZoomControl( StartZoomLevel ){
    this.container = null;
    this.StartZoomLevel = StartZoomLevel;
    this.CurrentZoomLevel = StartZoomLevel;
    this.ZoomIn = null;
    this.ZoomOut = null;
    this.Bar = null;
    this.Slider = null;
    this.SliderObj = null;
    this.CurrentZoomLevel = null;
    this.MinZoom = 17;
    this.MaxZoom = 7;
    this.Step = 75 / ( this.MinZoom - this.MaxZoom );
    this.Map = null;
  }

  MyZoomControl.prototype = new GControl();
  MyZoomControl.prototype.initialize = function(map) {
    this.container = document.createElement( 'div' );
    this.Map = map;

    this.ZoomIn = document.createElement( 'div' );
    this.ZoomIn.Control = this;
    this.ZoomIn.id = 'MyZoom_ZoomIn';
    this.container.appendChild( this.ZoomIn );
    GEvent.addDomListener(this.ZoomIn, "click", function() {
      if ( map.getZoom() < this.Control.MinZoom ){
        map.zoomIn();
        this.Control.SetSliderPosition( map );
      }
    });

    this.ZoomOut = document.createElement( 'div' );
    this.ZoomOut.Control = this;
    this.ZoomOut.id = 'MyZoom_ZoomOut';
    this.container.appendChild( this.ZoomOut );
    GEvent.addDomListener(this.ZoomOut, "click", function() {
      if ( map.getZoom() > this.Control.MaxZoom ){
        map.zoomOut();
      }
    });
  
    var SliderContainer = document.createElement( 'div' );
    SliderContainer.style.position = 'absolute';
    SliderContainer.style.left = '0px';
    SliderContainer.style.top = '27px';
    SliderContainer.style.width = '27px';
    SliderContainer.style.height = '75px';
    this.container.appendChild( SliderContainer );

    this.Bar = document.createElement( 'div' );
    this.Bar.id = 'MyZoom_Bar';
    this.container.appendChild( this.Bar );

    var self = this;

    GEvent.addDomListener( this.Bar, "click", function( evt ){
      var Y = evt.offsetY ? evt.offsetY : evt.layerY;
      var Pos = Math.round( Y / self.Step );
      self.Map.setZoom( self.MinZoom - Pos );
    });

    this.SliderObj = document.createElement( 'div' );
    this.SliderObj.Control = this;
    this.SliderObj.id = 'MyZoom_Slider';
    this.container.appendChild( this.SliderObj );

    this.Slider = new GDraggableObject( this.SliderObj, {container:SliderContainer} );

    GEvent.addDomListener( this.Slider, "dragend", function(){
      self.DragEnd();
    });

    this.SetSliderPosition( );

    GEvent.addDomListener(this.Map,"zoomend", function( a, b ){ 
      self.AfterZoom( b );
    });

    map.getContainer().appendChild(this.container);

    return this.container;
  }

  MyZoomControl.prototype.SetSliderPosition = function( ) {
    var ZoomLevel = this.Map.getZoom();
    if ( ZoomLevel > this.MinZoom ){
      this.Map.setZoom( this.MinZoom );
      return;
    }
    if ( ZoomLevel < this.MaxZoom ){
      this.Map.setZoom( this.MaxZoom );
      return;
    }
    this.CurrentZoomLevel = ZoomLevel;
    ZoomLevel = isNaN( ZoomLevel ) ? this.StartZoomLevel : ZoomLevel;
    this.Slider.moveTo( new GPoint( 0, Math.floor( (this.MinZoom - ZoomLevel) * this.Step ) ) );
  }

  MyZoomControl.prototype.AfterZoom = function ( b ){
    this.SetSliderPosition();
  }

  MyZoomControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(14, 36));
  }
 
  MyZoomControl.prototype.DragEnd = function(){
    var Y = parseInt( this.SliderObj.style.top );
    var Pos = Math.round( Y / this.Step );
    this.Map.setZoom( this.MinZoom - Pos );
    this.SetSliderPosition( );
  }
}

function TeaserSystem(){
  this.Initialised = false;
  this.Holder = null;
  this.AvailableElements = new Array();
  this.AvailableIDs = new Array();
  this.CurrentActiveID = null;
  this.CurrentIndex = null;
  this.Running = false;
  this.Looper = null;
}

TeaserSystem.prototype.Init = function( ){
  if ( ! this.Initialised ){
    this.Holder = document.getElementById( 'TeaserHolder' );
    if ( this.Holder ){
      for( var i = 0; i < this.Holder.childNodes.length; i++ ){
        var ChildDiv = this.Holder.childNodes[ i ];
        if ( ChildDiv.tagName == 'DIV' ) {
          this.AvailableElements[ ChildDiv.id ] = ChildDiv;
          if ( ChildDiv.className.indexOf( 'Deelgebied' ) < 0 ){
            this.AvailableIDs.push( ChildDiv.id );
          }
          if ( ChildDiv.style.block != 'none' ){
            this.CurrentActive = ChildDiv.id;
          }
        }
      }
      this.Initialised = true;
    }
  } 
}

TeaserSystem.prototype.SetActive = function( id, ContinueLoop ){
  this.Init();
  if ( this.CurrentActiveID != id ){
    for( var index in this.AvailableElements ){
      if ( index == id ){
        if ( this.CurrentActiveID ){
          this.AvailableElements[ this.CurrentActiveID ].style.display = 'none';
        }
        this.AvailableElements[ id ].style.display = 'block'; 
        this.CurrentActiveID = id;
      }
    }
  }
  if ( ! ContinueLoop ){ 
    this.Stop();
  }
}

TeaserSystem.prototype.Run = function( ){
  if ( ! this.Running ){
    this.Init();
    this.Running = true;
    this.CurrentActiveIndex = 0;
    this.Continue();
  }
}

TeaserSystem.prototype.Step = function( ){
  if ( this.Running ){
    this.CurrentActiveIndex = this.CurrentActiveIndex < this.AvailableIDs.length ? this.CurrentActiveIndex + 1 : 0;
    this.SetActive( this.AvailableIDs[ this.CurrentActiveIndex ], true );
  } else {
    this.Stop();
  }  
}

TeaserSystem.prototype.Stop = function( ){
  this.Pause();
  this.CurrentActiveIndex = 0;
}

TeaserSystem.prototype.Continue = function( ){
  var self = this;
  this.Looper = setInterval( function(){ self.Step() }, 5500 );
}

TeaserSystem.prototype.Pause = function( ){
  this.Looper = clearInterval( this.Looper );
  this.Running = false;
}

var Teaser = new TeaserSystem();

function SetOpacity( Element, Value ){
  Element.style.opacity = Value/100;
  Element.style.filter = 'alpha(opacity=' + Value + ')';
}

function ClickTab( TabElement, id ){
  document.getElementById( "KaartActief" ).style.top = parseInt( TabElement.style.top ) - 29 + 'px';
  return false;
}