var map;
var centerLatitude = 37.0625;
var centerLongitude = -95.677068; 
var startZoom = 4;
var deselectCurrent = function() {};

/* [listing 6-20] */
function initializePoint(pointData) {
	var point = new GLatLng(pointData.latitude, pointData.longitude);
        var icon = new GIcon();
	    icon.image = "quiltshops.png";
	    icon.shadow = "shadow50.png";
	    icon.iconSize = new GSize(24, 40);
	    icon.shadowSize = new GSize(37, 34);
	    icon.iconAnchor = new GPoint(9, 40);
	    icon.infoWindowAnchor = new GPoint(12, 5);
	    icon.infoShadowAnchor = new GPoint(18, 25);
	var marker = new GMarker(point,icon);
        //
        var tooltipinfo = pointData.state + ' ( ' + pointData.quiltshop_count + ' Quiltshops )';
        var tooltip = new Tooltip(marker,tooltipinfo,4); 
        marker.tooltip = tooltip;
        //
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
	var visible = false;
        

	listItemLink.href = "#";
	listItemLink.innerHTML = '<strong>' + pointData.state + ' </strong><span>' + pointData.quiltshop_count + ' Quiltshops</span>';
	//
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		deselectCurrent = function() { listItem.className = ''; }
                var infodetails = '<div><strong>' + pointData.state + ' </strong></div>';
                infodetails += '<div><span>' + pointData.quiltshop_count + ' Quiltshops </span></div>';
                infodetails += "<div><a href=\"" + "http://quiltingbok.com/findquiltshops/work/quiltshops/quiltshop_index.php?state=" + pointData.state + "\">Quilt Shops</a></div>";
		// marker.openInfoWindowHtml(infodetails);
                var url = ("http://quiltingbok.com/findquiltshops/work/quiltshops/quiltshop_index.php?state=" + pointData.state);
                window.location=url;
		// map.panTo(point);
		return false;         
	}

	GEvent.addListener(marker, 'click', focusPoint);	
	listItemLink.onclick = focusPoint;
        // ----- tooltip add
        GEvent.addListener(marker,'mouseover',function(){
               this.tooltip.show(); 
        }); 
        GEvent.addListener(marker,'mouseout',function(){
               this.tooltip.hide(); 
        });
        // ---- tooltip end
	pointData.show = function() {
		if (!visible) {
                        document.getElementById('sidebar-list').appendChild(listItem);
			map.addOverlay(marker);
                        map.addOverlay(tooltip);
			visible = true;
		}
	}
	pointData.hide = function() {
		if (visible) {
                        document.getElementById('sidebar-list').removeChild(listItem);
			map.removeOverlay(marker);
                        map.removeOverlay(tooltip);
			visible = false;
		}
	}

	pointData.show();
}
/* [listing 6-20 end] */

/* [listing 6-22] */
function initializeSortTab(type) {
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));

	listItemLink.href = "#";
	listItemLink.innerHTML = type;
	listItemLink.onclick = function() {
		changeBodyClass('standby', 'loading');

		for(id in markers) {
			if (markers[id].type == type || 'All' == type)
				markers[id].hide();	
			else
                                markers[id].show();
		}

		changeBodyClass('loading', 'standby');

		return false;
	}

	 // document.getElementById('filters').appendChild(listItem);
}
/* [listing 6-22 end] */

function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}

function handleResize() {
	var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}

function init() {
	var type;
	var allTypes = { 'All':[] };
	
	
	document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };
        document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
        // use the line below to hide side bar
        changeBodyClass('sidebar-right', 'nosidebar');
        // use the line above to hide side bar
	handleResize();
	
	map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	
	/* [listing 6-21] */
	for(id in markers) {
		initializePoint(markers[id]);
		allTypes[markers[id].type] = true;
	}

	for(type in allTypes) {
		initializeSortTab(type);
	}
	/* [listing 6-21 end] */

	changeBodyClass('loading', 'standby');
}

// ----------------------------------------------------------------
// begin tooltip
/**
 * @author Marco Alionso Ramirez, marco@onemarco.com
 * @version 1.0
 * The Tooltip class is an addon designed for the Google
 * Maps GMarker class.
 */

/**
 * @constructor
 * @param {GMarker} marker
 * @param {String} text
 * @param {Number} padding
 */
function Tooltip(marker, text, padding){
	this.marker_ = marker;
	this.text_ = text;
	this.padding_ = padding;
}

Tooltip.prototype = new GOverlay();

Tooltip.prototype.initialize = function(map){
	var div = document.createElement("div");
	div.appendChild(document.createTextNode(this.text_));
	div.className = 'tooltip';
	div.style.position = 'absolute';
	div.style.visibility = 'hidden';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
}

Tooltip.prototype.remove = function(){
	this.div_.parentNode.removeChild(this.div_);
}

Tooltip.prototype.copy = function(){
	return new Tooltip(this.marker_,this.text_,this.padding_);
}

Tooltip.prototype.redraw = function(force){
	if (!force) return;
	var markerPos = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
	var iconAnchor = this.marker_.getIcon().iconAnchor;
	var xPos = Math.round(markerPos.x - this.div_.clientWidth / 2);
	var yPos = markerPos.y - iconAnchor.y - this.div_.clientHeight - this.padding_;
	this.div_.style.top = yPos + 'px';
	this.div_.style.left = xPos + 'px';
}

Tooltip.prototype.show = function(){
	this.div_.style.visibility = 'visible';
}

Tooltip.prototype.hide = function(){
	this.div_.style.visibility = 'hidden';
}

// end tooltip
// ----------------------------------------------------------------

window.onresize = handleResize;
window.onload = init;
window.onunload = GUnload;