/**
 * Configuration for site components javascript
 *
 * Configuration array structure:
 * {<component>: {<parameter>: value, <parameter>: value, ... }, ...}
 */
var siteComponentsConfig = {
    'tooltip': {
        'positionby': 'element' //Valid values: mouse (default), element
     },

    'keywords': {
        'elements': ['placeholder-content'],
        'skiptags': ['h1','h2','h3','h4','h5','h6'],
        'usetooltip': true
    }
    
    /*
    // Use this to override the default fontsizes in the fontsize selector
    // (html/lib/fontsize.js)
    
    'fontsize': {
        'sizes': ["10pt", "15pt", "24pt"]
    }
    */
    
};

function selectH24LightboxCategory(categoryid) {
    
    var activecategoryidcontainer = document.getElementById('lightboxactivecategoryid');
    var activecategoryid = activecategoryidcontainer.className;

    var oldMenuItem = document.getElementById('lightboxmenuitemid-'+activecategoryid);
    var oldArticles = document.getElementById('lightboxarticlesid-'+activecategoryid);
    if (oldMenuItem != null) { oldMenuItem.className = null; }
    if (oldArticles != null) { oldArticles.className = 'hidden'; }

    var newMenuItem = document.getElementById('lightboxmenuitemid-'+categoryid);
    var newArticles = document.getElementById('lightboxarticlesid-'+categoryid);
    if (newMenuItem != null) { newMenuItem.className = 'active'; }
    if (newArticles != null) { newArticles.className = 'active'; }
    
    activecategoryidcontainer.className = categoryid;
    
    return;
}


//Class to make google map
H24GoogleMap = Class.create({

    //divelement
    mapElement : "",
    
    //map obj
    gmapObj: "",
    
    //map info
    centerLatitude: "",
    centerLongitude: "",
    zoom: "",
    markerTitle: "",
    
    //json array with coordinates and infoWindowHtml, given in corepublish-articles
    markersArray: [],
    
    markerObj: "",
    
    //icon
    iconObj: "",

    initialize : function(centerLatitude, centerLongitude, zoom, markersArray){
        this.centerLatitude = centerLatitude;
        this.centerLongitude = centerLongitude;
        this.zoom = zoom;
        this.markersArray = markersArray;
        this.markerTitle = "FKRA";
        
        if (GBrowserIsCompatible()) {
            this.mapElement = $('map');
            
            //set up map object
            this.gmapObj = new GMap2(this.mapElement);
            this.gmapObj.addControl(new GLargeMapControl());
            this.gmapObj.addControl(new GMapTypeControl());
            this.gmapObj.setCenter(new GLatLng(this.centerLatitude, this.centerLongitude), this.zoom);
            
            //add point-markers to the map
            this.addMarkers();
            
        } else {
            $('map').innerHTML = "<p>We're sorry, but your browser doesn't support the Google Maps API.</p>";
        }
        
    },
    //create marker icons, with our own icon images
    createIcon : function() {
        this.iconObj = new GIcon();

        this.iconObj.image = "/images/googlemap/h24icon.png";
        this.iconObj.shadow = "/images/googlemap/h24shadow.png";
        
        this.iconObj.iconSize = new GSize(18, 27);
        this.iconObj.shadowSize = new GSize(1, 20);
        
        this.iconObj.iconAnchor = new GPoint(8, 27);
        this.iconObj.infoWindowAnchor = new GPoint(5, 1); 

    },
    //get one single marker to place on a given map-point. 
    //The marker uses our own icon, and adds given html into a info window shown on marker click
    getMarker : function(point, markerTitle, infoWindowHtml) {
        var marker = new GMarker(point,{ title:markerTitle, icon:this.iconObj });

        GEvent.addListener(marker, "click", function()  { 
               marker.openInfoWindowHtml(infoWindowHtml); 
        });
        
        return marker;

    },
    //take all marker-points given to the class and place them on the google map
    addMarkers : function(){
        //this.createIcon();
        
        gMarkerManagerObj = new GMarkerManager(this.gmapObj); 

        //array with all markers, contains point and html for info-window
        var markers = [];
        
        
        var point = "";

        //loop through markersArray and get array of map-markers
        for (var i = 0; i < this.markersArray.length; i++) {
            point = "";
            
            point = new GLatLng(this.markersArray[i]['latitude'],this.markersArray[i]['longitude']);
            markers.push(this.getMarker(point,this.markersArray[i]['title'],this.markersArray[i]['articles']));
        }
        
        //add all markers to the map
        gMarkerManagerObj.addMarkers(markers, 0,0); 
        gMarkerManagerObj.refresh(); 
            
    }

});