var portData;
var commoditiesData;
var clickEventHandled = false;
var totalDots = 0;

var commodities;
var ports;

var currentlySelectedPort = '';

function plotPortPositons() {
    for (var i = 0; i < portData.length; i++) {
        addDot(i);
    }
}

function loadCommoditiesBoxes() {
    for (var i = 0; i < commoditiesData.length; i++) {
        var checkbox = createCommoditiesCheckbox(i, commoditiesData[i]);
        $("#CommoditiesListInner").append(checkbox);
    }
}

function addHyperlinkToDotContent(linksList, linkUrl, linkText) {

    var li = $("<li />");
    var a = $("<a />");
    a.attr("href", linkUrl);
    a.text("> " + linkText);
    li.append(a);
    linksList.append(li);

}

function createDotHtml(currentPortData) {

    var dot = $("<div class='dot' id='dot" + currentPortData.ID + "' style='top: " + currentPortData.YCoordinate + "px; left:" + currentPortData.XCoordinate + "px' />");
    var dotContent = $("<div id='dotContent" + currentPortData.ID + "' class='dotText' />");

    var header = $("<div class='dotHeader' />");
    var content = $("<div class='dotContent' />");
    var links = $("<ul />");

    header.html(currentPortData.Name);
    content.html(currentPortData.Description);

    if (currentPortData.Link1Url) {
        addHyperlinkToDotContent(links, currentPortData.Link1Url, currentPortData.Link1Text);
    }
    if (currentPortData.Link2Url) {
        addHyperlinkToDotContent(links, currentPortData.Link2Url, currentPortData.Link2Text);
    }
    if (currentPortData.Link3Url) {
        addHyperlinkToDotContent(links, currentPortData.Link3Url, currentPortData.Link3Text);
    }

    dotContent.append(header);
    dotContent.append(content);
    dotContent.append(links);

    dot.append(dotContent);
    dot.attr("title", currentPortData.Name);

    return dot;

}

function createCommoditiesCheckbox(index, currentCommodity) {

    var div = $("<div />");
    var checkbox = $("<input type='checkbox' class='commodityCheckbox' id='commodityCheckbox" + currentCommodity.ID + "' commodity='" + currentCommodity.ID + "' />");
    var label = $("<label for='commodityCheckbox" + currentCommodity.ID + "' />");

    label.text(currentCommodity.Name);

    div.append(checkbox);
    div.append(label);

    checkbox.click(function () {
        commodityCheckboxClicked(index, currentCommodity.ID);
    });

    return div;

}

function createDotCheckbox(currentPort) {

    var div = $("<div />");
    var checkbox = $("<input type='checkbox' class='portCheckbox' id='portCheckbox" + currentPort.ID + "' port='" + currentPort.ID + "' />");
    var label = $("<label id='portCheckboxLabel" + currentPort.ID + "' for='portCheckbox" + currentPort.ID + "' />");

    label.text(currentPort.Name);

    div.append(checkbox);
    div.append(label);

    checkbox.click(function () {
        portCheckboxClicked(currentPort.ID);
    });

    return div;

}

function addDot(index) {

    var currentPortData = portData[index];
    var dot = createDotHtml(currentPortData);
    var dotCheckbox = createDotCheckbox(currentPortData);

    dot.click(function () {
        showTextForPort(currentPortData.ID);
        clickEventHandled = true;
    });

    $("#MapArea").append(dot);

    if (currentPortData.Name.indexOf("Hams Hall") > -1) {
        $("#PortsListHamsHall").append(dotCheckbox);
    } else {

        if (totalDots < 11)
            $("#PortsListColumn1").append(dotCheckbox);
        else
            $("#PortsListColumn2").append(dotCheckbox);

        totalDots++;
    }

}

function showTextForPort(PortID) {
    $(".dotText").hide();
    $("#dotContent" + PortID).show();
}

function commodityCheckboxClicked(index, CommodityID) {
    var checkbox = $("#commodityCheckbox" + CommodityID);

    if (checkbox.is(":checked")) {

        $(".commodityCheckbox[commodity != " + CommodityID + "]").removeAttr("checked");

        $(".dot").attr("class", "dot dotBlack");

        var PortsList = commoditiesData[index].Ports;

        for (var portIndex in PortsList) {
            $("#dot" + PortsList[portIndex].ID).attr("class", "dot");
        }

    } else {
        $(".dot").attr("class", "dot");
    }

}

function setPortDotSelected(PortID) {
    $(".dot").attr("class", "dot dotBlack");
    $("#dot" + PortID).attr("class", "dot");
}

function portCheckboxClicked(PortID) {

    var checkbox = $("#portCheckbox" + PortID);
    var label = $("#portCheckboxLabel" + PortID);

    if (checkbox.is(":checked")) {
        $(".portCheckbox[port != " + PortID + "]").removeAttr("checked");
        setPortDotSelected(PortID);
        showTextForPort(PortID);
        currentlySelectedPort = $(label).text();

    } else {
        $(".dot").attr("class", "dot");
        $(".dotText").hide();
    }

    clickEventHandled = true;
}

function initialiseMapPanelTabs() {

    $(".LoadingText").html("tabs");

    $("#MapPanelTabs A").click(function () {
        showMapPanelTab(this);
    });
}

function showMapPanelTab(tab) {

    var selectedTab = $(tab);
    var visiblePanel = selectedTab.attr("childpanel");

    $("#MapPanelTabAreas>DIV[id != " + visiblePanel + "]").hide();
    $("#" + visiblePanel).show();

    $("#MapPanelTabs A").removeAttr("class");
    selectedTab.attr("class", "SelectedTab");

    /* Reselect all dots and unselect all checkboxes */

    $(".dot").attr("class", "dot");
    $(".dotText").hide();

    $(".portCheckbox").removeAttr("checked");
    $(".commodityCheckbox").removeAttr("checked");

}

function MapAreaClicked() {
    if (!clickEventHandled)
        $(".dotText").hide();
    clickEventHandled = false;
}

function getPortsAndCommodities() {

    $(".LoadingText").html("Loading ports and commodities...");

    commodities = $.getJSON(
            "/Map/Ajax/Commodities/",
            null,
            function (data) {
                $("#CommoditiesListLoading").html("Commodities loaded...");
                commoditiesData = data;
                loadCommoditiesBoxes();
                $("#CommoditiesListLoading").hide();
            }
        ).error(function (jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        });

    ports = $.getJSON(
            "/Map/Ajax/Ports/",
            null,
            function (data) {
                $("#CommoditiesListLoading").html("Ports loaded...");
                portData = data;
                plotPortPositons();

                $("#PortsListLoading").hide();
            }
        ).error(function (jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        });
}