var map;
var baseIcon = new GIcon();
var gmarkers = [];
var icon_folder_location = '/wsimages/common/'; 
var bounds = null;
var current_area = 'all';
var current_store_type = 'all';

$(
	function () {
		if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("store-map"));
			map.setCenter(new GLatLng(25.289405,51.447601), 8);
			map.addControl(new GSmallMapControl());
			//map.addControl(new GMapTypeControl());
			baseIcon.shadow = icon_folder_location + "pin_shadow.png";
			baseIcon.iconSize = new GSize(32, 32);
			baseIcon.shadowSize = new GSize(59, 32);
			baseIcon.iconAnchor = new GPoint(16, 32);
			baseIcon.infoWindowAnchor = new GPoint(18, 28);
			baseIcon.infoShadowAnchor = new GPoint(18, 28);
			
			$('#store-locations-listing').hide().html('');
				
			loadStores('all','all');
			
			$('.area_selector').bind('click', function(){
				current_area = this.id;
				loadStores(current_store_type,this.id);
			})

			$('.vodafonestores').bind('click', function(){
				current_store_type = this.value;
				loadStores(this.value,current_area);
			})
			
		}
	}
)



function loadStores(storetype, area) {
	var _storetype = storetype;
	var _area = area;
	var areasxml = '/webservices/storelocations.cfc?method=getstoreareas&locale=' + locale + '&area=' + _area + '&storetype=' + _storetype;
	var storesxml = '/webservices/storelocations.cfc?method=getstorelocations&locale=' + locale + '&area=' + _area + '&storetype=' + _storetype;
	var bounds = map.getBounds();
	$.ajax({
		type: "GET",
		url: storesxml,
		cache: false,
		dataType: "xml",
		success: function(xml) {
			var arealat = $(xml).find('storeList').attr('latitude');
			var arealon = $(xml).find('storeList').attr('longitude');
			var areazoom = $(xml).find('storeList').attr('zoomlevel');
			$('#store-locations-listing').slideUp('fast', function(){
				$('#store-locations-listing').html('');
				map.clearOverlays();
				map.setCenter(new GLatLng(parseFloat(arealat),parseFloat(arealon)), parseFloat(areazoom));
			    $(xml).find('storeListing').each(function() {
					var storeArray = new Array();
					storeArray['storename'] = $(this).find('storename').text();
					storeArray['address1'] = $(this).find('address1').text();
					storeArray['address2'] = $(this).find('address2').text();
					storeArray['directions'] = $(this).find('directions').text();
					storeArray['latitude'] = $(this).find('latitude').text();
					storeArray['longitude'] = $(this).find('longitude').text();
					storeArray['storetype'] = $(this).find('storetype').text();
					storeArray['objectid'] = $(this).find('objectid').text();
					storeArray['area'] = $(this).find('area').text();
					storeArray['hours'] = $(this).find('hours').text();
					storeArray['ramadanhours'] = $(this).find('ramadanhours').text();
					map.addOverlay(createMarker(storeArray));
					createAndDisplayStoreListing(storeArray);
				});
			});
		    $('#store-locations-listing').slideDown('slow');
		},
		error: function(err){
			alert('ajax error');
}
	});
}

function createAndDisplayStoreListing(sArr){
	var _html = '';
	_html = '<div class="storeLocation" id="' + sArr['objectid']  + '">';
	_html += '<div class="storeAddress">';
	_html += '<h3>' + sArr['storename'] + '</h3>';
	_html += '<p>' + sArr['address1'] + '<br/>' + sArr['address2'] + '</p>';
	_html += '</div>';
	_html += '<div class="storeTimings">';
	if(sArr['hours'] != ''){
		_html += '<div class="timing">' + sArr['hours'] + '</div>';
	} else {
		if (locale == 'en'){
			_html += '<div class="openSoon"><p>Store opening soon</p></div>';		
		} else {
			_html += '<div class="openSoon"><p>سيفتح قريباً</p></div>';		
		}	
	}
	_html += '</div>';
	_html += '<p class="full">' +sArr['directions'];
	if(sArr['ramadanhours'] != ''){
		if (locale == 'en'){
			_html += '<br/><br/><span style="color:#ff0000">EID Hours:</span><br/><strong>';
		} else {
			_html += '<br/><br/><span style="color:#ff0000">أوقات العيد:</span><br/><strong>';
		}
		_html += sArr['ramadanhours'] + '</strong></p>';
	}
	_html += '</div>';
	$('#store-locations-listing').append(_html);
}

function positionMap(sArr){
	m_opts = { icon:c_pin,autoPan:true};
	var m = new GMarker(p, m_opts);
	m.lat = sArr['latitude'];
	m.lng = sArr['longitude'];
	html = generateGMinfowin(sArr);
	m.openInfoWindowHtml(html);
}

function createMarker(sArr) {
	var p = new GLatLng(sArr['latitude'],sArr['longitude']);
	var c_pin = new GIcon(baseIcon);
	var storeType = sArr['storetype'];
	if (storeType == 1){
  		c_pin.image = icon_folder_location + "pin_vfstore.png";
  		c_pin.iconSize = new GSize(51, 52);
  		c_pin.shadowSize = new GSize(59, 32);
  		c_pin.iconAnchor = new GPoint(29, 52);
	}
	if (storeType == 2){
		c_pin.image = icon_folder_location + "brown.png";
	}
	if (storeType == 3){
		c_pin.image = icon_folder_location + "yellow.png";
	}
	if (storeType == 4){
		c_pin.image = icon_folder_location + "blue.png";
	}
	m_opts = { icon:c_pin,autoPan:true};
	var m = new GMarker(p, m_opts);
	m.lat = sArr['latitude'];
	m.lng = sArr['longitude'];
	GEvent.addListener(m, "click", function() {
		html = generateGMinfowin(sArr);
    	m.openInfoWindowHtml(html);
    	//highlightStoreListing(sArr['objectid']);
  	});
	gmarkers.push(m);
  	return m;
}

function generateGMinfowin(sArr) {
	var html = '<div class="store-locator-bubble">';
	if(sArr['storetype'] == 1){
		html += '<div class="image"><img src="' + icon_folder_location + 'logo_vfretail.png" /></div>'
		html += '<div class="bubblecontent">'
	} 
	html += "<strong>" + sArr['storename'] + "</strong><br />";
	html += sArr['address1'] + "<br />";
	if (sArr['address2']) {
		html += sArr['address2'] + "<br />";
	}
	if (sArr['storetype'] == 1) {
		html += '</div>';
	}
	html += '</div>';
	return html;
}

function highlightStoreListing(objectid) {
	$('.storeLocation').removeClass('highlightStore');
	$('div#' + objectid).effect('shake', 100).addClass('highlightStore');
}