﻿//************************************************************************************************
//****  Base Mappings
//************************************************************************************************
var IMappedItems = new Class({
	options: {
		map: null,
		loadListing: true,
		listingTarget: null,
		countTarget: null,
		markerBaseUrl: null,
		listingBaseUrl: null,
		listingPageNumber: 1,
		updateOnMove: true,
		baseUrl: null,
		loadingText: 'Loading...',
		mapMoveRefreshTimeout: 500,
		markerIconUrl: 'Marker.png',
		markerFlashInterval: 0,
		markerFlashCount: 10
	},
	
    initialize: function(options) {
        this.setOptions(options);
        this.markerClusterer = null;
        this.markers = [];
        this.globalMarkers = new Hash();
        this.globalMarkersHidden = new Hash();
        this.hideAll = false;
        this.markerFlashInterval = this.options.markerFlashInterval;
        this.markerFlashCount = this.options.markerFlashCount;
        this.globalTimeoutID = 0;
    },
    
	reload: function() {
	    clearTimeout(this.globalTimeoutID); //clear previous timeouts
		this.loadMarkers();
		this.loadListings();
	},
	
	loadMarkers: function() {
        var gmBounds = this.options.map.getBounds();
        
        if (this.markerClusterer != null) {
            this.markerClusterer.clearMarkers();
        }

        this.globalMarkers.each(function(value, key) {
            
            //if(!gmBounds.contains(value.getPoint()))
            //{   
                this.options.map.removeOverlay(value); //remove all markers rather than just bounded
                this.globalMarkers.remove(key);
            //}
        }.bind(this));
         
        var bounds = this.options.map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();

        var markerParams = "sNELatitude="+northEast.lat()+"&sNELongitude="+northEast.lng()+"&sSWLatitude="+southWest.lat()+"&sSWLongitude="+southWest.lng();
        var postString = this.getPostString();
        
        if(postString && postString.length > 0){
            var ajaxCall = new Ajax(this.options.markerBaseUrl, {
                method: 'post',
                evalScripts: false,
                evalResponse: false,
                data: markerParams + "&" + this.getPostString(),
                onComplete: function(){
                    this.handleMarkers(ajaxCall.response.xml);
                }.bind(this)
            }).request();
        }
        else{
            var httpMarkerRequest = GXmlHttp.create();
            //grab the xml for the markers(GET)
            httpMarkerRequest.open("GET", this.options.markerBaseUrl + markerParams + "&sKeywords=&sPropertyTypes=&sAmenities=", true);
            
            httpMarkerRequest.onreadystatechange = function() {
                if (httpMarkerRequest.readyState == 4) 
                {
                    if(httpMarkerRequest.status == 200){
                        this.handleMarkers(httpMarkerRequest.responseXML);
                    }
                    else{
                        this.options.listingTarget.setHTML("There was an error while retrieving the markers.");
                        this.options.listingTarget.setHTML(httpMarkerRequest.responseText);
                    }
                }
            }.bind(this);
            httpMarkerRequest.send(null);
        }
	},
	
	loadListings: function() {
        var bounds = this.options.map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();

        /*
        var markerFullUrl = this.options.listingBaseUrl + "sNELatitude="+northEast.lat()+"&sNELongitude="+northEast.lng()+"&sSWLatitude="+southWest.lat()+"&sSWLongitude="+southWest.lng();

        var httpListingsRequest = GXmlHttp.create();
        
        this.options.listingTarget.setHTML(" <img src='"+ this.options.baseUrl +"images/loading.gif' alt='loading' align='absmiddle' /> " + this.options.loadingText);
       
        //grab the xml for the markers
        httpListingsRequest.open("GET", markerFullUrl, true);
        httpListingsRequest.onreadystatechange = function() 
        {
            if (httpListingsRequest.readyState == 4) 
            {
                if(httpListingsRequest.status == 200){
                    this.options.listingTarget.setHTML(httpListingsRequest.responseText);
                }
                else{
                    this.options.listingTarget.setHTML("There was an error while retrieving the markers.");
                    this.options.listingTarget.setHTML(httpListingsRequest.responseText);
                }
                this.fireEvent('onListingsLoaded');
            }
        }.bind(this);
        httpListingsRequest.send(null);
        */
        
        this.options.listingTarget.setHTML(" <img src='"+ this.options.baseUrl +"images/loading.gif' alt='loading' align='absmiddle' /> " + this.options.loadingText);

        var markerParams = "sNELatitude="+northEast.lat()+"&sNELongitude="+northEast.lng()+"&sSWLatitude="+southWest.lat()+"&sSWLongitude="+southWest.lng();
        var postString = this.getPostString();
        
        if(postString && postString.length > 0){
            var ajaxCall = new Ajax(this.options.listingBaseUrl, {
                method: 'post',
                evalScripts: false,
                evalResponse: false,
                data: markerParams + "&" + this.getPostString() + "&iPageNumber=" + this.options.listingPageNumber,
                onComplete: function(){
                    this.options.listingTarget.setHTML(ajaxCall.response.text);
                }.bind(this)
            }).request();
        }
        else{
            var httpListingsRequest = GXmlHttp.create();
            //grab the xml for the markers(GET)
            httpListingsRequest.open("GET", this.options.listingBaseUrl + markerParams + "&sKeywords=&sPropertyTypes=&sAmenities=&iPageNumber=" + this.options.listingPageNumber, true);
            
            httpListingsRequest.onreadystatechange = function() {
                if (httpListingsRequest.readyState == 4) 
                {
                    if(httpListingsRequest.status == 200){
                        this.options.listingTarget.setHTML(httpListingsRequest.responseText);
                    }
                    else{
                        this.options.listingTarget.setHTML("There was an error while retrieving the markers.");
                        this.options.listingTarget.setHTML(httpListingsRequest.responseText);
                    }
                    this.fireEvent('onListingsLoaded');
                }
            }.bind(this);
            httpListingsRequest.send(null);
        }
	},
	
    createMarker: function(oPoint, oIcon, hMeta) { // Creates a marker at the given point with the given number label
        var oOptions = new Object();
        oOptions.title = hMeta.get("Title");
        oOptions.icon = oIcon;

        var oMarker = new GMarker(oPoint, oOptions); 
        oMarker.id = hMeta.get("ID");
        oMarker.metaData = hMeta;

        GEvent.addListener(oMarker, "click", function() {
            oInfoTabs = new function() {
                if(hMeta){
                    var sMarkerHTML = "<b>" + hMeta.get("Name") + "</b>";
                    sMarkerHTML += "<br /><br />";
                    //sMarkerHTML += "<div style='font-size:9px;'><a href='javascript:addToTrip('"+hMeta.get("ID")+"');'>Add To Trip</a> | <a href=''>Add Favorite</a></div>";

                    // info window content
                    var oInfoTabs = [new GInfoWindowTab("Information", sMarkerHTML)];
                }
                else{
                    // default info window content
                    var oInfoTabs = [new GInfoWindowTab("Information", "Information not yet available.")];
                }
                
                return oInfoTabs;
            }
            
            this.fireEvent('onMapIconClicked');
            
            oMarker.openInfoWindowTabsHtml(oInfoTabs);
            
        }.bind(this));
        
        return oMarker;
    },
    
    hideAllMarkers: function() {           
        this.globalMarkers.each(function(value, key){
            value.hide();
        });
        
        this.hideAll = true;
        
        //zero out the hidden markers
        this.globalMarkersHidden = new Hash();
        
        this.fireEvent('onMarkersUpdated');
    },
    
    showAllMarkers: function() {           
        this.globalMarkers.each(function(value, key){
            value.show();
        });
        
        this.hideAll = false;
        
        //zero out the hidden markers
        this.globalMarkersHidden = new Hash();
        
        this.fireEvent('onMarkersUpdated');
    },
    
    hideMarkers: function(markerList) {           
        markerList.each(function(element){
            if(element.checked) {
                this.globalMarkers.get(element.value).hide();
                element.checked = false;
                
                //remove from global hidden list
                if(!this.globalMarkersHidden.hasKey(element.value)) {
                    //add to hidden global hidden list
                    this.globalMarkersHidden.set(element.value, this.globalMarkers.get(element.value));
                }
            }
        }.bind(this));
        
        this.fireEvent('onMarkersUpdated');
    },
    
    showMarkers: function(markerList) {           
        markerList.each(function(element){
            if(element.checked) {
                this.globalMarkers.get(element.value).show();
                element.checked = false;
                
                //remove from global hidden list
                if(this.globalMarkersHidden.hasKey(element.value)) {
                    this.globalMarkersHidden.remove(element.value);
                }
            }
        }.bind(this));
        
        this.fireEvent('onMarkersUpdated');
    },
    
    setMarkerVisibility: function(sMarkerID, sLatitude, sLongitude, bVisibility) { 
        if(sMarkerID != null)
        {
            //alert(this.globalMarkers.hasKey(sMarkerID));
            if(this.globalMarkers.hasKey(sMarkerID)) //only add new markers
            {
                var oMarker = this.globalMarkers.get(sMarkerID);

                if(oMarker)
                {
                    if(bVisibility && oMarker.isHidden()){
                        oMarker.show();
                        
                        //remove from global hidden list
                        if(this.globalMarkersHidden.hasKey(sMarkerID)) {
                            this.globalMarkersHidden.remove(sMarkerID);
                        }
                    }
                    
                    if(!bVisibility && !oMarker.isHidden()){
                        oMarker.hide();
                        
                        //add to hidden global hidden list
                        this.globalMarkersHidden.set(sMarkerID, this.globalMarkers.get(sMarkerID));
                    }
                }
            }
        }
    },
    
    locateMarker: function(sMarkerID, sLatitude, sLongitude) {            
        if(sMarkerID != null)
        {
            if(this.globalMarkers.hasKey(sMarkerID)) //only add new markers
            {
                var oMarker = this.globalMarkers.get(sMarkerID);
                
                //alert(oMarker);
                if(oMarker && !oMarker.isHidden()){
                    //gllPoint = oMarker.getPoint();
                    if(!this.globalFlashMarker) { //only flash if no other is flashing
                        this.globalFlashMarker = oMarker;
                        
                        this.markerFlashCount = this.options.markerFlashCount;
                        window.setTimeout(function(){this.flashMarker()}.bind(this), 200);
                    }
                }
            }
        }
    },
    
    panToMarker: function(sMarkerID, sLatitude, sLongitude) {            
        if(sMarkerID != null)
        {
            if(this.globalMarkers.hasKey(sMarkerID)) //only add new markers
            {
                var oMarker = this.globalMarkers.get(sMarkerID);
                
                //alert(oMarker);
                if(oMarker){
                    gllPoint = oMarker.getPoint();
                    _gmMap.setCenter(gllPoint, 9);
                }
            }
            else{
                _gmMap.setCenter(new GLatLng(parseFloat(sLatitude), parseFloat(sLongitude)), 9);
            }
        }
    },
    
    panToAndFlashMarker: function(sMarkerID, sLatitude, sLongitude) {            
        if(sMarkerID != null)
        {
            if(this.globalMarkers.hasKey(sMarkerID)) //check if marker exists
            {
                var oMarker = this.globalMarkers.get(sMarkerID);

                if(oMarker){
                    gllPoint = oMarker.getPoint();
                    _gmMap.setCenter(gllPoint, 9);
                    this.locateMarker(sMarkerID, sLatitude, sLongitude);
                }
            }
            else{
                _gmMap.setCenter(new GLatLng(parseFloat(sLatitude), parseFloat(sLongitude)), 9);
            }
        }
    },
    
    panToMarkerAndOpenInfo: function(sMarkerID, sLatitude, sLongitude) {            
        if(sMarkerID != null)
        {
            if(this.globalMarkers.hasKey(sMarkerID)) //check if marker exists
            {
                var oMarker = this.globalMarkers.get(sMarkerID);

                if(oMarker){
                    //gllPoint = oMarker.getPoint();
                    //_gmMap.setCenter(gllPoint, 11);
 
                    if(!oMarker.firstZoomed || oMarker.firstZoomed == false){
                        //re-initialize marker
                        oMarker.initialize(_gmMap);
                        oMarker.firstZoomed = true;
                    }
                    
                    //zoom in to marker
                    _gmMap.setZoom(9);
                    
                    setTimeout(function(){GEvent.trigger(oMarker, "click");},500)
                    
                }
            }
            else{
                _gmMap.setCenter(new GLatLng(parseFloat(sLatitude), parseFloat(sLongitude)), 9);
            }
        }
    },
    
    panTo: function(sLatitude, sLongitude) {
        _gmMap.setCenter(new GLatLng(parseFloat(sLatitude), parseFloat(sLongitude)), 9);
    },
    
    flashMarker: function() {
        //alert("flashing");
        if(this.markerFlashCount-- % 2 == 1) {
            this.globalFlashMarker.hide();
        } 
        else {
            this.globalFlashMarker.show();
        }
        
        if (this.markerFlashInterval == 0) {
            this.markerFlashInterval = window.setInterval(function(){this.flashMarker()}.bind(this), 200);  //flash marker - 200ms interval
        } 
        else {
            if(this.markerFlashCount < 0) {
              window.clearInterval(this.markerFlashInterval);
              this.markerFlashInterval = 0;
              this.globalFlashMarker = null;
            }
        } 
    },
    getMarkerMeta: function(sMarkerID) {            
        if(sMarkerID != null)
        {
            if(this.globalMarkers.hasKey(sMarkerID)) //only add new markers
            {
                var oMarker = this.globalMarkers.get(sMarkerID);
                
                if(oMarker) {
                    return oMarker.metaData;
                }
            }
        }
        
        return null;
    }
});

