/*
File:		mops.ui.js
This file is used to build the mops user interface

Section:	Version History
03/06/2009 (DJO) - Created File
*/

jQuery.fn.regionAccordion = function(region) {
	// generate the state html
	var zoneHtml = "";

	// iterate through the states
	for (var zoneKey in region.zones) {
		zoneHtml += 
			"<a href='javascript:void(0);'>" + zoneKey + "</a>\n" +
			"<div>\n" + 
			"<div id='region-" + zoneKey + "'>" +
			"<div class='region-loader'><img src='" + IMAGEPATH_MAPS + "ajax-loader.gif' alt='loader' />&nbsp;loading data...</div>\n" + 
			"<ul class='region-groups'></ul>\n" + 
			"</div></div>\n";					
	} // for
	
	// add the html to the element
	this.append(zoneHtml);
	
	// convert this into an accordion
	this.accordion({
		active: false,
		collapsible: true,
		change: function(event, ui) {
			// initialise variables
			var zoneKey = $(ui.newHeader).text();
			jQuery.feedback.log("changed to the " + zoneKey + " region");
			
			// get the zone associated with the zone key
			var zone = region.zones[zoneKey];
			
			// if the zone is loaded, then
			if (zone) {
				// if the zone is already loaded, display it straight away
				if (zone.loaded) {
					MOPS.groupfinder.gotoZone(zoneKey);
				}
				// otherwise, load the data and then display the zone 
				else {			
					// display the loader
					jQuery.feedback.log("Need to load data for MOPS zone: " + zoneKey);
					$(ui.newContent).find(".region-loader").fadeIn('fast');									
					
					// load the zone, and once complete hide the loader
					MOPS.loader.loadZone(zone, function(newGroups) {
						// initialise the groups html
						var groupsHtml = "";
						
						// iterate through the groups and add them to the content area
						for (var ii = 0; newGroups && (ii < newGroups.length); ii++) {
							groupsHtml += "<li><a id='" + zone.id + "-" + ii + "' class='mopsgroup' href='javascript:void(0)'>" + newGroups[ii].title + "</a></li>";
						} // for
						
						// if we found no groups, then add some text
						if (newGroups.length == 0) {
							groupsHtml += "<li class='notfound'>No Groups Found</li>";
						} // for
						
						// update the groups
						$(ui.newContent).find(".region-loader").fadeOut('normal', function() {
							$(ui.newContent).find(".region-groups").html(groupsHtml);

							$(ui.newContent).find('.mopsgroup').click(function() {
								var group = MOPS.getGroup(this.id);
								
								// if we found the group, then center on the pin
								if (group) {
									// if we have a pin, then display the pin
									if (group.mapPin) {
										group.mapPin.openInfoWindowHtml(group.asHtml());
									} 
									// otherwise, display the error message
									else {
										MOPS.groupfinder.windowClose();
										
										// display the dialog
										$("#dialog-badlocation .groupdetails").html(group.asHtml( {searchLink: true }));									
										$("#dialog-badlocation").dialog('open'); 
									} // if..else
								} // if
							});								
							
							// now goto the zone
							MOPS.groupfinder.gotoZone(zoneKey);
						});
					});
				} // if..else 
			} // if
		} // change
	});
	
	/*
	// now attach the appropriate events to the anchors
	$(selector).find("a.group-state").click(function() {
		MOPS.groupfinder.gotoState($(this).text());
	});
	*/
	
	return this;
}; // regionDisplay