/**
 * Placeholder for Map interaction.
 * @author Guy Whitfield
 */
rn.PanelEvents = function () {
    var that = this;
    this.eventData = {};
    this.settings = {};
    this.dataFlag = false;
    this.eventPin;
    this.eventLocation;
    this.eventFlag = true;

    this.init = function () {
        this.parent.init.call(this);
        this.setDomElements();
        this.getEventData();

        if (this.dataFlag) {
            this.populatePanel(this.eventData);
        }
        $('#panel-events').css({ 'left': '5em' });
    };

    this.setDomElements = function () {
        this.domNode = $('#panel-events');

        var eventPanelToggle = $('.event-panel-toggle');

        eventPanelToggle.click(function (e) {
            e.stopPropagation();
            $('.carousel-container').slideToggle('slow');
            eventPanelToggle.html($(this).html() == 'Close' ? 'Open' : 'Close').toggleClass('open');

            var header = $('#panel-events h2');
            var slideIndex = globalOpsCarousel.getCurrentSlide() + 1;
            var eventName = $("p.event-name").eq(slideIndex).text();

            header.html(eventPanelToggle.html() == 'Close' ? 'LATEST NEWS' : eventName);

            if (eventPanelToggle.html() == 'Close') {
                rn.Events.fireGlobalEvent(rn.Events.registry.EVENT_PANEL_VESSEL_OPEN, {});
            }
        });

        if ($('#panel-carousel').length > 0) {
            this.minimise();
        }
    }

    this.setCarouselDomElements = function () {

        var prevArrow = $('#ops-prev');
        var nextArrow = $('#ops-next');

        prevArrow.insertBefore($('#panel-events .bx-pager'));
        nextArrow.insertAfter($('#panel-events .bx-pager'));

        prevArrow.click(function () {
            globalOpsCarousel.goToPreviousSlide();
            $('#panel-events .bx-pager a.pager-active').trigger('click');
            rn.panelMapCarousel.hide();
            return false;
        });

        nextArrow.click(function () {
            globalOpsCarousel.goToNextSlide();
            $('#panel-events .bx-pager a.pager-active').trigger('click');
            rn.panelMapCarousel.hide();
            return false;
        });

        $('.pager-link').click(function (e) {
            that.eventFlag = true;
            that.eventPin = rn.map.layerEvents.get(e.target.innerHTML - 1);
            that.eventLocation = rn.map.getLocation(that.eventPin._location.latitude, that.eventPin._location.longitude);
            rn.map.setView({ center: that.eventLocation }, that.eventPin);
            rn.panelMapCarousel.hide();
        })

        var slideIndex = rn.map.eventIndex || 0;

        //Set slide position
        globalOpsCarousel.goToSlide(slideIndex);

        //Setup the eventpin for the first click to be the next pin
        this.eventPin = rn.map.layerEvents.get(slideIndex + 1);
    }

    this.getEventData = function () {
        try {
            if (rn.map.mapData) {
                this.eventData = rn.map.mapData.items;
                this.dataFlag = true;
            }
        } catch (err) {
            this.hide();
        }
    }

    this.populatePanel = function (data) {
        var carouselNode = $('.global-ops-carousel');
        var carouselHtml = '';

        $.each(data, function () {
            var subStrStart = this.time.indexOf('(') + 1;
            var subStrEnd = this.time.indexOf('+');
            var dateInMillis = parseInt(this.time.substring(subStrStart, subStrEnd));
            var eventDate = rn.utilities.formatDateForEvent(dateInMillis);
            carouselHtml += "<li><div class='event-details'><h3>Current Location</h3><p class='location'>" + this.location.PlaceName + "</p><h3>" + eventDate + "</h3><p class='event-name'>" + this.name + "</p><a href='" + this.pageLink + "' class='track-link'>Follow the story</a></div></li>";
        });

        carouselNode.append(carouselHtml);

        globalOpsCarousel = $('.global-ops-carousel').bxSlider({
            pager: true,
            controls: false
        });

        that.setCarouselDomElements();
    }

    this.minimise = function () {
        $('.carousel-container').slideUp('slow');
        $('.event-panel-toggle').html('Open');
    }

    this.maximise = function () {
        $('.carousel-container').slideDown('slow');
        $('.event-panel-toggle').html('Close');
    }

    /**
    * EVENT LISTENERS
    */

    /**
    * onMapSizeToggle - listens for the toggle firing when the map is sent fullscreen, or back again.
    */
    this.onMapSizeToggle = function () {

        if (rn.panelMapSettings.mapState) {
            $('#panel-events').appendTo('body').css({ 'position': 'absolute', 'top': '50px', 'left': '50px', 'z-index': '2750' });
        } else {
            $('#panel-events').appendTo($('#map-container'));
        }

    };

    this.onGlobalDeployment = function () {
        this.hide();
    };

    this.onMapCarouselOpen = function () {
        this.minimise();
    };

    this.onMapCarouselClose = function () {
        this.maximise();
    };

    this.onViewChangeEnd = function () {
        if (that.eventFlag) {
            Microsoft.Maps.Events.invoke(this.eventPin, 'click', { target: { location: that.eventLocation, type: 'event'} });
            that.eventFlag = false;
        }
    }

    this.onScopedDeployment = function () {
        this.hide();
    };


    this.onShowVesselOnMap = function () {
        this.minimise();
    }

    return this;
}

rn.PanelEvents.prototype = new rn.Panel;
rn.PanelEvents.constructor = rn.PanelEvents;
rn.panelEvents = new rn.PanelEvents();
rn.panelEvents.parent = rn.PanelEvents.prototype;