jQuery(document).ready(function(){
   jQuery('#fade').cycle({
      'fx' : 'fade'
   })

   jQuery( '.thumbs a ').click( function( event ){
      var newSrc = jQuery(this).attr('href');
      if( newSrc != jQuery('div .original img').attr('src') ){
         var height = jQuery('div .original ').height();
         var width = jQuery('div .original ').width();

         jQuery(' div .original').width( width );
         jQuery(' div .original').height( height );

         jQuery('div .original img').remove();


         jQuery('div .original ').append( '<img src="' + newSrc + '"/>');

         jQuery('div .original img').hide();
         jQuery('div .original img').fadeIn('slow');
         

      }
      event.preventDefault();
   });
   myGoogleMap = new googleMap( 'map' );
   myGoogleMap.init();
});


function googleMap( target ) {
   this.centerAr = new Array ( 54.935442, 8.32685 );
   this.target = target;
   this.zoom = 15;
   this.markerAr = new Array();
   this.map = '';
   this.objectsAr = new Array (
      {
         'name' : 'Strandhaus Feldlerche',
         'LatLng1' : 54.935273,
         'LatLng2' : 8.318984,
         'adress' : 'Westerstra&szlig;e 9 <br /> 25996 Wenningstedt',
         'image' : 'strandhaus_feldlerche.jpg',
         'link' : 'strandhaus_feldlerche.html'
      },
      {
         'name' : 'Landhaus Feldlerche',
         'LatLng1' : 54.934193,
         'LatLng2' : 8.320475 ,
         'adress' : 'Horsatal 4 <br /> 25996 Wenningstedt',
         'image' : 'landhaus_feldlerche.jpg',
         'link' : 'landhaus_feldlerche.html' 
      },
      {
         
         'name' : 'Friesenstube',
         'LatLng1' : 54.936126,
         'LatLng2' : 8.31826,
         'adress' : 'Risgap 18 <br /> 25996 Wenningstedt',
         'image' : 'friesenstube.jpg',
         'link' : 'friesenstube.html'   
      },
      {
         'name' : 'Lerchennest',
         'LatLng1' : 54.935877,
         'LatLng2' : 8.319241,
         'adress' : 'Westerstra&szlig;e 11 <br /> 25996 Wenningstedt',
         'image' : 'lerchennest.jpg',
         'link' : 'lerchennest.html'   
      }
   );
   this.init = function() {
      
      this.map = new google.maps.Map2(document.getElementById( this.target ));
      this.map.setCenter( new google.maps.LatLng( this.centerAr[0], this.centerAr[1] ), this.zoom );
      this.map.addControl(new GLargeMapControl3D());
      this.map.addControl( new GMapTypeControl() );
      
      this.initMarkers();
      
   }
   this.initMarkers = function() {
   
      objectsAr = this.objectsAr;
      var html = '';
      this.markerAr = new Array();
      var i = 0;
      for( i = 0; i < objectsAr.length; i++ ){
         this.map.addOverlay( this.createMarker( new GLatLng( objectsAr[i]['LatLng1'],
            objectsAr[i]['LatLng2'] ) , i, this.map ));
      }
      
   }
   
   
   this.createMarker = function(point, number, map) {
      objectsAr = this.objectsAr;
      map = this.map;
      var marker = new GMarker(point);
      i = number;
      marker.value = number;
      GEvent.addListener(marker, "click", function() {
      i = marker.value;
      
         var myHtml = '<div class="' + i + '" style="width: 280px; height: 260px; padding:10px;"><p style="font-weight: bold;"><a href="'+ objectsAr[i]['link'] + '">' + objectsAr[i]['name'] + '</a></p><p>' + objectsAr[i]['adress'] + '</p><p><br /><a href="'+ objectsAr[i]['link'] + '">' +  '<img src="./files/images/map_pictures/' +  objectsAr[i]['image'] + '" /></a></p>' + '</div>';
         map.openInfoWindowHtml(point, myHtml);
         map.setCenter( new GLatLng( objectsAr[i]['LatLng1'], objectsAr[i]['LatLng2'] ) );
      });
      
      
      return marker;
   }
   
}