IMappedItems.implement(new Events, new Options);

//************************************************************************************************
//****  Mapped Campgrounds
//************************************************************************************************
var MappedCampgrounds = IMappedItems.extend({
	options: {
		loadingText: 'Loading Campgrounds',
		markerIconUrl: 'CampgroundMarker.png'
	},

	initialize: function(options) {
		this.setOptions(options);
		this.parent();

		this.markerIcons = [];
		//this.markerIcons[0] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/" + this.options.markerIconUrl);
		
		for(var i = 0; i <= 7; i++)
		{
		    this.markerIcons[i] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		    this.markerIcons[i].iconSize = new GSize(22, 22);
		    this.markerIcons[i].iconAnchor = new GPoint(2, 21);
		    
		    this.markerIcons[i].infoShadowAnchor = new GPoint(2, 22);
            this.markerIcons[i].shadow = this.options.baseUrl + "images/mapmarkers/TentMarkerShadow.png";
            this.markerIcons[i].shadowSize = new GSize(22, 22);
		}
		
		/*
		this.markerIcons[0] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[1] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[2] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[3] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[4] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[5] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[6] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		this.markerIcons[7] = new GIcon(G_DEFAULT_ICON, this.options.baseUrl + "images/mapmarkers/TentMarker.png");
		
		this.markerIcons[0].iconSize = new GSize(22, 22); 
		this.markerIcons[1].iconSize = new GSize(22, 22); 
		this.markerIcons[2].iconSize = new GSize(22, 22); 
		this.markerIcons[3].iconSize = new GSize(22, 22); 
		this.markerIcons[4].iconSize = new GSize(22, 22); 
		this.markerIcons[5].iconSize = new GSize(22, 22); 
		this.markerIcons[6].iconSize = new GSize(22, 22); 
		this.markerIcons[7].iconSize = new GSize(22, 22); 
		
		
		this.markerIcons[0].shadowSize = new GSize(22, 22);
		this.markerIcons[1].shadowSize = new GSize(22, 22);
		this.markerIcons[2].shadowSize = new GSize(22, 22);
		this.markerIcons[3].shadowSize = new GSize(22, 22);
		this.markerIcons[4].shadowSize = new GSize(22, 22);
		this.markerIcons[5].shadowSize = new GSize(22, 22);
		this.markerIcons[6].shadowSize = new GSize(22, 22);
		this.markerIcons[7].shadowSize = new GSize(22, 22);
		
		
        this.markerIcons[0].iconAnchor = new GPoint(2, 21);
        this.markerIcons[1].iconAnchor = new GPoint(2, 21);
        this.markerIcons[2].iconAnchor = new GPoint(2, 21);
        this.markerIcons[3].iconAnchor = new GPoint(2, 21);
        this.markerIcons[4].iconAnchor = new GPoint(2, 21);
        this.markerIcons[5].iconAnchor = new GPoint(2, 21);
        this.markerIcons[6].iconAnchor = new GPoint(2, 21);
        this.markerIcons[7].iconAnchor = new GPoint(2, 21);
        
        this.markerIcons[7].infoShadowAnchor = new GPoint(14, 25);
        this.markerIcons[7].shadow = "fingershadow.png";
        */


		this.loadMarkers();
		if(this.options.loadListing) {
		    this.loadListings();
		}
		
		if(this.options.updateOnMove){
            GEvent.addListener(this.options.map ,"moveend", function(){
                clearTimeout(this.globalTimeoutID); //clear previous timeouts
                this.globalTimeoutID = setTimeout(function(){this.reload()}.bind(this), this.options.mapMoveRefreshTimeout); //wait for map to be done scrolling - user end.
            }.bind(this));
        }
	},
	
	handleMarkers: function(results) {
	    if(results){
	        this.markers = [];
            var markers = results.documentElement.getElementsByTagName("Campground");

            //get the viewing area of the map...to be used later
            var bounds = this.options.map.getBounds();

            for (var i = 0; i < markers.length; i++) 
            {
                // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getElementsByTagName("Latitude")[0].firstChild.nodeValue);
                var lng = parseFloat(markers[i].getElementsByTagName("Longitude")[0].firstChild.nodeValue);
                
                //create point from lat/lng
                var gllPoint = new GLatLng(lat,lng);
                
                //get the meta data - create a hash object to hold the information
                var hMeta = new Hash();
                hMeta.set("ID", markers[i].getElementsByTagName("CampgroundID")[0].firstChild.nodeValue);
                hMeta.set("Name", markers[i].getElementsByTagName("Name")[0].firstChild.nodeValue);
                hMeta.set("Title", markers[i].getElementsByTagName("Name")[0].firstChild.nodeValue);
                hMeta.set("Source", markers[i].getElementsByTagName("Source")[0].firstChild.nodeValue);
                hMeta.set("PrimaryType", markers[i].getElementsByTagName("PrimaryType")[0].firstChild.nodeValue);
                
                if(markers[i].getElementsByTagName("Address1").length > 0 && markers[i].getElementsByTagName("Address1")[0].firstChild){
                    hMeta.set("Address1", markers[i].getElementsByTagName("Address1")[0].firstChild.nodeValue);
                }
                
                if(markers[i].getElementsByTagName("BusinessPhone").length > 0 && markers[i].getElementsByTagName("BusinessPhone")[0].firstChild){
                    hMeta.set("BusinessPhone", markers[i].getElementsByTagName("BusinessPhone")[0].firstChild.nodeValue);
                }
                
                if(markers[i].getElementsByTagName("ThumbnailImage").length > 0 && markers[i].getElementsByTagName("Address1")[0].firstChild){
                    hMeta.set("ThumbnailImage", markers[i].getElementsByTagName("ThumbnailImage")[0].firstChild.nodeValue);
                }
                
                hMeta.set("Latitude", lat);
                hMeta.set("Longitude", lng);
                
                if(!this.globalMarkers.hasKey(hMeta.get("ID"))) //only add new markers
                {
                    
                    var oMarkerIcon = G_DEFAULT_ICON;
                    
                    if(hMeta.get("PrimaryType") == "A.C.E. Campground"){
                        oMarkerIcon = this.markerIcons[1];
                    }
                    else if(hMeta.get("PrimaryType") == "National Forest Campground"){
                        oMarkerIcon = this.markerIcons[2];
                    }
                    else if(hMeta.get("PrimaryType") == "National Park Campground"){
                        oMarkerIcon = this.markerIcons[3];
                    }
                    else if(hMeta.get("PrimaryType") == "B.L.M. Campground"){
                        oMarkerIcon = this.markerIcons[4];
                    }
                    else if(hMeta.get("PrimaryType") == "Private Campground"){
                        oMarkerIcon = this.markerIcons[5];
                    }
                    else if(hMeta.get("PrimaryType") == "State Park Campground"){
                        oMarkerIcon = this.markerIcons[6];
                    }
                    else if(hMeta.get("PrimaryType") == "Recreation Area Campground"){
                        oMarkerIcon = this.markerIcons[7];
                    }
                    else{
                        oMarkerIcon = this.markerIcons[0];
                    }
                    
                    var oMarker = this.createMarker(gllPoint, oMarkerIcon, hMeta);

                    this.globalMarkers.set(hMeta.get("ID"), oMarker);
                    //added now to the markerCluster
                    //this.options.map.addOverlay(oMarker);
                    this.markers.push(oMarker);

                    
                    if(this.hideAll || this.globalMarkersHidden.hasKey(hMeta.get("ID"))) //check hidden status
                    {
                        oMarker.hide();
                    }
                }
            }
            if(this.options.countTarget && this.options.countTarget != null){
                this.options.countTarget.setHTML('[' + markers.length + ']');
            }
            
            if (this.markerClusterer != null) {
                this.markerClusterer.clearMarkers();
            }

            this.markerClusterer = new MarkerClusterer(this.options.map, this.markers, {maxZoom: 9, gridSize: 30});
        }
	},
	
    createMarker: function(oPoint, oIcon, hMeta) { // Creates a marker at the given point with the given number label
        var oOptions = new Object();
        oOptions.title = hMeta.get("Title");
        oOptions.icon = oIcon;

        var oMarker = new GMarker(oPoint, oOptions); 
        oMarker.id = hMeta.get("ID");
        oMarker.metaData = hMeta;

        GEvent.addListener(oMarker, "click", function() {
            oInfoTabs = new function() {
                if(hMeta){
                    var sMarkerHTML = "<div style='width:360px' height:200px;>";
                    
                    sMarkerHTML += "<b>" + hMeta.get("Name") + "</b>";
                    
                    if(hMeta.get("ThumbnailImage")){
                        sMarkerHTML += "<div style='float:left; padding-right:5px;'><img src='http://media.tempesttech.com/mediamanager/Export/Media.ashx?OriginalName="+hMeta.get("ThumbnailImage")+"&Width=60&Height=40&ResizeType=Crop' border='0' style='padding:1px; border:1px solid black;' align='left' /></div>";
                    }
                    sMarkerHTML += "<div style='font-size:9px; padding-bottom:5px;'>"+hMeta.get("PrimaryType")+" </div>";
                    
                    if(hMeta.get("Address1")){
                        sMarkerHTML += "<div style='font-size:9px;'>"+hMeta.get("Address1")+" </div>";
                    }
                    
                    if(hMeta.get("BusinessPhone")){
                        sMarkerHTML += "<div style='font-size:9px;'>"+hMeta.get("BusinessPhone")+"</div>";
                    }
                    sMarkerHTML += "<div style='font-size:9px;'><a href='" + _sLISTING_PATH + hMeta.get("ID")+".htm' target='_blank'>View Website</a></div><br clear='all' />";
                    
                    sMarkerHTML += "</div>";

                    // info window content
                    var oInfoTabs = [
                        new GInfoWindowTab("Information", sMarkerHTML), 
                        new GInfoWindowTab("Amenities", "<div id='amenititesTab' style='font-size:10px; color:gray;'><img src='"+ _sBASE_PATH +"images/loading.gif' alt='loading' align='absmiddle' /> Loading Amenities</div>"), 
                        new GInfoWindowTab("Photos", "<div id='photosTab' style='font-size:10px; color:gray;'><img src='"+ _sBASE_PATH +"images/loading.gif' alt='loading' align='absmiddle' /> Loading Photos</div>"), 
                        new GInfoWindowTab("Directions", "<div id='directionsTab' style='font-size:10px; color:gray;'><img src='"+ _sBASE_PATH +"images/loading.gif' alt='loading' align='absmiddle' /> Loading Directions</div>")
                    ];
                }
                else{
                    // default info window content
                    var oInfoTabs = [new GInfoWindowTab("Information", "Information not yet available.")];
                }
                
                return oInfoTabs;
            }
            
            /*
            var gifwoOptions = new Object();
            gifwoOptions.onOpenFn = function() {
                alert("test");
            }

            oMarker.openInfoWindowTabsHtml(oInfoTabs, {
                onOpenFn: alert(document.getElementById('amenititesTab'))
            });
            */
            
            oMarker.openInfoWindowTabsHtml(oInfoTabs);
            
            this.fireEvent('onMapIconClicked', oMarker);
            
        }.bind(this));
        return oMarker;
    },
    
    getPostString: function(){
        
        var sPostString = "";
        var bAmenityChecked = false;
        var bPropertyTypeChecked = false;
        var bKeywordChecked = false;
        
        var sKeywords = "";
        var sPropertyTypes = "";
        var sAmenities = "";
        var iCount = 0;
        
        //get checked amenities
        if(!$('chkAmenity').isHidden()){
            $$('.chkAmenities').each(function(el, i) {
                if(el.checked)
                {
                    if(iCount != 0){
                        sAmenities += ",";
                    }
                    sAmenities += el.value;
                    iCount++;
                }
            });
            
            bAmenityChecked = true;
        }

        iCount = 0;

        //get checked property types
        if(!$('chkPropertyType').isHidden()){
            $$('.chkPropertyTypes').each(function(el, i) {
                if(el.checked)
                {
                    if(iCount != 0){
                        sPropertyTypes += ",";
                    }
                    sPropertyTypes += el.value;
                    iCount++;
                }
            });
            
            bPropertyTypeChecked = true;
        }
        
        //get keywords
        if(!$('chkKeyword').isHidden()){
            sKeywords = $('txtKeywords').value;
            
            if(sKeywords.length > 0){
                bKeywordChecked = true;
            }
        }

        if(bAmenityChecked || bPropertyTypeChecked || bKeywordChecked) {
            return sPostString = "sAmenities= " +sAmenities + "&sKeywords="+ sKeywords +"&sPropertyTypes=" + sPropertyTypes;
        }
        else{
            return null;
        }
        
        //var markerFullUrl = this.options.markerBaseUrl + "sNELatitude="+northEast.lat()+"&sNELongitude="+northEast.lng()+"&sSWLatitude="+southWest.lat()+"&sSWLongitude="+southWest.lng();
    }
	
});

