window.addEvent('domready', function() {
	function initialize() {
  	  if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(53.5553481, 9.9879692), 13);
        map.setUIToDefault();
      }
    }
	var coordsArray;
	var currentMarkerIndex = 0;

	initialize();
	
	// fake google nav ad the bottom of the page
	// adds and remove active state
	$('googlemapsNav').getElements('a').each(function(el){
		el.addEvent('click', function(e){
			$('googlemapsNav').getElements('a').getParent().removeClass('active');
			el.getParent().addClass('active');
			e.stop();
			req.send({url:el.get('href')});
		}
		); 
	});
		var req = new Request.HTML({ 
			onRequest: function() {
				map.clearOverlays();
			},
			onSuccess: function(text, xml) {
				var count = 0;
				var myMarker = [];
				var myArray  = [];					
				myArray = xml.getElements('marker');
				console.log(myArray.length)
				// reading xml 
				myArray[0].each(function(el) {
					var thisMarker    = [];
					thisMarker['0']   = el.getElements('title').get('text');
					thisMarker['1']   = el.getElements('desc').get('text');
					thisMarker['2']   = el.getElements('coords').get('lat');
					thisMarker['3']   = el.getElements('coords').get('long');
					thisMarker['4']   = el.getElements('timestamp').get('text');
					thisMarker['5']   = el.get('source');
					thisMarker['6']   = el.getElements('link').get('text');
					myMarker[count++]= thisMarker;						
				});
				// creating new elements from xml in a loop
				// console.log(myMarker.length);
				myMarker.each(function(el){
					// console.log(thisMarker);
					var latitude  = parseFloat(el[2]);
					var longitude = parseFloat(el[3]);
					var point     = new GLatLng(latitude, longitude);
					marker  = new GMarker(point);
					GEvent.addListener(marker, "click", function() {
						if(el[5]=='twitter') {
							// building a twitter bubble
							var myElTime = new Element('p', {
								'class': 'time',
								'text': " thinks I was here on "+el[4]
							});
							var myElLink = new Element('a', {
								'text' : el[5],
								'href' : 'https://twitter.com/chris__pc'
							});
							var myElDesc = new Element('h3', {
								'text': el[1]
							});
						
							var myEl = new Element('span', {
								'class': 'infoBubble '+ el[5]
							});
							myElLink.inject(myElTime, 'top');
							myElTime.inject(myEl);
							myElDesc.inject(myEl);
						}else{
							// building a flickr bubble
							var myElTime = new Element('p', {
								'class': 'time',
								'text': " is convinced I was here on "+el[4]
							});
							var myElTitle = new Element('h3', {
								'text': el[0]
							})
							var myElLink = new Element('a', {
								'text' : el[5],
								'href' : el[6]
							});
							var myElDesc = new Element('img', {
								'src': el[1]
							});
						
							var myEl = new Element('span', {
								'class': 'infoBubble '+ el[5]
							});
							myElLink.inject(myElTime, 'top');
							myElTime.inject(myEl);
							myElTitle.inject(myEl);
							myElDesc.inject(myEl);
							
						}
						this.openInfoWindowHtml(myEl);							

						// productName.inject(productBox);
						// productImage.inject(productBox);
						// marker.inject(productBox);
						

						// console.log(el);
					});
					map.addOverlay(marker);
				})
				
				map.panTo(new GLatLng(parseFloat(myMarker[0][2]), parseFloat(myMarker[0][3])));
			},
			onComplete: function(){ 
		  },
		//Our request will most likely succeed, but just in case, we'll add an
		//onFailure method which will let the user know what happened.
		onFailure: function() {
			// $('productwallgrid').set('text', 'The request failed.');
		}
	});
	// request last position on load
	req.send({url:'index.php/site/viewFeed/now'});
});