var map = null; // VEMap object
var itemLayer = null; // VEShapeLayer
var visualizationItems = null;

function VizItem(id, imageName, smallImageName, latitude, longitude) {
    if (!(this instanceof VizItem)) return new VizItem(id, imageName, smallImageName, latitude, longitude);
    this.imageUrl = imageName;
    this.thumbnailUrl = smallImageName;
    this.latitude = latitude;
    this.longitude = longitude;
    this.id = id;
}
VizItem.nextId = 0;
VizItem.prototype.preload = function(callback) {
    this.preloadThumbnail(this.preloadImage(callback));
}
VizItem.prototype.preloadThumbnail = function VizItem_preloadThumbnail(callback) {
    var image = new Image(60, 40);
    $(image).load(callback);
    $(image).error(function() { this.loadFailed = true; callback(); });
    image.src = this.thumbnailUrl;
}
VizItem.prototype.preloadImage = function VizItem_preloadImage(callback) {
    var image = new Image(600, 400);
    $(image).load(callback);
    $(image).error(function() { this.loadFailed = true; callback(); });
    image.src = this.imageUrl;
}
VizItem.prototype.addToLayer = function VizItem_addToLayer(layer) {
    var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(this.latitude, this.longitude));
    pin.SetCustomIcon('<div class="viz"><div class="border"><img src="' + this.thumbnailUrl + '" /></div></div>');
    
    if (VizItem.admin) {
        pin.SetDescription('<p>Drag image to move.</p><p><a href="#delete-image">Delete Image</a></p>');
    } else {
        pin.SetDescription('Click image to enlarge.');
    }
    
    pin.vizItem = this;
    layer.AddShape(pin);
}
VizItem.prototype.showImage = function VizItem_showImage(pin) {
    var ll = pin.GetPoints()[0];
    var pixel = map.LatLongToPixel(ll);
    
    var img = $('<img class="view" src="' + this.imageUrl + '"/>');
    img.css({left: pixel.x-30, top: pixel.y-20, width: 60, height: 40, opacity: 0});
    $('body').append(img);
    
    var overlay = $('#overlay');
    overlay.fadeIn();    
    img.animate(
        {left: 0, top: 100, width: 600, height: 400, opacity: 100}, 'normal', 
        function() { 
            function close() { 
                overlay.fadeOut();
                img.animate(
                    {left: pixel.x-30, top: pixel.y-20, width: 60, height: 40, opacity: 0}, 'normal', 
                    function() { 
                        $(this).remove(); 
                    }
                );
                overlay.unbind('click');
                return false;
            }
            img.click(close);
            overlay.click(close);
        }
    );
}

function VizItemCollection(items) {
    if (!(this instanceof VizItemCollection)) return new VizItemCollection(items);
    this.items = items;
}
VizItemCollection.prototype.preload = function VizItemCollection_preload(callback) {
    var items = this.items;

    var temp = items.slice(0); // create a copy of the array that we can mutate.
    function preloadNextItem() {
        if (temp.length > 0) {
            var item = temp.pop();
            item.preload(function() { callback(item); preloadNextItem(); });
        }
    }
    preloadNextItem();
}

function map_onclick(e) {
    if (e.elementID) {
        var pin = map.GetShapeByID(e.elementID);
        if (pin.vizItem) {
            pin.vizItem.showImage(pin);
        }
    }
}

function init()
{
    initMap();
    initImages();
}

function initMap()
{
    map = new VEMap('map');
    map.SetDashboardSize(VEDashboardSize.Small);
    map.LoadMap();
    map.SetMapStyle(VEMapStyle.Road);
    map.SetCenterAndZoom(new VELatLong(viz.latitude, viz.longitude), viz.zoom);
    map.ClearInfoBoxStyles();

    map.AttachEvent('onclick', map_onclick);

    itemLayer = new VEShapeLayer();
    map.AddShapeLayer(itemLayer);


    var projectPin = new VEShape(VEShapeType.Pushpin, projectLocation);
    projectPin.SetTitle("Approximate location of the wind farm.");
    map.AddShape(projectPin);
}


function initImages()
{
    visualizationItems = new VizItemCollection(window.vizItems);
    visualizationItems.preload(function itemReady(item) {
        item.addToLayer(itemLayer);
    });
}

$(document).ready(init);