/*
* Copyright (C) 2009 Joel Sutherland
* Licenced under the MIT license
*/
(function($) {
	$.fn.zoommap = function(settings) {
		settings = $.extend({
			// Width and Height of the Map Area
			width: '882px',
			height: '288px',
			
			// Misc Settings
			blankImage: 'images/map/blank.gif',
			loadingImage: 'images/map/loading.gif',
			fadeDuration: 500,
			zoomDuration: 1000,
			
			// ids and classes
			bulletClass: 'zoomable',
			popupSelector: 'div.popup',
			popupCloseSelector: 'a.close',
			
			// Return to Initial Region Link
			homeId: 'homelink',
			homeText: 'Close',
			
			// Initial Region to be shown
			initialRegion: {},
				
			// Zoomable Regions
			zoomableRegions: []
		}, settings);
		
		var map = $(this);
		
		// Set up initial Map Area and the initial region that is shown
		function initializeMap(){
			map.fadeOut(settings.fadeDuration, function(){
				$(this).empty().css({
					width: settings.width,
					height: settings.height,
					backgroundImage: 'url(' + settings.initialRegion.image + ')',
					position: 'relative',
					height: '410px',
					backgroundRepeat: 'no-repeat'
				});
				$(this).fadeIn();
				loadBullets(settings.initialRegion, false);
			});
		}
		
		// Load the Bullets 
		function loadBullets(region, showHomeLink){
			map.load(region.data, {}, function(){
				// add back button
				if(showHomeLink){
					$('<a id="' + settings.homeId + '" href="javascript:void(0)"><span>' + settings.homeText + '</span></a>')
						.appendTo(map)
						.click(function(){initializeMap()});
				} else {
					for(var i=0; i<settings.zoomableRegions.length; i++){
						addZoomable( settings.zoomableRegions[i] );
					}
				}
				// place bullets				
				$(this).children('a.bullet').each(function(){
					var coords = $(this).attr('rel').split('-');
					// $(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
					// Begin update by chiennv: 05-11-2011
					$(this).css({left: '0px', top: '0px'})
						.hide()
						.fadeIn()
						.click(function(){showPopup($(this).attr('id'));});
				});				
			});
		}

		function addZoomable( subregion ){
			$('<img class="' + settings.bulletClass + '" src="' + settings.blankImage + '" id="' + subregion.id + '" />').css({
				border: 'none',
				position: 'absolute',
				width: subregion.width,
				height: subregion.height,
				top: subregion.top,
				left: subregion.left,
				cursor: 'pointer'
			}).appendTo(map).click(function() {
				$(this).siblings().fadeOut();
				$(this).hide()
					   .attr('src', subregion.image)
					   .fadeIn('slow')
					   .animate({
							// width: settings.width,
							// height: settings.height,
					   		// Begin update by chiennv: 05-11-2011
					   		width: '400px',
							height: '420px',
							// End update by chiennv: 05-11-2011
							top: '0px',
							left: '0px'
						}, settings.zoomDuration, '', function(){
							map.css({backgroundImage: 'url(' + subregion.image + ')'}).empty();
							loadBullets(subregion, true);
						});
			});
		}
		
		function showPopup(id){
			map.find(settings.popupSelector).fadeOut(); 
			var boxid = '#' + id + '-box';
			$(boxid).fadeIn();
			$(settings.popupCloseSelector).click(function(){
				$(this).parent().fadeOut();
			});
		}
		
		// initialize map
		initializeMap();
	}	
})(jQuery);

$(document).ready(function(){
	$('div.map').zoommap({
		width: '882px',
		height: '288px',
		margin: 'auto',
		initialRegion: {
			id: 'main',
			data: 'section/texas/index.html',
			image: 'images/map/texas_map.jpg'},
		zoomableRegions: [
			{
				id: 'antonio',
				data: 'section/antonio/index.html',
				image: 'images/map/photo1.gif',
				width: '100px',
				height: '80px',
				top: '107px',
				left: '500px'
			},
			{ 
				id: 'austin',
				data: 'section/austin/index.html',
				image: 'images/map/photo1.gif',
				width: '100px',
				height: '80px',
				top: '30px',
				left: '535px'
			}, 
			{
				id: 'dallas',
				data: 'section/dallas/index.html',
				image: 'images/map/photo1.gif',
				width: '90px',
				height: '60px',
				top: '10px',
				left: '465px'
			},
			{
				id: 'houston',
				data: 'section/houston/index.html',
				image: 'images/map/photo1.gif',
				width: '90px',
				height: '60px',
				top: '65px',
				left: '690px'
			},			 
			{
				id: 'laredo',
				data: 'section/laredo/index.html',
				image: 'images/map/photo1.gif',
				width: '100px',
				height: '80px',
				top: '195px',
				left: '590px'
			}, 
			{
				id: 'abilene',
				data: 'section/abilene/index.html',
				image: 'images/map/photo1.gif',
				width: '100px',
				height: '80px',
				top: '20px',
				left: '290px'
			},
			{
				id: 'odessa',
				data: 'section/odessa/index.html',
				image: 'images/map/photo1.gif',
				width: '100px',
				height: '80px',
				top: '90px',
				left: '210px'
			}, 
			{
				id: 'amarillo',
				data: 'section/amarillo/index.html',
				image: 'images/map/photo1.gif',
				width: '90px',
				height: '70px',
				top: '10px',
				left: '140px'
			}, 
			{
				id: 'elpaso',
				data: 'section/elpaso/index.html',
				image: 'images/map/photo1.gif',
				width: '90px',
				height: '70px',
				top: '195px',
				left: '10px'
			}]
	});
});