var map = null;

function createSmallPhotoHtml(image, index) {
    var width = image.width / 10;
    var height = image.height / 10;
    return '<div id="photo-' + index + '" class="photo" style="display:relative;background-color:#fff;height:' + (height + 6) + 'px;width:' + (width+6) + 'px"><img src="' + image.src + '" width="' + width + '" height="' + height + '" class="small-image" /></div>';
}

function createPhotoDescriptionHtml() {
    return '';
}

function downloadImage(url, latitude, longitude, map) {
    var index = ++downloadImage.index;
    (function(index) {
        var image = new Image();
        $(image).load(function() {
            var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude));
            map.AddShape(pin);
            pin.SetTitle('Click to view full size photo.');
            pin.SetCustomIcon(createSmallPhotoHtml(image, index));
            pin.SetDescription(createPhotoDescriptionHtml(pin.GetID()));
            $('#photo-' + index).data('pin', pin)
                .find('.small-image').click(photoClicked);

            var bigImage = $('<img src="' + image.src + '" width="' + image.width + '" height="' + image.height + '" class="big-image" title="Click to return to map."/>');
            var offset = $('#site-photos').offset();

            $('body').append(bigImage);
            map.bigImages[pin.GetID()] = bigImage;
        });
        image.src = url;
    })(index);
}
downloadImage.index = -1;

function photoClicked() {
    if (map.preventClick) {
        map.preventClick = false;
        return;
    }
    
    $('body').css('overflow', 'hidden');

    var photo = $(this).closest('.photo');
    var pin = photo.data('pin');
    var location = pin.GetPoints()[0];
    var pixel = map.LatLongToPixel(location);

    var img = photo.find('img.small-image');
    var src = img.attr('src');

    var offset = $('#site-photos').offset();
    var left = pixel.x + offset.left;
    var top = pixel.y + offset.top;
    var width = parseFloat(img.attr('width'));
    var height = parseFloat(img.attr('height'));

    var bigImage = map.bigImages[pin.GetID()];
    var startCss = {
        left: pixel.x + offset.left - 10,
        top: pixel.y + offset.top - 10,
        width: width,
        height: height
    };
    var endCss = {
        left: ($(document).width() - (width * 10)) / 2,
        top: $(document).scrollTop() + ($(window).height() - (height * 10)) / 2,
        width: width * 10,
        height: height * 10
    };
    bigImage.css(startCss).show().animate(endCss);
    $('#overlay').css('height', $(document).height()).fadeIn();

    function hide() {
        $('#overlay').fadeOut();
        bigImage.animate(startCss, { complete: function() { bigImage.hide(); } });
        $('body').css('overflow', '');
        return false;
    }
    setTimeout(function() { $('body').one('click', hide); }, 100);
}

$(function() {

    function initMap() {
        var container = $('#site-photos');
        container.css({ width: 500, height: 500, position: 'relative' });
        var centerLatitude = parseFloat(container.attr('data-latitude'));
        var centerLongitude = parseFloat(container.attr('data-longitude'));
        var projectLatitude = parseFloat(container.attr('data-projectlatitude'));
        var projectLongitude = parseFloat(container.attr('data-projectlongitude'));
        var initialZoom = parseInt(container.attr('data-zoom'));

        var map = new VEMap('site-photos');
        map.SetDashboardSize(VEDashboardSize.Small);
        map.LoadMap(new VELatLong(centerLatitude, centerLongitude), initialZoom, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

//        var tileSourceSpec = new VETileSourceSpecification('os', 'http://ecn.t%2.tiles.virtualearth.net/tiles/r%4.png?g=41&productSet=mmOS');
//        tileSourceSpec.NumServers = 6;
//        tileSourceSpec.MinZoomLevel = 12;
//        tileSourceSpec.MaxZoomLevel = 18;
//        tileSourceSpec.ZIndex = 100;
//        map.AddTileLayer(tileSourceSpec, true);

        var centerPin = new VEShape(VEShapeType.Pushpin, new VELatLong(projectLatitude, projectLongitude));
        centerPin.SetTitle('Location of Wind Farm');
        centerPin.fixed = true;
        map.AddShape(centerPin);

        return map;
    }

    var downloadActions = [];
    $('#site-photos a').each(function() {
        var a = $(this);
        var photoUrl = a.attr('href');
        var latitude = parseFloat(a.attr('data-latitude'));
        var longitude = parseFloat(a.attr('data-longitude'));
        downloadActions.push(function() { downloadImage(photoUrl, latitude, longitude, map); });
        a.remove();
    });

    map = initMap();
    map.bigImages = new Object();
    for (var i = 0; i < downloadActions.length; i++) {
        downloadActions[i]();
    }

    $('body').append($('<div id="overlay" />').css('opacity',0.8));
});