/**
 * Stub for Vessel interaction.
 * @author Guy Whitfield
 */
rn.PanelVessel = function () {
    var that = this;
    this.vesselData = {};
    this.settings = {};
    this.dataFlag = false;
    this.domNode;

    this.init = function () {
        this.parent.init.call(this);
        this.getData();
        this.sortVesselList();
        // Reset position of panel for curious users
        $(window).resize(
        function () {
            rn.panelVessel.centerPanel();
            rn.map.resizeMapNode();
        });

    };

    this.show = function () {
        this.parent.show.call(this);
        !$('#map-veil').is(':visible') ? $('#map-veil').fadeIn() : $('#map-veil').fadeOut(50);
    };

    this.hide = function () {
        this.parent.hide.call(this);
        if ($('#map-veil').is(':visible')) {
            $('#map-veil').fadeOut(50);
        }
    };

    this.getData = function () {
        try {
            var qs = window.location;
            var service = "http://" + qs.hostname + "/The-Fleet/Ships?ajax=1";

            $.ajax({
                url: service,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    that.vesselData = data['sea'];
                    that.dataFlag = true;
                    that.populatePanel(that.vesselData);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    rn.Console.log("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
                }
            });
        } catch (err) {
            this.hide();
        }
    }

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

        $('.vessel-panel-close').click(function (e) {
            e.stopPropagation();
            that.hide();
        });

        $('.view-vessel-scroller a').click(function (e) {
            var that = this;
            e.stopPropagation();
            $('.view-vessel-scroller a').removeClass('selected');
            $(this).addClass('selected');
            $('.view-vessel').html('<span>LOCATE ' + $(this).attr('data-name') + ' ON MAP</span>').attr({ 'data-latitude': $(this).attr('data-latitude'), 'data-longitude': $(this).attr('data-longitude') });
            $('#view-vessel-image').fadeOut(250, function () { rn.panelVessel.changeImageSource($('#view-vessel-image'), $(that).attr('data-panelImageUrl')) });
            $(".dropdown dd ul").slideUp();
        });


        $('.view-vessel-scroller a').dblclick(function (e) {
            $('.view-vessel').trigger('click');
        });


        $('.view-vessel-scroller a').mouseover(function (e) {
            $(this).find('span').css({ 'color': '#d3d3d3' });
        });
        $('.view-vessel-scroller a').mouseout(function (e) {
            $(this).find('span').css({ 'color': 'white' });
        });


        $('#vessel-filter').change(function (e) {
            switch (parseInt(this.value)) {
                case 1:
                    that.sortVesselList('vessel-name');
                    break;
                case 2:
                    that.sortVesselList('vessel-name', 'descending');
                    break;
                case 3:
                    that.sortVesselList('deployment-name');
                    break;
                case 4:
                    that.sortVesselList('deployment-name', 'descending');
                    break;
                case 5:
                    that.sortVesselList('data-date');
                    break;
                case 6:
                    that.sortVesselList('data-date', 'descending');
                    break;
                default:
                    that.sortVesselList();
            }
        });

        $('.view-vessel').click(function (e) {
            rn.Events.fireGlobalEvent(rn.Events.registry.EVENT_SHOW_VESSEL_ON_MAP, {});
            rn.map.setLocation($(this).attr('data-latitude'), $(this).attr('data-longitude'));
            that.hide();

        });

    }

    this.changeImageSource = function (img, imgPath) {
        img.attr({ 'src': imgPath });
        img.fadeIn();
    }

    this.sortVesselList = function (operator, direction) {
        if (!operator) { operator = 'vessel-name' };
        operator != 'data-date' ? operator = 'span.' + operator : operator;
        var list = $('.view-vessel-scroller');
        var listitems = list.children('li').get();
        listitems.sort(function (a, b) {
            var compareA = $(a).find(operator).text().toUpperCase();
            var compareB = $(b).find(operator).text().toUpperCase();
            if (operator == 'data-date') {
                compareA = $(a).find('a').attr('data-date');
                compareB = $(b).find('a').attr('data-date');
            }
            if (direction == 'descending') {
                return (compareA > compareB) ? -1 : (compareA < compareB) ? 1 : 0; // Z_A

            } else {
                return (compareA < compareB) ? -1 : (compareA > compareB) ? 1 : 0; // A-Z
            }

        })
        $.each(listitems, function (idx, itm) { list.append(itm); })
        $('.view-vessel-scroller a').removeClass('first');
        $('.view-vessel-scroller a:first').addClass('first');
    }



    this.populatePanel = function (data) {
        this.vesselData = data;

        var vesselList = $('.view-vessel-scroller');
        var vesselHtml = '';

        $.each(data, function () {
            var date = rn.utilities.formatDateGetTimeInMilliseconds(eval(this.missionDate.slice(1, -1)));
            vesselHtml += "<li><a href='#' data-panelImageUrl='" + this.panelImageUrl +
                          "' data-latitude='" + this.location.Latitude +
                          "' data-longitude='" + this.location.Longitude +
                          "' data-name='" + this.name +
                          "' data-date='" + date +
                          "'>Vessel: <span class='vessel-name'>" + this.name +
                          "</span><br />Deployment: <span class='deployment-name'>" + this.mission +
                          "</span></a></li>";
        });

        vesselList.append(vesselHtml);

        this.setDomElements();

        var firstvessel = $('.view-vessel-scroller').children('li').get(0);
        firstvessel = $(firstvessel).find('a');
        firstvessel.addClass('selected');
        var name = firstvessel.attr('data-name');
        var latitude = firstvessel.attr('data-latitude');
        var longitude = firstvessel.attr('data-longitude');
        var panelImageUrl = firstvessel.attr('data-panelImageUrl');
        $('.view-vessel').html('<span>LOCATE ' + name + ' ON MAP</span>').attr({ 'data-latitude': latitude, 'data-longitude': longitude });
        // Out until the images are in Sitecore
        rn.panelVessel.changeImageSource($('#view-vessel-image'), panelImageUrl);
    }

    this.centerPanel = function () {

        // get positioning offset for the panel
        var panelNode = $('#panel-vessel');
        var panelNodeParent = panelNode.parent();
        var parentHeight = $(window).height();
        var heightOffset = 0; // used to offset the negative margin on the map settings panel
        var parentWidth = panelNodeParent.width();

        if (panelNode.parents('#map-container').length) {
            parentHeight = panelNodeParent.height();
            heightOffset = 10;
        }

        var halfWidth = (panelNode.width() / 2);
        var halfHeight = (panelNode.height() / 2);
        var adjustedTop = (parentHeight / 2) - halfHeight - heightOffset;
        var adjustedLeft = (parentWidth / 2) - halfWidth;
        panelNode.css({ 'position': 'absolute', 'top': adjustedTop, 'left': adjustedLeft });
        return;
    }


    this.createDropDown = function () {
        if ($('#target').length < 1) {

            var source = $("#vessel-filter");
            var selected = source.find("option[selected]");
            var options = $("option", source);

            $(".filter").append('<dl id="target" class="dropdown"></dl>')
            $("#target").append('<dt><a href="#">' + (selected.text() || 'VESSEL - ASCENDING') +
                '<span class="value">' + (selected.val() || 1) +
                '</span></a></dt>')
            $("#target").append('<dd><ul></ul></dd>')

            options.each(function () {
                $("#target dd ul").append('<li><a href="#">' +
                    $(this).text() + '<span class="value">' +
                    $(this).val() + '</span></a></li>');
            });

            $(".dropdown dt a").click(function () {
                $(".dropdown dd ul").slideToggle();
            });

            $(document).bind('click', function (e) {
                var $clicked = $(e.target);
                if (!$clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").slideUp();
            });

            $(".dropdown dd ul li a").click(function () {
                var text = $(this).html();
                $(".dropdown dt a").html(text);
                $(".dropdown dd ul").slideToggle();
                var source = $("#vessel-filter");
                source.val($(this).find("span.value").html())
                $('#vessel-filter').trigger('change');
            });

        }
    }


    /**
    * EVENT LISTENERS
    */

    this.onMapSizeToggle = function () {

        if (rn.panelMapSettings.mapState) {
            $('#panel-vessel').appendTo('body').css({ 'z-index': '2800' });
            this.centerPanel();
            $('#map-veil').appendTo('body').css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': '2760', 'width': '100%', 'height': '100%' });
        } else {
            $('#panel-vessel').appendTo($('#map-container'));
            this.centerPanel();
            $('#map-veil').appendTo($('#map-container'));
        }

    };

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

    this.onViewVessel = function () {
        this.show();
        rn.panelVessel.centerPanel();
        // Reset the scroller container and the scrollbar so the scroller displays correctly onView
        $('#panel-vessel .scroller-container').removeAttr('style');
        $('.scroller-container').tinyscrollbar({ 'size': 220 }, 220);
        rn.panelVessel.createDropDown();
    }
    return this;
}

rn.PanelVessel.prototype = new rn.Panel();
rn.PanelVessel.constructor = rn.PanelVessel;
rn.panelVessel = new rn.PanelVessel();
rn.panelVessel.parent = rn.PanelVessel.prototype;