$(document).ready(function() {
	initializeMap();
    

});

    function initializeMap(){
      
        $('#map').fadeOut(500, function(){
            $('#map').empty().css({
                width: '650px',
                height: '565px',
                backgroundImage: 'url(assets/img-design/map/maltagozo.png)',
                position: 'relative'
            });
            $('#map').fadeIn();
            loadBullets('maltagozo', false);
        });
    }

    function addZoomable(id, width, height, top, left){
        $('<img class="zoomable" src="assets/img-design/map/blank.gif" id="' + id + '" />').css({
            border: 'none',
            position: 'absolute',
            width: width + 'px',
            height: height + 'px',
            top: top + 'px',
            left: left + 'px',
            cursor: 'pointer'
        }).appendTo('#map').click(function() {
            $(this).siblings().fadeOut();
            $(this).hide()
                   .attr('src', 'assets/img-design/map/' + id + '.png')
                   .fadeIn('slow')
                   .animate({
                        width: '650px',
                        height: '565px',
                        top: '0px',
                        left: '100px'
                    }, 1000, '', function(){
                        $('#map').css({backgroundImage: 'url(assets/img-design/map/' + id + '.png)'}).empty();
                        loadBullets(id, true);
                    });
        });
    }
    
    function loadBullets(id, back){
        $('#map').load('http://www.maltadiving.com/en/'+id+'.htm', {}, function(){
            //add back button
            if(back){
                $('<a id="mapback" href="javascript:void(0)" style="position:absolute; top:0; left:0;"><span>Return to map &gt;</span></a>')
                    .appendTo(this)
                    .click(function(){initializeMap()});
            }
            else{
                addZoomable('malta', 440, 400, 170, 305);
                addZoomable('gozo', 295, 256, -35, 90);             
            }
            //place bullets
            $(this).children('a.bullet').each(function(){
                var coords = $(this).attr('rel').split('-');
                $(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
                       .hide()
                       .fadeIn()
                       .click(function(){showPopup($(this).attr('id'));});
            });
        });
    }
    
    function showPopup(id){
        $('#map div.popup').fadeOut(); 
        var boxid = '#' + id + '-box';
        $(boxid).fadeIn();
        $('a.close').click(function(){
            $(this).parent().fadeOut();
        });
        // $('a.mapimage').click(function(){
        	// //alert($('#'+this.id+'-href').val());
        	// var temphref = $('#'+this.id+'-href').val();
//         	
//         	
        		// $(this).fancybox({'overlayShow': true, 'type':'image', overlayOpacity:0.9,frameWidth:600,frameHeight:400 });
//         	
//         	
//         	
// 			
        // });
    }
   
    //initialize map