MappedCampgrounds.implement(new Events, new Options);


//************************************************************************************************
//****  ImageToggler
//************************************************************************************************
var ImageToggler = new Class({
	options: {
		iconCheckedUrl: null,
		iconUnCheckedUrl: null,
		targetImage: null,
		defaultStatus: true,
		onStatusChanged: null
	},
	
    initialize: function(options) {
        this.setOptions(options);
        
        //this.options.targetImages.each(function(element) {
        if(this.options.targetImage) {
            var element = this.options.targetImage;
            
            //set defaults
            element.src = this.options.iconCheckedUrl;
            element.setAttribute("status", "checked");

            element.addEvent("mouseover", function() {
                (window.ie)?this.setStyle('cursor', 'hand'):this.setStyle('cursor', 'pointer');
            }.bind(element));
            
            element.addEvent("mouseout", function() {
                this.setStyle('cursor', 'auto')
            }.bind(element));
                
            element.addEvent('click', function() {
                this.toggleStatus(element);
            }.bind(this, element));
            
            element.isHidden = function(){
                if(this.getAttribute("status") == "checked") {
                    return false;
                }
                else {
                    return true;
                }
            };

            element.toggleStatus = function(){
                if(element.getAttribute("status") == "checked") {
                    element.src = this.options.iconUnCheckedUrl;
                    element.setAttribute("status", "unchecked");
                }
                else {
                    element.src = this.options.iconCheckedUrl;
                    element.setAttribute("status", "checked");
                }
            }.bind(this, element);
            
            if(!this.options.defaultStatus){
                element.toggleStatus();
            }
            
        //}.bind(this));  
        }
    },
    
    toggleStatus: function(element){
        if(element.getAttribute("status") == "checked") {
            element.src = this.options.iconUnCheckedUrl;
            element.setAttribute("status", "unchecked");
        }
        else {
            element.src = this.options.iconCheckedUrl;
            element.setAttribute("status", "checked");
        }

        this.fireEvent('onStatusChanged', element);
    },
    
    changeStatus: function(target, status) {
        if(status == true){
            target.src = this.options.iconCheckedUrl;
            target.setAttribute("status", "checked");
        }
        else{
            target.src = this.options.iconUnCheckedUrl;
            target.setAttribute("status", "unchecked");
        }
	}
});

