/**
 * SBCPersonalityWidgetJs.JS
 *
 */
var PersonalityWidgetJs = function(OptionObj){
    var _widget_id = "";
    var _item_array = OptionObj.items;
    var _table_id = "";

    var _title_css = "sbcwCommunityName";
    var _description_css = "sbcwCommunityDesc";
    var _more_css = "sbcwCommunityMore";
    var _max_items_for_row = 3;

    function _renderWidget(id,mode,index){
        _table_id = "tbl_" + id;

        if (mode == "detail") {
            _renderDetail(id,index);
        }else {
            _renderBrief(id);
        }

    }

    function _renderDetail(id,index) {
        var _base_img_src = "/media/widgets/"+ _item_array[index].widgetHeaderId +"/";
        $("#" + id).append("<table border='0' cellspacing='0' cellpadding='0' id='" + _table_id + "' style='width:850px; margin:5px'></table>");
        var html = "<tr><td width='320'><img src='"+ _base_img_src + _item_array[index].largeImage +"'></td><td><div style='text-align:left; margin:15px'>"+_item_array[index].content+"</div></td></tr>";
        $("#" + _table_id).append(html);
    }


    function _renderBrief(id) {
        $("#" + id).append("<table border='0' cellspacing='0' cellpadding='0' id='" + _table_id + "'></table>");
        var length = _item_array.length;

        if (length == 0) {
            return;
        }


        var maxIndex = length - 1;
        var rows = parseInt(maxIndex / _max_items_for_row) + 1;
        for (var j = 0; j < rows; ++j) {
            var row_id = "rows_" + j;
            //render tr
            $("#" + _table_id).append("<tr id=" + row_id + "></tr>");
            var item_of_row = length % _max_items_for_row;
            var max_line_item = (item_of_row == 0 ? _max_items_for_row : item_of_row );
            var items = (j == rows - 1 ? max_line_item : _max_items_for_row);
            for (var i = 0; i < items; ++i) {
                var align = "left";
                _addItemsToWidget(align, _item_array[i + j * _max_items_for_row], row_id);
            }
        }
    }

    function _addItemsToWidget(align, item, row_id){
        var item_id = "itm_" + item.widgetLineId;
        $("#" + row_id).append("<td align='" + align + "' valign='top' class='sbcwCommunityCell' style='cursor: pointer;'" +
        "onClick='top.location=\"" +
        item.link +
        "\"' id='" +
        item_id +
        "'></td>");
        _renderItems(item, item_id);
    }

    function _renderItems(item, item_id){
        var _base_img_src = "/media/widgets/"+ item.widgetHeaderId +"/";
        $("#" + item_id).append("<img src='" + _base_img_src + item.thumbnailImage + "' border='0' hspace='11'>" +
        "<div class='" +
        _title_css +
        "'>" +
        item.title +
        "</div>" +
        "<div class='" +
        _description_css +
        "'>" +
        item.description +
        "</div>" +
        "<div class='" +
        _more_css +
        "'> MORE&gt;&gt; </div> ");
    }

    return {
        renderUI: function(id,mode,index){
            _renderWidget(id,mode,index);
        },
        setCSSOfWidget: function(CSS){
            $("#" + _table_id).addClass(CSS);
        },
        setBaseImgSrc: function(baseImgSrc){
            _base_img_src = baseImgSrc;
        },
        setCSSOfItem: function(titleCSS, descptionCSS, moreCSS){
            _title_css = titleCSS;
            _description_css = descptionCSS;
            _more_css = moreCSS;
        },
        setMaxItemsForRow: function(maxItemsForRow){
            _max_items_for_row = maxItemsForRow;
        }
    }
}