TemplateInfo = function(name, desc,
 baseUrl,
 styleCount,
 iconWidth, iconHeight,
 imageWidth, imageHeight,
 popupHeight) {
    this.Name = name;
    this.Desc = desc;
    this.BaseUrl = baseUrl;
    this.StyleCount = styleCount;
    this.IconWidth = iconWidth;
    this.IconHeight = iconHeight;
    this.ImageWidth = imageWidth;
    this.ImageHeight = imageHeight;
    this.PopupHeight = popupHeight;
}

TemplateInfo.prototype = {
    GetIconUrl: function(index) {
        return this.BaseUrl + 'icons/tpl_' + index + '.gif';
    },

    GetImageUrl: function(index) {
        return this.BaseUrl + 'tpl_' + index + '.png';
    }
}

var templatesInfo = new Array();

function InitializeTemplatesBox() {
    var templatesSlider = $('#templates_slider');

    // append UL element
    // inside will be LI elements with table which will include up to 4 icon images
    // each icon will have a link to open popup with all template styles

    var ul = $('<UL>');
    ul.appendTo(templatesSlider);
    var boxCount =  Math.floor(templatesInfo.length / 5) + (templatesInfo.length % 5 > 0 ? 1 : 0);
    var templateIndex = 0;
    for (var i = 0; i < boxCount; i++) {
        var li = $('<LI>');
        li.appendTo(ul);

        // generates table
        //var table = $('<table class="templates_samples" border="0" cellspacing="0" cellpadding="4" width="100%">');
        var table = $('<table>').addClass("templates_samples").attr(
            {
                border: "0",
                cellspacing: "0",
                cellpadding: "4",
                width: "100%"
            }
        );
        
        var tbody = $('<tbody>');
        table.appendTo(li);
        tbody.appendTo(table);

        var row = $('<tr>');

        for (var cellIndex = 0; cellIndex < 5; cellIndex++) {
            var cell = $('<td>');
            var tInfo = templatesInfo[templateIndex];
            cell.data('tIndex', templateIndex);
            cell.width('20%');
            if (templateIndex < templatesInfo.length) {
                cell.click(function() {
                ShowTemplatePopupBox($(this).data('tIndex'), true);
                    return false;
                });

                var height = tInfo.IconHeight;
                var width = tInfo.IconWidth;

                var img = "<img border='0' src='" + tInfo.GetIconUrl(1) + "' alt='" + tInfo.Name + "' title='" + tInfo.Name + "' ";
                if (width > 0)
                    img += "width='" + width + "' ";
                if (height > 0)
                    img += "height='" + height + "' ";
                img += " /><br />";

                cell.html(img);

                var link = $('<a>').addClass('zoom_in').attr({ href: "#" });
                link.data('tIndex', templateIndex);
                link.text('zoom in');
                link.click(function() {
                    ShowTemplatePopupBox($(this).data('tIndex'), true);
                    return false;
                });

                link.appendTo(cell);
            }
            else
            {
                cell.html('&nbsp;');
            }

            cell.appendTo(row);

            templateIndex++;       
        }
            
        row.appendTo(tbody);
    }
}

var templatesBoxPopup = null;
var templatePopupBoxCurrentTemplateIndex = 0;


function ShowTemplatePopupBox(currentIndex, openPopup) {
    templates_slideshow_for_class = null;

    var templateInfo = templatesInfo[currentIndex];

    templatePopupBoxCurrentTemplateIndex = currentIndex;

    $("#templatesBoxHeader").html(templateInfo.Name);

    var templatesPopupScroller = $("#templatesPopupScroller");
    templatesPopupScroller.empty();

    var rowCount = Math.floor(templateInfo.StyleCount / 2) + (templateInfo.StyleCount % 2 > 0 ? 1 : 0);
    var table = $('<table>').addClass("templates_popup_samples").attr(
            {
                border: "0",
                cellspacing: "0",
                cellpadding: "3",
                width: "100%"
            }
        );

    var tbody = $('<tbody>');
    tbody.appendTo(table);

    var styleIndex = 0;

    for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
        var row = $('<tr>');

        for (var cellIndex = 0; cellIndex < 2; cellIndex++) {
            var cell = $('<td>');
            cell.width('50%');
            if (styleIndex < templateInfo.StyleCount) {

                var height = templateInfo.ImageHeight;
                var width = templateInfo.ImageWidth;

                var img = "<img border='0' src='" + templateInfo.GetImageUrl(styleIndex + 1) + "' alt='Style #" + (styleIndex + 1) + "' title='Style #" + (styleIndex + 1) + "' ";
                if (width > 0)
                    img += "width='" + width + "' ";
                if (height > 0)
                    img += "height='" + height + "' ";
                img += " />";

                cell.html(img);
            }
            else {
                cell.html('&nbsp;');
            }

            cell.appendTo(row);

            styleIndex++;
        }
        row.appendTo(tbody);
    }

    table.appendTo(templatesPopupScroller);

    if (openPopup) {
        var popHeight = 558;
        templatesBoxPopup = ShowPopup("templatesBoxPopup", 700, popHeight, 'templates_box_popup', 'Template Styles', true, true);
    }
}

function templatesBoxPopupMove(step) {
    var currentIndex = templatePopupBoxCurrentTemplateIndex + Number(step);
    if (currentIndex >= templatesInfo.length)
        currentIndex = 0;
    else if (currentIndex < 0)
        currentIndex = templatesInfo.length - 1;

    ShowTemplatePopupBox(currentIndex, false);
}