var javascriptMap = {
	o: {
		xmlArray 	: '', 				// convert data from ajax to array
		xmlUrl 		: '', 				// url tp xml file
		ajaxData	: '', 				// temporary store ajax data
		xZindex 	: 0,  				// temporary store zIndex value. Incres value on foreach
		lastAreaID	: 0,  				// store last area id
		mapElm		: '', 				// map element
		areaElm		: '.regionAlias',   // area element
		mapUrl		: '', 				// url tp map file (image)
		mapWidth	: 653, 				// map width
		mapHeight	: 500, 				// map height
		mapMargin	: 0,   				// map margin
		preload		: true,			    // preload map true|false
		preloadIcon : '/carte/images/map/preload.gif' 
		
	},
	// just init
	option:{},
	
	init: function(customOption) {
		var self = this;
		
		// extend default option
		self.option = $.extend({}, self.o, customOption);
		
		// init map dinamyc loading
		self.loadInfo();
	},
	
	preloadingMap: function() {
		var self = this;
		
		// block script 
		self.option.sleepView = true;
		
		// show preload icon
		$(self.option.mapElm).append('<div id="preloadBox"><img src="' + self.option.preloadIcon + '" alt="loading map ..." /> <br />Loading map ...</div>');
		$("#preloadBox").css({
			width: 90,
			height: 70,
			position: 'absolute',
			textAlign: 'center',
			top: '50%',
			left: '50%',
			color: '#484848',
			marginTop: -40, // center on top
			marginLeft: -40, // center on let
			zIndex: 10 
		});

		// load map image file
		$(document).load(self.option.mapUrl);
	},
	
	preloadingDestroy: function() {
		var self = this;
		
		// delete preload element box
		$("#preloadBox").remove();
		
		// show elements on map
		$(self.option.areaElm).fadeIn(500);
	},
	
	loadInfo: function() {
		var self = this;
		// set background image of map and other css style
		$(self.option.mapElm).css({
			width: self.option.mapWidth,
			height: self.option.mapHeight,
			margin: self.option.mapMargin,
			position: 'relative',
			overflow: 'hidden'
		});
		
		// if preload true init preloadingMap function
		if(self.option.preload){
			self.preloadingMap();
		}
		
		$.ajax({
			type: "GET",
			url:  self.option.xmlUrl,
			dataType: "xml",
			success: function(xml) {
				$(xml).find('client').each(function(){
					self.ajaxObject = $(this); // Cache object
					self.option.xmlArray = {
						'id' 			: self.ajaxObject.attr('id'),
						'left' 			: self.ajaxObject.attr('left'),
						'top' 			: self.ajaxObject.attr('top'),
						'loadbitmap' 	: self.ajaxObject.attr('loadbitmap'),
						'bitmapsize' 	: self.ajaxObject.attr('bitmapsize'),
						'align' 		: self.ajaxObject.attr('align'),
						'name' 			: self.ajaxObject.find('details').find('name').text(),
						'details' 		: {
							'adress'	: self.ajaxObject.find('details').find('adress').text(),
							'telephone'	: self.ajaxObject.find('details').find('telephone').text(),
							'cp'	: self.ajaxObject.find('details').find('cp').text(),
							'city'		: self.ajaxObject.find('details').find('city').text()
						}
					}
					
						/*	$(xml).find('settings').each(function(){
					self.ajaxObject = $(this); // Cache object
					self.option.xmlArray = {
						'adress' 			:  self.ajaxObject.find('adress').text(),
						'telephone' 		: self.ajaxObject.find('telephone').text()
					
					}*/
					// increst zindex
					self.option.xZindex++;
					
					$(self.option.mapElm)
					.append('<p class="regionAlias" id="area-' + self.option.xmlArray.id + '"></p>');
					
					// hide if is preloading active
					if(self.option.preload){
						$("#area-" + self.option.xmlArray.id).css('display', 'none');
					}
					
					$('p#area-' + self.option.xmlArray.id).css({
						top: self.option.xmlArray.top + 'px',
						left: self.option.xmlArray.left + 'px',
						zIndex: self.option.xZindex,
						backgroundPosition:  (self.option.xmlArray.align == 'left' ? 'left bottom' : 'right bottom')
					});
					
					if(self.option.xmlArray.align == 'left'){
						$('p#area-' + self.option.xmlArray.id).css('padding-left', '12px').css('text-align', 'left');
					}else{
						$('p#area-' + self.option.xmlArray.id).css('padding-right', '12px').css('text-align', 'right');
					}
					
					$('p#area-' + self.option.xmlArray.id).data("object", self.option.xmlArray);
				}); // close each
				
				// set background to map
				$(self.option.mapElm).css({
					background: "url('" + self.option.mapUrl + "')"
				});
				
				// destroy preload icon
				self.preloadingDestroy();
				
				// load mouse over instance
				self.overMap();
			} // close success()
		}); // close ajax
	},
	
	
	
	overMap: function() {
		var self = this; // utils
		/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		
		$(self.option.areaElm).hover(function(e){
		
			var tempValues =  $(this).data('object');
		
			
			$("body").append("<p id='tooltip'><img src='/carte/images/poisson.png' /><strong>" + tempValues.details.city + "</strong> <br /><strong>" + tempValues.name + "</strong> <br /><br /> <span>" + tempValues.details.adress + "</span><br /><span>" + tempValues.details.cp + " " + tempValues.details.city + "</span> <br /> <span>" + tempValues.details.telephone + "</span> <br /></p>");
			$("#tooltip")
				.css("top",(e.pageY - xOffset) + "px")
				.css("left",(e.pageX + yOffset) + "px")
				.fadeIn("fast");
		},
		function(){		
			$("#tooltip").remove();		
		});
		
		// if mouse move over area element move tooltip
		$(self.option.areaElm).mousemove(function(e){
			$("#tooltip")
				.css("top",(e.pageY - xOffset) + "px")
				.css("left",(e.pageX + yOffset) + "px");
		});		
	}
}