var MightyMap = Class.create();

MightyMap.prototype = {

    //
    //  initialize(), required by the lib.
    //
    initialize: function() { 
    
        var objBody = $$('body')[0];
    
        objBody.appendChild(Builder.node('div',{id:'googleoverlay'}));
        objBody.appendChild(Builder.node('div',{id:'mapbox'}, [
            Builder.node('div',{id:'outerMapContainer'}, 
                Builder.node('div',{id:'mapContainer'}, [
                    Builder.node('div',{id:'mapCloseDiv'}, [
                        Builder.node('a', {id:'closeLink2', href:'javascript:void(0);'}),
                        Builder.node('a', {id:'closeLink', href:'javascript:void(0);'},
                            Builder.node('img',{src:'/templates/diplomat/images/mapclose.gif', style:'border:none;padding:0px 5px 0px 5px;'})
                        )]
                    ),
                    Builder.node('div', {id:'googlediv'})]
                )
            )]
        ));
                
        $('googleoverlay').hide().observe('click', (function() { this.hideMap(); }).bind(this));
        $('closeLink').observe('click', (function() { this.hideMap(); }).bind(this));
        $('closeLink2').observe('click', (function() { this.hideMap(); }).bind(this));
        
        $('closeLink2').innerText = 'Stäng karta';
        $('mapbox').hide();
        
        var th = this;
        (function(){
            var ids = 'googleoverlay mapbox outerMapContainer mapContainer closeLink closeLink2 mapCloseDiv googlediv'; 
            $w(ids).each(function(id){ th[id] = $(id); });
        }).defer();
    },
    
    //
    //  displayMap()
    //
    displayMap: function(gposition) {
    
        //Make overlay fullscreen.
        var arrayPageSize = this.getPageSize();
        this.googleoverlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
        
        //display overlay and hide "shinetrough" controls.
        new Effect.Appear(this.googleoverlay, { duration: 0.2, from: 0.0, to: 0.8 });
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
        
        // calculate top and left offset for the mapbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var mapboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var mapboxLeft = arrayPageScroll[0];
        this.mapbox.setStyle({ top: mapboxTop + 'px', left: mapboxLeft + 'px' }).show();
        
        //start map.
        googledivmap = new GMap2(this.googlediv);
        googledivmap.addControl(new GSmallMapControl());
        googledivmap.addControl(new GMapTypeControl());
        
        //set position.
        this.setPosition(gposition);
    },
    
    //
    //  hideMap()
    //
    hideMap: function() {
    
        this.mapbox.hide();
        new Effect.Fade(this.googleoverlay, { duration: 0.2 });
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
    },
    
    //
    //  setPosition()
    //
    setPosition: function(gposition) {
    
        if( googledivmap )
        {
            //get points
            var posArr = gposition.Position.split(',');
            var latitude = posArr[0];
            var longitude = posArr[1];
            //--
            
            var points = [];
            var bounds = new GLatLngBounds();
            googledivmap.clearOverlays();
            
            var point = new GLatLng(latitude, longitude);
	        bounds.extend(point);
	        points.push(point);
	        var marker = new GMarker(point);
	        
	        //build info window.
	        
	        GEvent.addListener(marker, "click", function() {
		        html = "<table border='0' style='text-align:left;'>";
		        html += "<tr><td style='text-align:center;' colspan='2'><h3>"+ gposition.Title +"</h3></td></tr>";
	            html += "<tr><td valign='top'><p>"+ gposition.Address +"<br />";
	            html += "<a href='"+ gposition.Link +"'>"+ gposition.Title +"</a>";
	            html += "</p></td><td valign='top'><img src='"+ gposition.Image +"' alt='"+ gposition.Title +"' /></td></tr></table>";
		        googledivmap.openInfoWindowHtml(point, html);
	        });

            googledivmap.setCenter(bounds.getCenter());
		    googledivmap.addOverlay(marker);

            var zoom = googledivmap.getBoundsZoomLevel(bounds);
	        googledivmap.setZoom(zoom);
        }
    },

    //
    //  getPageSize()
    //
    getPageSize: function() {
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
}

var googledivmap;
google.load("maps", "2");

document.observe('dom:loaded', function () { Map = new MightyMap(); });