var base_url = '';

function pin_module_legend(legend_icon, name, last){
    if(last == false){
        return '<div><img src="'+legend_icon+'" alt=""/>'+name+'</div>';
    }else{
        return '<div class="last"><img src="'+legend_icon+'" alt=""/>'+name+'</div>';
    }
}

function pin_module_item(x,y, icon, name, type, content){
    
    var out = '<div class="item" style="position: absolute; top:'+ (y-30) +'px; left:'+x+'px;">'+
        '<div class="pin_icon"><img src="'+base_url+''+icon+'" alt=""/> <span class="pin_text">'+name+'</span> '+                        
            '<h4 class="pin_name">'+type+'</h4>'+
        '</div>'+
        '<div class="pin_content">'+content+'</div>'+
    ' </div>';
     
    return out;   
}
        
$(document).ready(function() {
    //The address of the module that returns the pins
    pin_module_ajax_url = base_url+'/pin_module';
   
   
    //Add pins to the image with given id
    $("img").each(function(){
        if($(this).attr('id').substr(0,11) == 'pin_module_'){
            //alert('mapfound');
            //Get the id of the map
            var map_id = $(this).attr('id').split('_');
            map_id = map_id[map_id.length-1]; 
            //alert('pinmap found'+map_id);
            var img = $(this);
            var div = $(this).wrap('<div style="position: relative"></div>').parent();
            var pin = '';
            var a = '';
            var pin_types = [];
            var pin_explorer_types = [];
            
            //Fetch pins from server
            jQuery.get(pin_module_ajax_url, {'id':map_id}, function(data){ 
                if(data.status == 'OK'){
                    for(var i=0; i < data.pins.length; i++){
                        pin  = data.pins[i];
                        //alert(pin.name);
                        a += pin_module_item(pin.left, pin.top, pin.icon, pin.name, pin.type, pin.content);
                        if(pin.is_explorer == "0" || pin.is_explorer == 0){
                            pin_types[pin.type] = pin.legend_icon;
                        }else{
                            pin_explorer_types[pin.type] = pin.legend_icon;
                        }
                    }
                    div.append(a);
                    //Switch the image to image from database
                    img.attr('src',base_url+data.map);
                    
                    //Legenda
                    var i = 0;
                    var j = 0; 
                    a='<div class="map_legend">';
                    for(pin_type in pin_types){
                        i++;
                        if(i == 3){
                            i = 0;
                            j++;
                            a += pin_module_legend(pin_types[pin_type], pin_type, true);
                        }else{
                            a += pin_module_legend(pin_types[pin_type], pin_type, false);
                        }
                    }
                    while( i != 0){
                        i++
                        if(i == 3){
                            a += pin_module_legend(base_url+'/img/blank.gif', '', true);
                            j++;
                            break;
                        }else{
                            a += pin_module_legend(base_url+'/img/blank.gif', '', true);
                        }
                    }
                    a+='</div>';
                    div.parent().prepend(a);
                    div.parent().children('.map_legend').css('height',(j*26)+'px');
                    
                    
                    //Explorers
                    var i = 0;
                    var j = 0; 
                    a='<div class="map_explorers_legend">';
                    for(pin_type in pin_explorer_types){
                        a += pin_module_legend(pin_explorer_types[pin_type], pin_type, true);
                    }
                   
                    a+='</div>';
                    div.parent().append(a);
                 }else{
                   // alert(data);
                }
            }, 'json' );     
        }
    });
});
/*
	$(function(){
		var location = '';
		if(document.location){
			location = document.location;
		}else if(document.location.href){
			location = document.location;
		}else{
			return
		}
	
		function pin_module_item(x,y, title, innerhtml){
			
			var out='<div class="pin_module_item" style="'+ 
					'top:'+ y +'px; left:'+x+'px;'+
					'position: absolute; text-align:center; z-index:99">'+
						'<h4>'+title+'</h4>';
					
				if(innerhtml){
					out+='<div class="pinnedmap_content">'+
						innerhtml+
						'</div>';}
						
			return out+'</div>';
		}
		$(".pinnedmap").each(function(){
			//alert(location);
			
			var div = $(this).wrap('<div style="position: relative"></div>').parent()
			//var div = $(this).parent();
			
			div.append(pin_module_item(150,100,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item1. <a href="http://www.maloob.com">More&gt;</a>'))
			div.append(pin_module_item(120,190,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item2. <a href="http://www.maloob.com">More&gt;</a>'))
			div.append(pin_module_item(210,240,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item3. <a href="http://www.maloob.com">More&gt;</a>'))
			div.append(pin_module_item(110,120,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item4. <a href="http://www.maloob.com">More&gt;</a>'))
			div.append(pin_module_item(230,270,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item5. <a href="http://www.maloob.com">More&gt;</a>'))
			div.append(pin_module_item(160,230,'<img src="/baobab/media/images/maps_pins/house.gif"/>','This is item6. <a href="http://www.maloob.com">More&gt;</a>')).show();
		});
		
		$(".pin_module_item").click(function(){
			alert('onclick');
			
		});
		$(".pin_module_item").hover(function(){
			$(this).css('z-index','999');
			$(this).css('background-color','#9e6b10');
			$(this).css('border','2px solid #6d4d14');
			$(this).children('h4').css('font-size','16px');
			$(this).children('.pinnedmap_content').css('display','block');
		},function(){
			$(this).css('z-index','100');
			$(this).css('background-color','transparent');
			$(this).css('border','0px solid #6d4d14');
			$(this).children('h4').css('font-size','12px');
			$(this).children('.pinnedmap_content').css('display','none');
		});
		
		$(".pin_module_item").each(function(){
			$(this).css('display','none');
			$(this).css('background-color','transparent');
			$(this).css('border','0px solid #6d4d14');
			$(this).children('h4').css('font-size','12px');
			$(this).children('.pinnedmap_content').css('display','none');
		});
		$(".pin_module_item").each(function(){
			$(this).fadeIn(4000);
		});
	});
});*/