﻿

function TO_BL() {

    this.jQuery=$;

    this.dropPoint=null,

    this.settings = {

        containerStyle: "",

        topBar: true,

        pixelDimensions: {
            indent: 11,
            bullet: 4,
            titleDescriptionSpacing: 5,
            barTextSpacing: 6,
            width: 300
        },

        colour: {
            bullet: "#a3a4a6", // Grey
            line: "#a3a4a6", // Grey
            title: "#004f7d", // Blue
            description: "#000000" // Black
        },

        fontSize: {
            link: "0.75em",
            description: "0.75em"
        }

    };

    this.itemCount=0;

    this.item=null;

    this.init=function(strDropPoint,
                    intWidth,
                    blnTopBar,
                    strLineColour,
                    strBulletColour,
                    strContainerStyle
                    ) {
        this.itemCount = 0;
        this.item = new Array();
        this.dropPoint = strDropPoint;
        if (blnTopBar != null) {
            this.settings.topBar = blnTopBar;
        } else {
            this.settings.topBar = true;
        }
        if (intWidth != null) {
            this.settings.pixelDimensions.width = intWidth;
        } else {
            this.settings.pixelDimensions.width = 300;
        }
        if (strLineColour != null) {
            this.settings.colour.line = strLineColour;
        } else {
            this.settings.colour.line = "#a3a4a6";
        }
        if (strBulletColour != null) {
            this.settings.colour.bullet = strBulletColour;
        } else {
            this.settings.colour.bullet = "#a3a4a6";
        }
        if (strContainerStyle != null) {
            this.settings.containerStyle = strContainerStyle;
        } else {
            this.settings.containerStyle = "";
        }
        return this;
    }

    this.addListItem=function(strTitle,
                            strTitleNavigableUrl,
                            strIcon,
                            strDescription,
                            strDescriptionLinkTitle,
                            strDescriptionLinkTitleNavigableUrl
                            ) {

        this.item[this.itemCount++] = {
            title: $("#" + strTitle).html(),
            navigableUrl: strTitleNavigableUrl,
            icon: strIcon,
            description: $("#" + strDescription).html(),
            descriptionLinkTitle: $("#" + strDescriptionLinkTitle).html(),
            descriptionLinkTitleNavigableUrl: strDescriptionLinkTitleNavigableUrl
        }

    }

    this.RenderList = function() {
        var $ = this.jQuery;
        $(this.dropPoint).html('');
        var intTitleHieght = this.MeasureTitleHieght();
        var bulletList = "<div style='width:" + this.settings.pixelDimensions.width + "px; float:left;" + this.settings.containerStyle + "'>";
        if (this.settings.topBar) {
            bulletList = bulletList + " <div style='width:" + this.settings.pixelDimensions.width + "px; height:" + (1 + (2 * this.settings.pixelDimensions.barTextSpacing)) + "px; float:left;'>";
            bulletList = bulletList + "     <div style='display:block; background-color:Transparent; width:1px; height:" + this.settings.pixelDimensions.barTextSpacing + "px; overflow:hidden'></div>";
            bulletList = bulletList + "     <div style='display:block; background-color:" + this.settings.colour.line + "; width:" + (this.settings.pixelDimensions.width - (2 * this.settings.pixelDimensions.indent)) + "px; height:1px; overflow:hidden; margin:auto auto auto auto;'></div>";
            bulletList = bulletList + " </div>";
        }
        for (var i = 0; i < this.itemCount; i++) {
            if (this.item[i].icon == null) {
                bulletList = bulletList + " <div style='width:" + this.settings.pixelDimensions.width + "px;float:left;'>";
                bulletList = bulletList + "     <div style='width:" + this.settings.pixelDimensions.indent + "px; display:block; height:11px; overflow:hidden; float:left;'>";
                bulletList = bulletList + "         <div style='display:block; background-color:Transparent; width:1px; height:" + ((intTitleHieght - this.settings.pixelDimensions.bullet) / 2) + "px; overflow:hidden'></div>";
                bulletList = bulletList + "         <div style='background-color:" + this.settings.colour.bullet + "; width:" + this.settings.pixelDimensions.bullet + "px; display:block; height:" + this.settings.pixelDimensions.bullet + "px; overflow:hidden'></div>";
                bulletList = bulletList + "     </div>";
                bulletList = bulletList + "     <div style='width:" + (this.settings.pixelDimensions.width - (2 * this.settings.pixelDimensions.indent)) + "px; display:block; float:left;'>";
                bulletList = bulletList + "         <div style=''><a href='" + this.item[i].navigableUrl + "' style='color:" + this.settings.colour.title + ";text-decoration:none;font-size:" + this.settings.fontSize.title + "; font-weight:600;'>" + this.item[i].title + "</a></div>";
                if (this.item[i].description != null) {
                    bulletList = bulletList + "         <div style='display:block; background-color:Transparent; width:1px; height:" + this.settings.pixelDimensions.titleDescriptionSpacing + "px; overflow:hidden'></div>";
                    bulletList = bulletList + "         <div style='font-size:" + this.settings.fontSize.description + "; color:" + this.settings.colour.description + ";'>" + this.item[i].description;
                    if (this.item[i].descriptionLinkTitle != null) {
                        bulletList = bulletList + "<a href='" + this.item[i].descriptionLinkTitleNavigableUrl + "' style='color:" + this.settings.colour.title + ";text-decoration:none'>" + this.item[i].descriptionLinkTitle + "</a>";
                    }
                    bulletList = bulletList + "</div>";
                }
                bulletList = bulletList + "     </div>";
                bulletList = bulletList + " </div>";
            } else {
                bulletList = bulletList + " <div style='width:" + this.settings.pixelDimensions.width + "px;float:left;'>";
                bulletList = bulletList + "     <div style='width:" + this.settings.pixelDimensions.indent + "px; display:block; height:11px; overflow:hidden; float:left;'>";
                bulletList = bulletList + "         <div style='display:block; background-color:Transparent; width:1px; height:" + ((intTitleHieght - this.settings.pixelDimensions.bullet) / 2) + "px; overflow:hidden'></div>";
                bulletList = bulletList + "         <div style='background-color:" + this.settings.colour.bullet + "; width:" + this.settings.pixelDimensions.bullet + "px; display:block; height:" + this.settings.pixelDimensions.bullet + "px; overflow:hidden'></div>";
                bulletList = bulletList + "     </div>";
                bulletList = bulletList + "     <div style='width:" + ((this.settings.pixelDimensions.width) - (35 + (3 * this.settings.pixelDimensions.indent))) + "px; display:block; float:left;'>";

                var titleAndDesc = "";

                titleAndDesc = titleAndDesc + "         <div style=''><a href='" + this.item[i].navigableUrl + "' style='color:" + this.settings.colour.title + ";text-decoration:none;font-size:" + this.settings.fontSize.title + "; font-weight:600;'>" + this.item[i].title + "</a></div>";
                if (this.item[i].description != null) {
                    titleAndDesc = titleAndDesc + "         <div style='display:block; background-color:Transparent; width:1px; height:" + this.settings.pixelDimensions.titleDescriptionSpacing + "px; overflow:hidden'></div>";
                    titleAndDesc = titleAndDesc + "         <div style='font-size:" + this.settings.fontSize.description + "; color:" + this.settings.colour.description + ";'>" + this.item[i].description;
                    if (this.item[i].descriptionLinkTitle != null) {
                        titleAndDesc = titleAndDesc + "<a href='" + this.item[i].descriptionLinkTitleNavigableUrl + "' style='color:" + this.settings.colour.title + ";text-decoration:none'>" + this.item[i].descriptionLinkTitle + "</a>";
                    }
                    titleAndDesc = titleAndDesc + "</div>";
                }

                var titleAndDescHieght = this.MeasureDescriptionAndTitleHieght(titleAndDesc);
                bulletList = bulletList + titleAndDesc;

                bulletList = bulletList + "     </div>";
                bulletList = bulletList + "     <div style='width:" + (35 + this.settings.pixelDimensions.indent) + "px; display:block; float:left; margin-top:auto; margin-bottom:auto;'>";
                bulletList = bulletList + "         <div style='display:block; background-color:Transparent; width:" + (35 + this.settings.pixelDimensions.indent) + "px; height:" + ((titleAndDescHieght - 14) / 2) + "px; overflow:hidden; float:left'></div>";
                bulletList = bulletList + "         <div style='display:block; background-color:Transparent; width:" + this.settings.pixelDimensions.indent + "px; height:1px; overflow:hidden; float:left'></div>";
                bulletList = bulletList + "         <div class='BulletList_" + this.item[i].icon + "' style='display:block; overflow:hidden; float:left; height:14px; width:35px;'></div>";
                bulletList = bulletList + "     </div>";
                bulletList = bulletList + " </div>";
            }
            if (i != (this.itemCount - 1)) {
                bulletList = bulletList + "<div style='width:" + this.settings.pixelDimensions.width + "px; height:" + (1 + (2 * this.settings.pixelDimensions.barTextSpacing)) + "px; float:left;'>";
                bulletList = bulletList + "<div style='display:block; background-color:Transparent; width:1px; height:" + this.settings.pixelDimensions.barTextSpacing + "px; overflow:hidden'></div>";
                bulletList = bulletList + "<div style='display:block; background-color:" + this.settings.colour.line + "; width:" + (this.settings.pixelDimensions.width - (2 * this.settings.pixelDimensions.indent)) + "px; height:1px; overflow:hidden; margin:auto auto auto auto;'></div>";
                bulletList = bulletList + "</div>";
            }
        }
        bulletList = bulletList + "</div>";
        $(bulletList).appendTo($(this.dropPoint));
    }

    this.MeasureTitleHieght=function() {
        $("<div id='FindTitleHieght' style='position:absolute; top:-500px; font-size:" + this.settings.fontSize.title + ";'>Hello</div>").appendTo($(this.dropPoint));
        var intHieght = $("#FindTitleHieght").height();
        $("#FindTitleHieght").remove();
        return intHieght;
    }

    this.MeasureDescriptionAndTitleHieght=function(strHtml) {
        $("<div id='FindTitleAndDescHieght' style='position:absolute; top:-500px; width:" + ((this.settings.pixelDimensions.width) - (35 + (3 * this.settings.pixelDimensions.indent))) + ";'>" + strHtml + "</div>").appendTo($(this.dropPoint));
        var intHieght = $("#FindTitleAndDescHieght").height();
        $("#FindTitleAndDescHieght").remove();
        return intHieght;
    }
}
