Ajax.Responders.register({
    onCreate: function() {        
        //showLoadingIndicator();
    },
    onComplete: function() {
        //hideLoadingIndicator();
    }
});

function centerMapToDefault() {
    map.setCenter(new OpenLayers.LonLat(lon,lat),zoom);
}

function getMapCenter() {
    return map.getCenter();
}

function initMap(options) {    
    var followUp = null;
    for(var option in options){self[option] = options[option];}
    var mapOptions = {numZoomLevels: 18}
    map = new OpenLayers.Map($('map'),mapOptions);
    if(name == 'India - Yahoo'){ 
        baseLayer = new OpenLayers.Layer.Yahoo("Yahoo",
            {sphericalMercator: true, maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508.34)}
        );
    }
    map.addLayer(baseLayer);
    trgProj = baseLayer.projection;
    centerMapToDefault();
    state = "UNKNOWN";
    
    /**
    *case statements here should be replaced by lookup references
    */
    
    var template = {externalGraphic: "${icon}",graphicWidth:"${width}",graphicHeight:"${height}"};
    
    var cont = {
        radius: function(feature){return Math.min(feature.attributes.count, 7) + 3;},
        icon: function(feature) { return "/images/" + feature.attributes.icon; },
        width: function(feature){ w = 12;
            var _icon = feature.attributes.icon;
            switch(_icon) {
                case 'camera.gif': w = 24; break;
                case 'Delay.gif':
                case 'Smooth.gif':
                case 'Slow.gif' : w = 12; break;
                case 'marker.png': w = 32; break;
                case 'highlight.gif': w = 45; break;
                case 'pink_carpooler.png':
                case 'blue_carpooler.png': w = 24; break;
                case 'move.gif': w = 30; break;
                case 'redbus.gif':
                case 'bus-icon.gif' :
                case 'bus-icon_green.gif': w = 24; break;
            }
            return w;
        },
        height:function(feature){ h = 12;
            var _icon = feature.attributes.icon;
            switch(_icon) {
                case 'camera.gif':
                case 'Delay.gif':
                case 'Smooth.gif':
                case 'Slow.gif': h = 12; break;
                case 'marker.png' : h = 29; break;
                case 'highlight.gif': h = 45; break;
                case 'pink_carpooler.png':
                case 'blue_carpooler.png': h = 24; break;
                case 'move.gif': h = 30; break;
                case 'redbus.gif':
                case 'bus-icon.gif' :
                case 'bus-icon_green.gif': h = 19; break;
            }            
            return h;
        }
    };
    
    for(var key in controls){
        var control = controls[key];
        map.addControl(control);
        control.activate();
    }
    vectorLayers = [];
    style = new OpenLayers.Style(template, {context: cont});
    var vLayer = null;
    layers.each(function(layer) {
           vLayer = new OpenLayers.Layer.Vector(layer,
            {
                projection: new OpenLayers.Projection("EPSG:4326"),
                styleMap: new OpenLayers.StyleMap({
                    "default": style,
                    "select": g
                })
            });  
            /*if(layer == 'roadcongestion') { 
            var evt = new OpenLayers.Event();
            OpenLayers.Event.register('click', vLayer, function(e){console.log('click event triggered');});
            }
            else {
            vectorLayers.push(vLayer);
            }*/
            if(layer != 'roadcongestion') { vectorLayers.push(vLayer); }
            map.addLayer(vLayer);
            /*if(layer == 'cameras') {
            var selectCtl = new OpenLayers.Control.SelectFeature(vLayer,{toggle:true,clickout:true,multiple:false,hover:false,onSelect:showCamera});
            map.addControl(selectCtl);
            selectCtl.activate();
            }     
            else if(layer == 'roadcongestion') {
            vLayer.events.register('click', vLayer, showNearByLocation);
            }
            else if(layer == 'markers' || layer == 'buses' || layer == 'dbs') {
            vLayer.events.register('click', vLayer, showLabel1);
            }
            else if(layer == 'markers' || layer == 'buses' || layer == 'dbs') {
            var mselect = new OpenLayers.Control.SelectFeature(vLayer, {toggle:true, clickout: true, multiple: false, hover: false, onSelect:showLabel, onUnselect:removeLabel})
            map.addControl(mselect);
            mselect.activate();
            }
            else if(layer == 'roadcongestion') {
            var rselect = new OpenLayers.Control.SelectFeature(vLayer, {toggle:true, clickout: true, multiple: false, hover: false, onSelect:showNearByLocation, onUnselect:removeNearByLocation});
            map.addControl(rselect);
            rselect.activate();
            }*/
            
        });      
        selectControl = new OpenLayers.Control.SelectFeature(vectorLayers,{toggle:true,clickout:true,multiple:false,hover:false,onSelect:featureSelected, onUnselect:featureUnselected});   
        map.addControl(selectControl);
        selectControl.activate();
        
        var rcl = map.getLayersByName('roadcongestion').first();
        rcl.events.register('click', rcl, showNearByLocation);
        request(self.followUp);   
        layerCount = map.getNumLayers();
        moveUp('roadcongestion');
    }    
    
    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,{
        defaultHandlerOptions: {
            'single': true,
            'double': true,
            'pixelTolerance':0,
            'stopSingle':false,
            'stopDouble':false
        },
        initialize: function(options){
            this.handlerOptions = new OpenLayers.Util.extend({},this.defaultHandlerOptions);
            OpenLayers.Control.prototype.initialize.apply(this,arguments);
            this.handler = new OpenLayers.Handler.Click(this,{
                'click': this.onClick,
                'dblclick': this.onDblClick
            },this.handlerOptions);
        },
        onClick: function(evt){
            if(mapID) { 
                markMapID(evt);
            }
            else if(isVisible('roadcongestion')) {
                showNearByLocation(evt);
            }
            //do nothing
        },
        onDblClick: function(evt){
            map.zoomIn();
            //do nothing
        }
    });
    
    function featureSelected(feature) {
        var feature_type = feature.attributes.type;
        if (feature_type == undefined) { return; }
        switch(feature_type) {
            case 'cameras' : showCamera(feature); break;
            case 'markers' :
            case 'buses' :
            case 'dbs' : showLabel(feature); break;
        }
    }
    
    function featureUnselected(feature) {
        var feature_type = feature.attributes.type;
        if(feature_type == undefined) { return; }
        switch(feature_type) {
            case 'markers' :
            case 'buses' :
            case 'dbs' : map.removePopup(popup);
        }
    }
    
    function showLayerIndexes(){
        map.layers.each(function(layer){
           // console.log("Layer " + layer.name + " is at the index " + map.getLayerIndex(layer));
        });
    }
    
    function moveUp(layerName) {
        var lyr = map.getLayersByName(layerName).first();
        var lyr_index = map.getLayerIndex(lyr);
        if(lyr_index == -1) { return; }
        map.raiseLayer(lyr, (layerCount - lyr_index));
    }
    
    function moveDown(layerName){
        var lyr = map.getLayersByName(layerName).first();
        map.raiseLayer(lyr, -1);
    }
    
    function setMapCenter(lat, lon, zoom) {
        map.setCenter(new OpenLayers.LonLat(lon, lat),zoom);
    }
    
    function request(url, callback){
        if(!url){return;}
        new Ajax.Request(url, {
            method: 'get',
            asynchronous:true, 
            evalScripts:true,
            onSuccess: function(transport){
                callback == 'undefined' ? transport.responseText : callback(transport.responseText);
            }
        });
    }
    
    function showNearByLocation(evt) {
        var _locn = map.getLonLatFromPixel(evt.xy);
        new Ajax.Request('/main/congestion_location?lat=' + _locn.lat + '&lon=' + _locn.lon, 
            { method: 'get', asynchronous: true, evalScripts: true});            
    }
    
    function highlightPoint(point, options) {
        if(typeof(options) == 'undefined') { options = {};}
        point["icon"] = 'highlight.gif';
        options["layer"] = 'highlight';
        if(!options["centerMap"]) {  options["centerMap"] = true; }
        options["zoom"] = 13;
        render([point], options);
        map.raiseLayer(map.getLayersByName('markers').first(),1);
    }
    
    function showRoute(points, options) {
        if(typeof(options) == 'undefined') { options = {}; }
        var _layer = options["layer"] ?  options["layer"] : 'markers';        
        var cur_layer = map.getLayersByName(_layer).first();                
        cur_layer.setVisibility(true);
        cur_layer.destroyFeatures();
        var _bounds = new OpenLayers.Bounds();
        /* The start point and end point are represented using icons */        
        var sGeom = new OpenLayers.Geometry.Point(points.first().lon,points.first().lat);
        var sPoint = new OpenLayers.Feature.Vector(sGeom,{'icon':'start.png'},null);

        var eGeom = new OpenLayers.Geometry.Point(points.last().lon,points.last().lat);
        var ePoint = new OpenLayers.Feature.Vector(eGeom,{'icon':'end.png'},null);

        var ptArray = points.collect(function(p){return p.lon + " " + p.lat;});
        var lnWKT = "LINESTRING(" + ptArray.join(",") + ")";
        var lnGeom = OpenLayers.Geometry.fromWKT(lnWKT);
        var lineString = new OpenLayers.Feature.Vector(lnGeom,null,style_route);
        /*
        var ls = [];
        var stPoint;
        var endPoint;
        for(var i=0; i<points.length; i++) {
            var point = points[i];
            if(i==0) { 
                var pgeom = new OpenLayers.Geometry.Point(point.lon,point.lat);
                stPoint = new OpenLayers.Feature.Vector(pgeom, {'icon':'start.png'}, null); 
                _bounds.extend(pgeom.getBounds());
            }
            else if(i== points.length-1) {
                var pgeom = new OpenLayers.Geometry.Point(point.lon,point.lat);
                endPoint = new OpenLayers.Feature.Vector(pgeom, {'icon':'end.png'}, null);
                _bounds.extend(pgeom.getBounds());
            }
            var pt = new OpenLayers.Geometry.Point(point.lon, point.lat);
            ls.push(pt);
        }
        lineString = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(ls), null, style_route);
        */
        cur_layer.addFeatures([lineString,sPoint,ePoint]);
        cur_layer.addFeatures(lineString);
        _bounds = lnGeom.getBounds();
       
        if(options["hideLayer"] && options["hideLayer"] == true) {
            cur_layer.setVisibility(false);        
        } 
        var _center = _bounds.getCenterLonLat();           
        map.setCenter(_center);
        var _zoom = options["zoom"] ? options["zoom"] : map.getZoomForExtent(_bounds);
        map.zoomTo(_zoom);
       
    }
    
    // Renders linestrings from the given set of points
    function renderMultiLine(results, options) {  
        if(typeof(options) == 'undefined') { options = {}; }
        var _layer = options["layer"] ?  options["layer"] : 'markers';        
        var cur_layer = map.getLayersByName(_layer).first();                
        cur_layer.destroyFeatures();                
        var line_strings = [];
        results.each(
            function(result) {
                var points = [];
                result.points.each(function(pt) {
                    var point = new OpenLayers.Geometry.Point(pt.lon,pt.lat);                    
                    points.push(point);
                });
                var ls = new OpenLayers.Geometry.LineString(points); 
                if( _layer == 'roadcongestion') {
                    line_strings.push(new OpenLayers.Feature.Vector(ls, null, get_style_route(result["speed"])));
                }
                else {
                    line_strings.push(new OpenLayers.Feature.Vector(ls, null, style_route));
                }
            }
        ); 
        
        cur_layer.addFeatures(line_strings);
        cur_layer.setVisibility(true);        
        if(options["hideLayer"] && options["hideLayer"] == true) {
            cur_layer.setVisibility(false);        
        }
    }
    
    function removeLabel(){
        map.removePopup(popup);
    }
    
    function showLabel(vectorObj) {        
        var _lat, _lon, _info;
        _lat = vectorObj.geometry.getCentroid().x;
        _lon = vectorObj.geometry.getCentroid().y;
        _info = vectorObj.attributes.info;
        showPopup(_lat, _lon, _info);
    }
    
    function showPopup(lat, lon, content) {
        if(popup != null) { map.removePopup(popup);}
        popup = new OpenLayers.Popup.FramedCloud("infopopup",
            new OpenLayers.LonLat(lat, lon),
            new OpenLayers.Size(200,50),
            content,
            null,
            true,
            function(e) { map.removePopup(popup);});
        map.addPopup(popup);
    }
    
    function getIcon(status) {
        var icon;
        switch(status) {
            case 'Smooth' : icon = 'green.gif'; break;
            case 'Slow' : icon = 'orange.gif'; break;
            case 'Delay': icon = 'red.gif'; break;
        }
        return icon;
    }
    
    function render(result,options) {
        var icon = null;
        if(typeof(options) == 'undefined') {
            options = {};
        }
        
        // clear highlight layer as well
        clearLayers(['highlight']);
        if(popup != null) { map.removePopup(popup); }
        var mapBounds = map.getExtent();
        var _layer = (typeof(options) == 'undefined' || !options["layer"]) ? 'markers' : options["layer"];
        var cur_layer = map.getLayersByName(_layer).first();        
        cur_layer.destroyFeatures();
        var pointList = [];
        //disableEdit();
        var center = (typeof(options) == 'undefined' || options.center) ? true : false;
        /**
        * this rule should be applied for a newly added feature or feature being editted
        *
        */
        if (options['icon'] != 'undefined' && options['icon'] != null) {
            icon = options['icon'];
        }        
        var point = null;
        var disp = "";
        var _bounds = new OpenLayers.Bounds();
        var pgeom = null;
        result.each(
            function(record){                
                if(_layer == 'traffichotspots') {
                    icon = getIcon(record.status);
                }              
                _props = {'fid': (record.id || null),'info': (record.info || record.label || null),'icon': (record.icon || icon || 'marker.png'), 'type' : _layer};
                var pgeom = new OpenLayers.Geometry.Point(record.lon,record.lat);
                //pgeom.transform(srcProj,trgProj);
                _bounds.extend(pgeom.getBounds());
                point = new OpenLayers.Feature.Vector(pgeom,_props, null);                 
                point.fid = record.id;
                point.icon = record.icon;             
                pointList.push(point);
                if(_layer == 'traffichotspots' && record.status == "Delay") {
                    if(traffic_delays == undefined) { traffic_delays = "";}
                    traffic_delays = traffic_delays + _props.info + "&nbsp; (" + record.smscode + ")<br/>";
                    traffic_delays_marquee = traffic_delays_marquee + "<span class='clstsu'>&nbsp;&#183;&nbsp;" + _props.info + " &nbsp; (" + record.smscode + ") </span>";
                }
            }
        );
        
        cur_layer.addFeatures(pointList);
        if(options["hideLayer"] == true) {
            cur_layer.setVisibility(false);
        }
        
        if (options["centerMap"] && options["centerMap"] == true ) {           
            var _center = _bounds.getCenterLonLat();           
            map.setCenter(_center);
            var _zoom = options["zoom"] ? options["zoom"] : map.getZoomForExtent(_bounds);
            map.zoomTo(_zoom);
        }
    }
    
    function resizeExtent(bounds){
        bounds.left *= 0.80;
        bounds.bottom *= 0.80;
        bounds.right *= 1.20;
        bounds.top *= 1.20;
        return bounds;
    }
    
    // TIS specific functions
    
    function dispCongestionLocation(location_info) {
        var loc = new OpenLayers.LonLat(location_info['lat'], location_info['lon']);
        _props = {'info': location_info['info'], 'icon': 'marker.png' };
        var pgeom = new OpenLayers.Geometry.Point(location_info.lon,location_info.lat);
        var point = new OpenLayers.Feature.Vector(pgeom,_props, null);
        var _lat = point.geometry.getCentroid().x;
        var _lon = point.geometry.getCentroid().y;
        showPopup(_lat, _lon, location_info['info']);
        /*if(popup != null) {
            map.removePopup(popup);
            popup = null;
        }
        popup = new OpenLayers.Popup.FramedCloud("locnpopup",
            new OpenLayers.LonLat(_lat, _lon),
            new OpenLayers.Size(200,50),
            location_info['info'],
            null,
            true,
            function(e) { map.removePopup(popup);});
        
        map.addPopup(popup);*/
    }
    
    function toggle_layers(options) {
        // each option will look like this {"name" : "cameras", "status" :true/false}
        if(popup != null) { map.removePopup(popup);}
        options.each(function(option) {            
            map.getLayersByName(option.name).first().setVisibility(option.status);           
            if( $(option.name) && (option.name == 'traffichotspots' || option.name == 'roadcongestion' || option.name == 'cameras') ) {
                if(option.status == true) { $(option.name).checked = "checked"; } else { $(option.name).checked = '';}
            }
            if (option.name == 'cameras') {
                if(option.status == true) { 
                    map.raiseLayer(map.getLayersByName('cameras').first(), 1); 
                }
                else if(isVisible('roadcongestion')) {
                    map.raiseLayer(map.getLayersByName('roadcongestion').first(), 1);
                }                
            }
        });
    }
    
    function clearAllLayers() {
        map.layers.each(function(layer) {
            if(!layer.isBaseLayer) {
                layer.destroyFeatures();
            }
        });
    }
    
    function clearLayers(layers) {
        layers.each(function(layer) {
            map.getLayersByName(layer).first().destroyFeatures();
        });
    }
    
    function show_traffic_status(locations, options)
    {
        if(typeof(options) == 'undefined') { options = {}; }
        traffic_delays = "<div style='text-align:left;font-weight:bold;margin-bottom:5px;padding:0;'>Delays at &nbsp;&nbsp;";
        traffic_delays_marquee = "<strong> Current Delays at </strong>"
        try {
            var results = eval ("(" + locations + ")");            
        }
        catch(e) {
            var results = eval(locations);
        }
        options["layer"] = "traffichotspots";
        traffic_delays += results.time.gsub(/-/, ' ') + "</div>";  
        render(results.locations, options);     
        
        if($('delays')) { 
            $("delays").innerHTML = traffic_delays.gsub(/$<br\/>/, '');
        }
        
        if(options['show_traffic_layer'] != undefined && options['show_traffic_layer'] == false) {
            hideLayer('traffichotspots');
            $('traffichotspots').checked = '';
        }
        if($('trafficstatus')) { $('trafficstatus').innerHTML = results.time.gsub(/-/, ' '); }
        
        hideLoadingIndicator();
        
        if(options['delaysMarquee'] != 'undefined' && options['delaysMarquee'] == true) {
            startticker(options['marqueeWidth']);
        }
    }
    
    function get_traffic_status(options) {
        var reqURL = '/trafficstatus_cache.txt?d=' + (new Date()).getTime();
        new Ajax.Request(reqURL, {
            method: 'get', 
            asynchronous:true, 
            evalScripts:true, 
            onSuccess:function(response){ 
                show_traffic_status(response.responseText, options);
            }
        });            
    }
    
    function show_road_congestion(locations) {
        try {
            var results = eval("(" + locations + ")");
        }
        catch(e) {
            var results = eval(locations);
        }
        renderMultiLine(results.locations, {"layer" : "roadcongestion", "centerMap" : false});
        var _time = results.time;                    
        if ($('last_updated_at')) { 
            $('last_updated_at').innerHTML = response.time;
        }
    }
    
    function get_congestion_data() {
        var reqURL = '/road_congestion_cache.txt?d=' + (new Date()).getTime();
        new Ajax.Request(reqURL, {method: 'get', asynchronous:true, evalScripts:true, 
            onSuccess: function(response) {
                show_road_congestion(response.responseText);
            }
        });
    }  
    
    function getParkingIcon(status) {
        return (status>0) ? '/images/parking.png' : '/images/no-parking.jpg';
    }
    
    function build_parking_listing(locations) {
        if(locations.length == 0) {
            $('parking_status').innerHTML = "Sorry! This service is not currently available. Please try after sometime";
            $('parking_status').show();
            return;
        }
        var _html = "<ul>";
        locations.each (function(location) {
            var _lat = location['lat'];
            var _lon = location['lon'];
            var _label = location['info'];
            _html += "<li><A href='javascript:void(null);' class='details_link' onClick='javascript:highlightPoint(" + {'lon': _lon, 'lat': _lat, 'info' : _label} + ");'>"  + location['info'] + "</A></li>";    
        } );
        _html += "</ul>";
        $('parking_status').innerHTML = _html;
        $('parking_status').show();
    }
    
    function plot_parking_availability() {
        new Ajax.Request('/parking_cache.txt', {method: 'get', asynchronous:true, evalScripts:true,
            onLoading:function() {
                showLoadingIndicator("Loading...");
            },
            onSuccess:function(response){
                try {
                    result = eval("(" + response.responseText + ")");
                }
                catch(e) {
                    result = eval(response.responseText);
                }
                render(result.locations, {'centerMap' : true});
                build_parking_listing(result.locations);
                toggle_layers([{'name' : 'traffichotspots', 'status' : false}, {'name' : 'roadcongestion', 'status' : false}]);
                hideLoadingIndicator();
            },
            onFailure: function(response) {
                $('parking_status').innerHTML = "Sorry! Could not fetch the parking status at this moment. Please try after sometime.";
                Element.show('parking_status');
                hideLoadingIndicator();
            }
        });
    }
    
    function parseJSON(jsonData) {        
        var parsedData;
        try {
            parsedData = eval("(" + jsonData + ")");
        }
        catch(e) {
            parsedData = eval(jsonData);
        }
        return parsedData;
    }
    
    function plot_bmtc_track_data(options) 
    {
        if(typeof(options) == 'undefined') {
            options = {};
        }
        if ($('t_routeno').selectedIndex == 0) {
            var reqURL = '/bus_track_cache.txt?d=' + (new Date()).getTime();
            new Ajax.Request(reqURL, { 
                method: 'get', 
                asynchronous:true, 
                evalScripts:true, 
                onLoading: function() { 
                    //showLoadingIndicator('Loading bus positions...');
                }, 
                onFailure: function(response) { 
                    showLoadingIndicator("Failed to load the bus positions. Please try later.");
                    setTimeout(hideLoadingIndicator(), 10000);
                },
                onSuccess: function(response) {
                    var busPositions = parseJSON(response.responseText);
                    render(busPositions["dbs"], {'layer' : 'dbs', 'centerMap' : true});
                    if( options['dbs_only'] == undefined || (options['dbs_only'] != undefined && options['dbs_only'] == false) ) {
                        render(busPositions["other"], { 'layer' : 'buses', 'centerMap' : false});
                    }
                    map.zoomTo(12);
                    toggle_layers([{'name' : 'buses', 'status' : false}]);      
                    //hideLoadingIndicator();
                }
            });
        }
        else {
            var sel_index = $('t_routeno').options.selectedIndex;
            var route_no = $('t_routeno').options[sel_index].value;
            new Ajax.Request('/bus/track_route?t_routeno=' + route_no, { 
                method: 'get', 
                asynchronous: true, 
                evalScripts: true, 
                onLoading: function()
                { 
                    showLoadingIndicator('Loading bus positions...');
                },
                onSuccess: function() { 
                    hideLoadingIndicator(); 
                }
            });
        }
    }
    
    function load_cameras(cameras) {
        try {
            var locs = eval ("(" + cameras + ")");
        }
        catch(e) {
            var locs = eval(cameras);
        }
        render(locs.locations, {"layer" : "cameras", "centerMap" : false, "hideLayer" : true, "icon" : "camera.gif"});
        LIVE_CAMERAS = locs.cams;
    }    
    
    function isVisible(layer) {
        var lyrs = map.getLayersByName(layer)
        return lyrs.length == 0 ? false : lyrs.first().getVisibility();          
    }
    
    function hideAllLayers(options) {
        layers.each(function(l){
            map.getLayersByName(l).first().setVisibility(false);
            obj = $(l);
            if(obj){
              obj.checked = "";
            }
        });

        /*
        map.layers.each(function(layer) { 
            if(layer.name == 'traffichotspots' || layer.name == 'roadcongestion' || layer.name == 'cameras'){
                $(layer.name).checked = "";
            }
            if(!layer.isBaseLayer && layer.name != options.except) { layer.setVisibility(false); }
        });
        */
    }
    
    
    function showLocation(location, options) {
        var arr = new Array();
        arr.push(location);
        render(arr, options);
    }
    
    // Get the style of the linestring which represents a road 
    // based on the speed.
    function get_style_route(speed) {
        if (speed < 10) {
            return {
                strokeColor: "#FF0000",
                strokeOpacity: 1,
                strokeWidth: 5,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
            };
        }
        else if (speed > 30) {
            return {
                strokeColor: "#4AFF1F", //"#99FF33",
                strokeOpacity: 1,
                strokeWidth: 5,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
            };
        }
        else {
            return {
                strokeColor: "#FF9933",
                strokeOpacity: 1,
                strokeWidth: 5,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
            };
        }
    }
    
    // Global variables 
    
    var layers = ["traffichotspots", "buses", "highlight", "dbs", "mapid", "markers", "cameras", "roadcongestion"];
    
    var controls = {
        "logo": new OpenLayers.Control.MapunityText(),
        "position": new OpenLayers.Control.MousePosition({'displayProjection': new OpenLayers.Projection("EPSG:4326"),'numDigits':4}),
        "click": new OpenLayers.Control.Click({handlerOptions:{'double':true,'single':true,'stopSingle':true,'stopDouble':true}})
        //"hover": new OpenLayers.Control.Hover(),
        //"panZoom": new OpenLayers.Control.PanZoomBar()
    };
    
    var g = OpenLayers.Util.extend({},OpenLayers.Feature.Vector.style['default']);
    g.graphicWidth = 45;
    g.graphicHeight = 45;
    g.graphicXOffset = -(g.graphicWidth/2);
    g.graphicYOffset = -(g.graphicHeight/2);
    g.externalGraphic = "../images/highlight.gif";
    g.graphicOpacity = 1;
    
    var name = 'India - Mapunity';
    var cluster = new OpenLayers.Strategy.Cluster();
    var tile_url = ["http://tiles0.mapunity.org","http://tiles1.mapunity.org","http://tiles2.mapunity.org","http://tiles3.mapunity.org"];
    var baseLayer = new OpenLayers.Layer.GTileGrid(name,tile_url,{},{'projection': new OpenLayers.Projection("EPSG:4326")});
    var map = null;
    var zoom = 12;
    var z = zoom;
    var lat = 28.642399;
    var lon= 77.1842999;
    var minZoom = 10;
    var maxZoom = 18;
    var vLayer = null; //vector layer
    var sLayer = null; // for displaying selection
    var state = "UNKNOWN"; //initialize the state to unknown
    var dragControl = null;
    var loc = null;
    var newFids = [];
    var selectedFeature = null;
    var frm = null;
    var cache = null;
    var hiddenLayers = [];
    var dest = "posts";
    var rslt = "results";
    var rsltHTML = "<ul id=results></ul>";
    var trgProj = new OpenLayers.Projection("EPSG:900913");
    var srcProj = new OpenLayers.Projection("EPSG:4326");
    var style;
    var style_route = {
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius: 6,
        pointerEvents: "visiblePainted"
    };
    var LIVE_CAMERAS;
    var camera_id;
    var current_live_cam_info;
    var camera_display_mode="detailed";
    var traffic_dealys;
    var traffic_dealys_marquee;
    var mapID = false;
    var popup = null;
    var layerCount = null;
    var vectorLayers = null;
    var selectControl = null;