dataURL = "jazmine_styleMap_locQuery.asp";
optionsURL = "jazmine_styleMap_catQuery.asp";
saveURL = "jazmine_styleMap_saveLoc.asp";
emailURL = "jazmine_styleMap_email.asp";
SWATCH_ICON_COUNT = 18;


var map;
//var mapMoveRedraw = null;
var markers = new Array(), addresses = new Array();
var urlparams={}, pageurl;
var auto_click;

var standardIcon, userIcon, genericIcon = null;

/*\
|*|   Initial Setup
\*/


$(document).ready(function() {
    // Parse URL parameters
    var urlparts = window.location.href.split(/[?&]/);
    pageurl = urlparts[0];
    for(var param, k=urlparts.length-1;k>0;k--) {
        urlparams[(param=urlparts[k].split(/[=#]/))[0].toLowerCase()] = param.length>1?decodeURI(param[1]):"";
    }

    if (urlparams['pinid']) {
        // URL parameters tell the page to pre-select a map point
        VidOverlay.closeVid();
        if (urlparams['source']) {
            $('#browseSourcePulldown').val(urlparams['source']);
        }
        auto_click = urlparams['pinid'];
    }

	if (GBrowserIsCompatible()) {
		
		standardIcon = new GIcon();
		standardIcon.shadow = "_images/fomlc/stylemap/swatches/swatch_shadow_0.png";
		standardIcon.iconSize = new GSize(40,41);
		standardIcon.shadowSize = new GSize(47,49);
		standardIcon.iconAnchor = new GPoint(20,20)
		standardIcon.infoWindowAnchor = new GPoint(20,0)
		
		userIcon = new GIcon();
		userIcon.iconSize = new GSize(25,25);
		userIcon.shadowSize = new GSize(27,29);
		userIcon.iconAnchor = new GPoint(10,10)
		userIcon.infoWindowAnchor = new GPoint(10,0)
		
		genericIcon = new GIcon();
		genericIcon.image = "_images/fomlc/stylemap/pins/default_pin.png"
		//genericIcon.shadow = "_images/fomlc/stylemap/pins/shadow_generic.png";
		genericIcon.iconSize = new GSize(28,27);
		//genericIcon.shadowSize = new GSize(39,15);
		genericIcon.iconAnchor = new GPoint(15,15)
		genericIcon.infoWindowAnchor = new GPoint(15,0)

		map = new GMap2(document.getElementById("mapRegion"));
		map.addControl(new GLargeMapControl());
		GDownloadUrl(optionsURL, PopulatePulldowns);

	}
    
});

function PopulatePulldowns(dataReceived) {
	if(dataReceived.length > 0) {
		var filterOptions = eval(dataReceived);
		var browse = $('#browseStylePulldown');
		var entry = $('#entryStylePulldown');
		
		browse.append('<option value="" selected="selected">All</option>');
		entry.append('<option value="" selected="selected"></option>');
		for (var i = 0; i < filterOptions.style.length; i++) {
		    browse.append('<option value="' + filterOptions.style[i].id + '">' + filterOptions.style[i].name + '</option>');
	        entry.append('<option value="' + filterOptions.style[i].id + '">' + filterOptions.style[i].name + '</option>');
        }
        
        if (urlparams['style']) {
            $('#browseStylePulldown').val(urlparams['style']);
        }

		StartBrowsing();
	}
}


/*\
|*|    Browsing Mode
\*/

function StartBrowsing() {
	ShowSheet(0);
	markers = new Array();
	addresses = new Array();
	map.clearOverlays();
	map.setCenter(new GLatLng(38, -98.5833), 4);
	//mapMoveRedraw = GEvent.addListener(map, "moveend", UpdateBrowseMap);
	UpdateBrowseMap();
}



function UpdateBrowseMap() {
    /*
	var bounds = map.getBounds();
	var limitNorth = bounds.getNorthEast().lat();
	var limitEast  = bounds.getNorthEast().lng();
	var limitSouth = bounds.getSouthWest().lat();
	var limitWest  = bounds.getSouthWest().lng();
	
	var searchParameters = "north=" + limitNorth + "&south=" + limitSouth + "&east=" + limitEast + "&west=" + limitWest;
	*/
	var searchParameters = "north=90&south=-90&east=180&west=-180";
	if(document.browseFilter.style.options.length > 0) {
		searchParameters += "&style=" + document.browseFilter.style.options[document.browseFilter.style.selectedIndex].value
			+ "&source=" + document.browseFilter.source.options[document.browseFilter.source.selectedIndex].value;
		}
	//alert(searchParameters.replace(/=|&/g, "\n"));
	GDownloadUrl(dataURL, DisplayDataPoints,  searchParameters);
}
		
		

function DisplayDataPoints(dataReceived) {
	if(dataReceived.length > 0) {
		//alert(dataReceived);
		parsedData = eval(dataReceived);
		var updatedMarkers = new Array();
		var updatedAddresses = new Array();
		var newHTML = "";
		
		if (parsedData.length == 0) {
		    newHTML = '<br /><br /><span class="nolocations">No Locations To View</span>';
	    }
	    else {
    		for(var i = 0; i < parsedData.length; i++) {
    			pinID = parsedData[i].id;
			
    			var address = GetAddress(parsedData[i], '<br />');
					
    			newHTML += "<div id=\"result" + pinID + "\" onmouseover=\"HighlightPin(" + pinID
    				+ ")\" onmouseout=\"DimPin(" + pinID
    				+ ")\" onclick=\"ClickPin(" + pinID
    				+ ")\"><p class=\"styleName\">" + parsedData[i].stylename 
    				+ "</p><p class=\"address\">" + address
    				+ "</p><img class=\"" + (parsedData[i].celebrity ? '' : 'small') + "icon\" src=\"" + GetSwatchFilename(parsedData[i], 'sidebar') + "\"/></div>";
			
    			if(markers[pinID]) {
    				updatedMarkers[pinID] = markers[pinID];
    				updatedAddresses[pinID] = addresses[pinID];
    			}
    			else {
    				updatedMarkers[pinID] = CreateBrowserMarker(parsedData[i]);
    				GEvent.addListener(updatedMarkers[pinID], "mouseover", new Function("", "HighlightPin(" + pinID + ");"));
    				GEvent.addListener(updatedMarkers[pinID], "mouseout",  new Function("", "DimPin(" + pinID + ");"));
    				updatedAddresses[pinID] = { 'street': parsedData[i].address, 'city': parsedData[i].city, 'state': parsedData[i].state };
    			}
    		}
		}
		
		document.getElementById("browsingResultsList").innerHTML = newHTML;
		for(i in markers) {
			if(! updatedMarkers[i]) {
				map.removeOverlay(markers[i]);
			}
		}
		markers = updatedMarkers;
		addresses = updatedAddresses;
		
		if (auto_click) {
		    ClickPin(auto_click);
		    auto_click = null;
	    }
	}
	else {
		document.getElementById("browsingResultsList").innerHTML = "Sorry, we could not locate any Cotton styles near that address.<br/><br/>Please try again.";
		map.clearOverlays();
	}
}




function CreateBrowserMarker(pointData) {
    if (pointData.celebrity == "0" || pointData.celebrity == "null") {
        pointData.celebrity = false;
    }
	var myIcon;
	if(pointData.style == 0) {
		myIcon = new GIcon(genericIcon);
	}
	else if (pointData.celebrity) {
		myIcon = new GIcon(standardIcon);
		myIcon.image = 	GetSwatchFilename(pointData);
	}
	else {
		myIcon = new GIcon(userIcon);
		myIcon.image = 	GetSwatchFilename(pointData);
    }
		
	var newMarker = new GMarker(new GPoint(pointData.longitude, pointData.latitude), {icon: myIcon});
	map.addOverlay(newMarker);
	
	var sharetitle = "Jazmine\\'s Style Map at TheFabricOfMyLife.com";
	// var shareparams = "{\\'style\\': \\'" + $('#browseStylePulldown').val() + "\\', \\'source\\': \\'" + $('#browseSourcePulldown').val() + "\\', \\'pinid\\': " + pointData.id + "}";
	var shareparams = "style=" + $('#browseStylePulldown').val() + "&amp;source=" + $('#browseSourcePulldown').val() + "&amp;pinid=" + pointData.id;
	
	var address = GetAddress(pointData, '<br />');
	var avatar = 'jazmine.jpg';
    if (!pointData.celebrity) {
        avatar = 'avatars_'+pointData.avatar+'.jpg';
    }
	newMarker.bindInfoWindowHtml(
		"<div class=\"moreInfoPopup\">"
		+ "<p class=\"address\">" + address 
		+ '</p><img src="_images/fomlc/stylemap/styles/style_'+ pointData.style +'.png" class="' + (!pointData.celebrity ? 'user' : '') + 'styleName" alt="' + pointData.stylename + '" />'
		+ (pointData.label ? '<img id="quoteleft" src="_images/fomlc/stylemap/quote_left.jpg" alt="" />' : '') + "<p class=\"comments\">" + pointData.label.substring(0,160) + (pointData.label ? '<img id="quoteright" src="_images/fomlc/stylemap/quote_right.jpg" alt="" />' : '')
		+ '</p><div class="submitter"><table><tr><td><img class="sig" src="_images/fomlc/stylemap/avatars/' + avatar + '" alt="" /></td><td class="sig"><div style="height:42px;overflow:hidden;"><span class="submitterLabel">Submitted by: </span>' + pointData.user + '</div></td></tr></table>'
		+ "</div><div id=\"streetView\"></div>"
		+ "<img class=\"" + (!pointData.celebrity ? 'user' : '') + "icon\" src=\"" + GetSwatchFilename(pointData, 'popup') + '" />'
		+ (pointData.celebrity && jQuery.support.opacity ? '<img class="iconshadow" src="_images/fomlc/stylemap/swatches/swatch_shadow_0.png" />' : '')
		+ "<div class=\"footer\">Share this:&nbsp;&nbsp;&nbsp;"
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'send\', null, \'' + shareparams + '\');" title="Send to a friend"><img src="_images/fomlc/global/share/email.gif" alt="" border="0" /></a>&nbsp;&nbsp;'
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'digg\', \'' + sharetitle + '\', \'' + shareparams + '\');" title="Digg"><img src="_images/fomlc/global/share/digg.gif" alt="" /></a>&nbsp;&nbsp;'
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'facebook\', \'' + sharetitle + '\', \'' + shareparams + '\');" title="Facebook"><img src="_images/fomlc/global/share/facebook.gif" alt="" border="0" /></a>&nbsp;&nbsp;'
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'yahoo\', \'' + sharetitle + '\', \'' + shareparams + '\');" title="Yahoo! Buzz"><img src="_images/fomlc/global/share/yahoo.gif" alt="" /></a>&nbsp;&nbsp;'
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'delicious\', \'' + sharetitle + '\', \'' + shareparams + '\');" title="del.icio.us"><img src="_images/fomlc/global/share/delicious.gif" alt="" /></a>&nbsp;&nbsp;'
            + '<a href="javascript:void(0);" onclick="javascript:Utils.sharePage(\'twitter\', \'' + sharetitle + '\', \'' + shareparams + '\');" title="Twitter"><img src="_images/fomlc/global/share/twitter.gif" alt="" /></a>'
		+ "</div>"
		+ "</div>");
	
	GEvent.addListener(newMarker, "infowindowopen", GetStreetImage);
	return newMarker;
}


function GetAddress(data, lineseparator) {
    if (!lineseparator) {
        lineseparator = ', ';
    }
    
    var address = '';
    if (data.city) {
        address = data.city;
    }
    if (data.state) {
        if (address) address = address + ", ";
        address = address + data.state;
    }
	if (data.address && data.address != 'undefined') {
	    address = data.address + lineseparator + address;
    }
    else if (data.street && data.street != 'undefined') {
	    address = data.street + lineseparator + address;
    }
    
    return address;
}

function GetSwatchFilename(pointData, location) {
    if (pointData.celebrity == "0" || pointData.celebrity == "null") {
        pointData.celebrity = false;
    }
    if (!location) location = 'map';
    
    var suffix = "_0.png";
	if (location == 'sidebar' && !jQuery.support.opacity) {
	    suffix = "_0.gif";
    }
    else if (!pointData.celebrity && location == 'popup' && !jQuery.support.opacity) {
        suffix = "_0w.gif";
    }
        
	var paddedID = "00" + pointData.style;
	if(pointData.celebrity) {
		return "_images/fomlc/stylemap/swatches/swatch" + paddedID.substr(paddedID.length - 2) + suffix;
	}
	else {
		return "_images/fomlc/stylemap/user_swatches/swatch" + paddedID.substr(paddedID.length - 2) + suffix;
	}
}


		


/*\
|*|    Search Mode
\*/

function StartLocationEntry() {
	document.searchForm.location.value = "";
	$("#searchResults").empty();
	$("#searchResults").css("display", "none");
	$('#entryAbout').val("");
	$('#entryEmail').val("");
	$('#entryUsername').val("");
	ShowSheet(1);
}



var geocoderResults = null;
var chosenAddress = null;
function Geocode(address) {
	var geocoder = new GClientGeocoder();
	var newHTML = "";
	if(address.length > 0) {
		geocoder.setViewport(map.getBounds());
		geocoder.getLocations(address, function(result) {
			if(result.Status.code == G_GEO_SUCCESS) {
				var bounds = new GLatLngBounds();
				geocoderResults = result;
				//GEvent.removeListener(mapMoveRedraw);
				map.clearOverlays();
				document.getElementById("browsingResultsList").innerHTML = "";
				markers = new Array();
				addresses = new Array();
				var address_count = 0;
				var lowest_accuracy = 9;
				
				var newHTML = "<h1>Did you mean:</h1><div id=\"searchResultsList\" class=\"addressList\">";
				for(var i = 0; i < result.Placemark.length; i++) {
					thisAddress = ParseAddress(result.Placemark[i]);
					if (thisAddress) {
					    address_count++;
					    // The lowest accuracy will help us determine the minimum zoom level
					    if (thisAddress.accuracy < lowest_accuracy) lowest_accuracy = thisAddress.accuracy;
					    
    					coords = new GLatLng(thisAddress.lat, thisAddress.lng);
    					bounds.extend(coords);

    					newMarker = new GMarker(coords, {icon: new GIcon(genericIcon)});
    					GEvent.addListener(newMarker, "mouseover", new Function("", "HighlightPin(" + i + ");"));
    					GEvent.addListener(newMarker, "mouseout",  new Function("", "DimPin(" + i + ");"));
		
    					map.addOverlay(newMarker);
		
    					newMarker.bindInfoWindowHtml(
    						"<div class=\"newAddressPopup\">"
    						+ "<p class=\"street\">" + (thisAddress.street ? thisAddress.street : "") 
    						+ "<p class=\"cityAndState\">" + (thisAddress.city ? thisAddress.city : "")
    						+ (thisAddress.city && thisAddress.state ? ", " : "")
    						+ (thisAddress.state ? thisAddress.state : "")
    						+ "</p><div id=\"streetView\"></div>" // + (result.Placemark.length > 1 ? "<div class=\"button\" id=\"mapToThisButton\" onclick=\"this.style.visibility='hidden';ChooseAddress(" + i + ")\">Map to This &gt;</div>" : "") + "</div>"
    						);
					
    					markers[i] = newMarker;
    					addresses[i] = thisAddress;
    					GEvent.addListener(newMarker, "infowindowopen", GetStreetImage);
 						
    					newHTML += "<div id=\"result" + i + "\" onmouseover=\"HighlightPin(" + i
    						+ ")\" onmouseout=\"DimPin(" + i
    						+ ")\" onclick=\"javascript:ClickPin(" + i + "); ChooseAddress(" + i
    						+ ");\"><p class=\"street\">" + (thisAddress.street ? thisAddress.street : "")
    						+ "</p><p class=\"cityAndState\">" + (thisAddress.city ? thisAddress.city : "")
    						+ (thisAddress.city && thisAddress.state ? ", " : "")
    						+ (thisAddress.state ? thisAddress.state : "") + "</p></div>";
    				}
				}
					
				newHTML += "</div>";
                
                if (address_count > 0) {
                    var zoomlevel = map.getBoundsZoomLevel(bounds);
                    if (zoomlevel > (lowest_accuracy * 2 + 2)) zoomlevel = (lowest_accuracy * 2 + 2);
                    if (zoomlevel > 15) zoomlevel = 15;
    				map.setZoom(zoomlevel);
    				map.panTo(bounds.getCenter());
				}
				
				if (address_count == 0) {
				    newHTML = "<p>" + address + " could not be located. Please provide a complete street address.</p>";
			    }
				else if (address_count == 1) {
					ClickPin(0);
					ChooseAddress(0);
				}
			}
			else {
				newHTML = "<p>" + address + " could not be located. Please provide more detail.</p>";
			}
			document.getElementById("searchResults").innerHTML = newHTML;
			document.getElementById("searchResults").style.display = "block";
		});
	}
	else {
		newHTML = "<p>Please enter a location to search for, then click Go again.</p>";
	}
	document.getElementById("searchResults").innerHTML = newHTML;
	document.getElementById("searchResults").style.display = "block";
}



function RetrieveAttribute(attName, obj) {
	if(typeof(obj) == 'object') {
		for(var item in obj) {
			if(item == attName) {
				return obj[item];
				}
			else {
				result = RetrieveAttribute(attName, obj[item]);
				if(result) {
					return result;
					}
				}
			}
		}
	else {
		return null;
		}
	}


function ParseAddress(mark) {
	var street	= RetrieveAttribute("ThoroughfareName", mark);
	var city	= RetrieveAttribute("LocalityName", mark);
	var state	= RetrieveAttribute("AdministrativeAreaName", mark);
    var accuracy = RetrieveAttribute("Accuracy", mark);
    
    if (street == undefined) street = '';
    if (city == undefined) city = '';
    if (state == undefined) state = '';

    return { 'street': street, 'city': city, 'state': state, 'lat': mark.Point.coordinates[1], 'lng': mark.Point.coordinates[0], 'accuracy': accuracy };
}






var chosenAddress = null;
function ChooseAddress(placemarkNumber) {
	chosenAddress = ParseAddress(geocoderResults.Placemark[placemarkNumber]);
	document.getElementById("entryLocation").innerHTML = "<p class=\"street\">" + chosenAddress.street + "</p><p class=\"cityAndState\">" + chosenAddress.city + ", " + chosenAddress.state + "</p>";
	ShowSheet(2);
}



/*\
|*|    Entry Mode
\*/


function SaveNewLocation() {
    var style = $('#entryStylePulldown').val();
    var avatar = $('#entryAvatar').val();
    if (!style) style = 0;
    var label = $('#entryAbout').val();
    var username = $('#entryUsername').val();
    var email = $('#entryEmail').val();
    
    if (!style) {
        window.alert('Please choose a style.');
        return;
    }
    
    if (!username) {
        window.alert('Please enter your name.');
        return;
    }
    
    if (!email) {
        window.alert('Please enter your email address.');
        return;
    }
    else if (!email.match(/[a-z0-9.!#$%&'*+\-\/=?\^_`{|}~]+@[a-z0-9.-]+\.[a-z]{2,4}/i)) {
        window.alert('Please enter a valid email address.');
        return;
    }
    
	var postData = "longitude=" + chosenAddress.lng
		+ "&latitude=" + chosenAddress.lat
		+ "&style=" + style
		+ "&street=" + chosenAddress.street
		+ "&city=" + chosenAddress.city
		+ "&state=" + chosenAddress.state
		+ "&label=" + label
		+ "&user=" + username
		+ "&avatar=" + avatar;

		// + "&storetype=" + document.entryForm.type.options[document.entryForm.type.selectedIndex].value
	
	GDownloadUrl(saveURL, ConfirmSave, encodeURI(postData));
}


function ConfirmSave(results) {
	if(results.length > 0) {
		map.clearOverlays();
		parsedData = eval(results);
		//var newPin = CreateBrowserMarker(parsedData[0]);
		//GEvent.trigger(newPin, "click");
		//ShowSheet(3);
        
        var email = $('#entryEmail').val();
        if (email) {
        	var postData = "to_email=" + email
        		+ "&from_email=noreply@" + document.domain
        		+ "&text_subject=Your StyleMap"
        		+ "&testing=1"
        		+ "&text_msg=Thank you for adding your location to Jazmine's StyleMap.  To share it with friends, pass along this link: \n \n" + pageurl + "?pinid=" + parsedData[0].id + "\n \n - Cotton: The Fabric of My Life";
	    
        	GDownloadUrl(emailURL, function() { }, encodeURI(postData));
        }
        
        $('#browseStylePulldown').val('');
        $('#browseSourcePulldown').val('');
        auto_click = parsedData[0].id;
        StartBrowsing();

        try {
            pageTracker._trackPageview('/TheFabricOfMyLife/Jazmine/Stylemap/SubmitLocation');
        } catch(err) {}
	}
	else {
		alert("Could not save your location.");
	}
}





/*\
|*|    General GUI
\*/


function ShowSheet(newSheetNumber) {
	var sheets = $("#sidebar .sidebarSheet");
	for(var i = 0; i < sheets.length; i++) {
		sheets[i].style.display = "none";
	}
	sheets[newSheetNumber].style.display = "block";
    if (newSheetNumber == 2) {
        /* Dyanamic dropdown to display images */
        MSDropDown.styles.arrow = '_images/fomlc/stylemap/dd_arrow.gif';
        MSDropDown.init("#entryAvatar");
    }
}



function HighlightPin(whichPin) {
	var newFilename = markers[whichPin].getIcon().image.replace(/_0\./, "_1.");
	markers[whichPin].setImage(newFilename);
	document.getElementById("result" + whichPin).className = "highlight";
	}
	
	
	
function DimPin(whichPin) {
	var newFilename = markers[whichPin].getIcon().image.replace(/_1\./, "_0.");
	markers[whichPin].setImage(newFilename);
	document.getElementById("result" + whichPin).className = "";
	}
		

function ClickPin(whichPin) {
    //$('#searchLocation').val(GetAddress(addresses[whichPin]));
	GEvent.trigger(markers[whichPin], "click");
}
		
		


function GetStreetImage() {
	var STREETVIEW_WIDTH = 230;
	var STREETVIEW_HEIGHT = 149;
	var viewClient = new GStreetviewClient();
	viewClient.getNearestPanoramaLatLng(this.getLatLng(), function(coordinates) {
	    $('#streetView').empty();
		if (coordinates) {
			var panorama = new GStreetviewPanorama(document.getElementById('streetView'), { latlng: coordinates });
		}
		else {
		    $('#streetView').append('<img src="_images/fomlc/stylemap/streetview_none.jpg" alt="" style="position:absolute;left:-8px;top:-15px;" />');
		}	
	});

}



	
// ------ ADDITIONAL PAGE FUNCTIONALITY ----------------------------------------


// Handle clicks outside vid intro.  IE listens for body clicks, ff/safari
// need a separate shield to listen on.

function resizeShield() {
	var navH = 155;
	var h = $(window).height() - 155;
	var w = $(window).width();
	$("#shield").width(w).height(h).css("top", navH + "px");
}

VidOverlay = {
	closeVid:function() {
		$("#videoContainer").remove();
		$("#shield").remove();
		$(window).unbind("resize", resizeShield);
	}
}

$(document).ready(function() {

	$("#shareMenu a").tooltip({track: true, 
							   showURL:false});
	
	$("#shareMenu a.social").click(function(event){
		var shareType = $(this).attr("rel");
		var title = "Jazmine's Style Map at TheFabricOfMyLife.com";
		
		Utils.sharePage(shareType, title, null);
		
		// Track the event.
		// pageTracker._trackPageview("/TheFabricOfMyLife/StyleMap");
		
		event.preventDefault();
	});
	
	// Initialize the send popup link.
	$("#shareMenu .send a").click(function(event) {
        try {
            pageTracker._trackPageview('/TheFabricOfMyLife/Jazmine/Stylemap/ShareLocation');
        } catch(err) {}
		Utils.sharePage("send", null, null);
		event.preventDefault();
	});

		
	var ua = navigator.userAgent.toLowerCase();
    var client = {
        isIE:       ua.indexOf('msie') > -1
    };
	
	if (client.isIE) {
		$("body").click(function(event) {
			VidOverlay.closeVid();
		});
	} else {
		
		$("body").prepend('<div id="shield"></div>');
		$("#shield").click(function(event) {
			VidOverlay.closeVid();
		});
		$(window).bind("resize", resizeShield);
		resizeShield();
		
	}
	
});