﻿
function GlobePanel(parentDot, newsEvent) {

    //TOPEVENT => Create GlobePanel, else create SubPanel

        var thisObj = this;

        this.ParentDot = parentDot;
        this.Id = "GlobePanel" + newsEvent.NodeId;
        this.NewsEventId = newsEvent.NodeId;
        this.IsVisible = false;
        this.IsExpanded = false;
        this.SubElements = new Array();

        this.FadeOutTime = 250;
        if ($.browser.msie) this.FadeOutTime = 0;

        this.Element = $(document.createElement('div'));
        this.Element.attr("id", this.Id);
        this.Element.addClass('globePanel');

        if (newsEvent.IsUnicefEvent) this.Element.addClass('blue');
        else this.Element.addClass('red');

        this.Element.css("left", parseInt(this.ParentDot.Element.css("left")) - 18);
        this.Element.css("top", parseInt(this.ParentDot.Element.css("top")) - 38);

        this.OriginalPositionX = 0;
        this.OriginalPositionY = 0;

        $('#panelsOverlay').append(this.Element);

        this.EventContainer = $(document.createElement('div'));
        this.EventContainer.addClass('eventContainer');
        this.Element.append(this.EventContainer);

        var mainElement = $(document.createElement('div'));
        mainElement.addClass('eventElement');

        if (newsEvent.IsUnicefEvent) mainElement.addClass('blue');
        else mainElement.addClass('red');

        $(this.EventContainer).append(mainElement);

        var container = $(document.createElement('div'));
        mainElement.append(container);
        this.globePanelItem = new GlobePanelItem(container, newsEvent);


        mainElement.click(function () {
            if (activeGlobePanel == thisObj) {
                HideNewsEventPanel();
                this.IsExpanded = false;
                return false;
            }

            this.IsExpanded = true;
            activeGlobePanel = thisObj;
            thisObj.CenterPanel();
            ShowNewsEventPanel(thisObj.NewsEventId);
        });


        //this.Element.hover(function () { $('#' + thisObj.Id + ' .pullDown').slideDown(); thisObj.ZSort(); }, function () { $('#' + thisObj.Id + ' .pullDown').slideUp(); })

        this.Element.hover(function () { thisObj.ZSort(); thisObj.ShowSubEvents(); }, function () { thisObj.HideSubEvents(); })

        this.Element.fadeOut(0);

	this.Update();
}

GlobePanel.prototype.AddEvent = function (parentDot, newsEvent) {

    // NO TOPEVENT => Create SubEvent

    var subElement = $(document.createElement('div'));
    subElement.addClass('eventElement');

    if (newsEvent.IsUnicefEvent) subElement.addClass('blue');
    else subElement.addClass('red');

    $(this.EventContainer).append(subElement);

    var container = $(document.createElement('div'));
    subElement.append(container);
    var globePanelItem = new GlobePanelItem(container, newsEvent)

    this.SubElements.push(subElement);

    $(subElement).fadeOut(0);

    thisObj = this;

    subElement.click(function () {
        activeGlobePanel = thisObj;
        thisObj.CenterPanel();
        ShowNewsEventPanel(newsEvent.NodeId);
    });
}

GlobePanel.prototype.ShowSubEvents = function () {

    for (var i in this.SubElements) {
        var subElement = this.SubElements[i];
        $(subElement).delay(i * 100).fadeIn(this.FadeOutTime);
    }

    //$(this.EventContainer).animate({ top: Math.floor(this.SubElements.length * 0.5) * -60 }, 100);
}

GlobePanel.prototype.HideSubEvents = function () {
    for (var i in this.SubElements) {
        var subElement = this.SubElements[i];
        $(subElement).fadeOut(this.FadeOutTime);
    }
    $(this.EventContainer).animate({ top: 0 }, 200);
}

GlobePanel.prototype.CenterPanel = function () {

    this.HideOthers();
    this.Element.css("z-index", 2);
    this.OriginalPositionX = this.Element.css("left");
    this.OriginalPositionY = this.Element.css("top");

    this.Element.animate({
    left: '330',
    top: '225'
    }, 100);
}

GlobePanel.prototype.RepositionPanel = function () {
    this.IsExpanded = false;
    this.Element.animate({
    left: this.OriginalPositionX,
    top: this.OriginalPositionY
    }, 100);
    this.ZSort();
    this.ShowAll();
    
}

GlobePanel.prototype.HideOthers = function () {

    for (var i in globe.GlobeDots) {
        if (globe.GlobeDots[i].GlobePanel != this) {
            globe.GlobeDots[i].GlobePanel.IsVisible = false;
            globe.GlobeDots[i].GlobePanel.Element.fadeOut(0);
        }
    }
}

GlobePanel.prototype.ShowAll = function () {

    for (var i in globe.GlobeDots) {
        if (globe.GlobeDots[i].GlobePanel != this) {
            globe.GlobeDots[i].GlobePanel.Element.fadeIn(0);
            globe.GlobeDots[i].GlobePanel.IsVisible = true;
            globe.GlobeDots[i].GlobePanel.Update();
        }
    }
}

GlobePanel.prototype.ZSort = function () {
    for (var i in globe.GlobeDots) {
        var currentIndex = parseInt(globe.GlobeDots[i].GlobePanel.Element.css("z-index"));
        globe.GlobeDots[i].GlobePanel.Element.css("z-index", currentIndex - 1);
    }
    this.Element.css("z-index", globe.GlobeDots.length);
}

GlobePanel.prototype.Update = function () {

    var left = parseInt(this.ParentDot.Element.css('left')) - 18;

    this.Element.css("left", left);

    if (!this.IsVisible && (left >= 300 && left <= 620)) {
        this.IsVisible = true;

    	this.ZSort();
    	this.Element.fadeIn(this.FadeOutTime);
    }
    else if (this.IsVisible && (left < 300 || left > 620)) {
        this.IsVisible = false;
        this.Element.fadeOut(this.FadeOutTime);
        //$('#' + this.Id + ' .pullDown').hide();
    }
}