ImageToggler.implement(new Events, new Options);


//************************************************************************************************
//****  ChangeHandler
//************************************************************************************************
var ChangeHandler = new Class({
	options: {
	    changeTimeInterval: 2000,
		targets: null
	},
	
    initialize: function(options) {
        var iIntervalID = 0;
        
        this.setOptions(options);
        
        for(var i=0; i < this.options.targets.length; i++){
            this.options.targets[i].each(function(element) {
                element.addEvent("change", function () {
                    this.resetUpdateInterval();
                }.bind(this));
                
                //set defaults
                element.src = this.options.iconCheckedUrl;
                element.setAttribute("status", "checked");
                
            }.bind(this));
        }
    },
    
    resetUpdateInterval: function(element){
        clearTimeout(this.iIntervalID);
        
        this.iIntervalID = setTimeout(function() {
            this.fireEvent('onChangeEvent', element);
        }.bind(this), this.options.changeTimeInterval);
    }
});

ChangeHandler.implement(new Events, new Options);

//************************************************************************************************
//****  FocusBox
//************************************************************************************************
var FocusBox = new Class({
	options: {
        target:null,
        targetPanels: null,
        scrollDuration: 1500
	},
	
    initialize: function(options) {
        this.setOptions(options);
        
        this.targetID = 0;
        this.activePanel = 0;
        this.fxScollingWindow = new Fx.Scroll(this.options.target, {
            wait: false,
            wheelStops: false,
            duration: this.options.scrollDuration,
            transition: Fx.Transitions.Quad.easeInOut
        });
    },
    
    togglePanel: function(index){
        this.activePanel = index;
        this.fireEvent('onPanelLoading');
        this.fxScollingWindow.toElement(this.options.targetPanels[index]);
    }
});

FocusBox.implement(new Events, new Options);