// Listing Item VO
function ListingItem(id, name, imageUrl, desc)
{
	this.id = id;
	this.name = name;
	this.imageUrl = imageUrl;
	this.description = desc;
};

function ListingItemMgr(pageSize, detailUrl)
{
	var pageSize = (pageSize == null ? 6 : pageSize);
	var items = new Array();
    var containerId = null;
    var currentPage = 1;
    var pagerSize = 5;
    var currentPagerStartPage = 1;
    var detailUrl = (detailUrl == null ? 'details.jsp' : detailUrl);
    var setContainerId = function (id)
    {
		containerId = id;
    };
    var getContainerId = function ()
    {
    	return containerId;
    };
	var getItems = function ()
	{
		return items;
	};
    var getDescription = function (str)
    {
        return str;
    };
	var createPaging = function (pagerId)
	{
    	var html = StringUtil.format('<div align="right"><table id="{0}" class="pager" cellpadding="0" cellspacing="0" border="0"><tr>', pagerId);
      var numOfPage = (getItems().length - 1) / pageSize + 1;

      if (numOfPage < 2)
      {
      	return '';
      }
      if (numOfPage > pagerSize)
      {
      	html += StringUtil.format('<td onclick="liMgr.changePager(-1)" class="page" id="{0}" style="visibility:hidden">&lt;</td><td style="width:5px"></td>', pagerId + '_prev');
      }
      html += StringUtil.format('<td onclick="liMgr.switchPage(\'{0}\', {0})" class="current" id="{1}">{0}</td>', 1, pagerId + '_1');
    	for (var i = 2; i <= (numOfPage < pagerSize ? numOfPage : pagerSize); i++)
      {
      	html += StringUtil.format('<td style="width:5px"></td><td class="page" onclick="liMgr.switchPage(\'{0}\', {0}), this" id="{1}">{0}</td>', i, pagerId + '_' + i);
      }
      
      if (Math.floor(numOfPage) > pagerSize)
      {
      	html += StringUtil.format('<td style="width:5px"></td><td class="page" onclick="liMgr.changePager(1)" id="{0}">&gt;</td>', pagerId + '_next');
      }
    	html += '</tr></table></div>';
			return html;
	};
	var createItemTd = function (itemKey)
	{
    	var item = getItems()[itemKey];
        if (item != null)
        {
            var td = '<td class="item">';
            td += '<img src="/hkfoodandwineyear/eng/images/listing_heading.jpg" alt="" class="cs-block" border="0" />';
            td += StringUtil.format('<a href="{2}?id={0}" style="position:relative;top:0px;"><img src="{1}" width="200" height="92" alt="" class="cs-block" border="0" /></a>', item.id, item.imageUrl, detailUrl);
            td += '<div class="content"  style="position:relative;top:0px;">';
            td += StringUtil.format('<a href="{2}?id={0}"><h3>{1}</h3></a>', item.id, item.name, detailUrl);
            td += StringUtil.format('<p>{0}</p>', getDescription(item.description));
            td += '</div></td>';
	        return td;
        }
        else
        {
        	return '<td></td>';
        }
    };
    var createDetailTd = function (itemKey)
	{
    	var item = getItems()[itemKey];
        if (item != null)
        {
            var td = '<td class="item">';
            td += StringUtil.format('<a href="{1}?id={0}"><img src="../../images/btn_details.gif" class="cs-block" style="margin:0px 0px 10px 17px;" border="0" /></a></td>', item.id, detailUrl);
	        return td;
        }
        else
        {
        	return '<td></td>';
        }
    };
	var createVSpaceTd = function ()
	{
		return '<td class="vspace">&nbsp;</td>';
	};
	var createListing = function (page)
	{
		var html = '<table cellpadding="0" cellspacing="0" border="0">';
		var count = 0;
        var detailBottomTr = "";
        for (var key = (page - 1) * pageSize; key < page * pageSize && getItems().length > key ; key++)
		{
			var mode = count++ % 3;
			switch (mode)
			{
				case 0:
					html += '<tr>';
					html += createItemTd(key);
					html += createVSpaceTd();
                    detailBottomTr = '<tr>' + createDetailTd(key) + createVSpaceTd();
					break;
				case 1:
					html += createItemTd(key);
					html += createVSpaceTd();
                    detailBottomTr += createDetailTd(key) + createVSpaceTd();
					break;
				case 2:
					html += createItemTd(key);
                    detailBottomTr += createDetailTd(key) + '</tr>';
					html += '</tr>';
                    html += detailBottomTr;
                    if (count % pageSize != 0)
                    {
                    	html += '<tr><td colspan="3" class="hspace"></td></tr>';
                    }
					break;
			}
		}
        if (count % 3 == 1)
        {
        	html += '<td>&nbsp;</td><td class="vspace">&nbsp;</td><td>&nbsp;</td></tr>';
            html += detailBottomTr;
            html += '<td>&nbsp;</td><td class="vspace">&nbsp;</td><td>&nbsp;</td></tr>';
        }
        else if (count % 3 == 2)
        {
        	html += '<td>&nbsp;</td></tr>';
            html += detailBottomTr;
        	html += '<td>&nbsp;</td></tr>';
        }
		html += '</table>';
        
        return html;
	};
	this.add = function (item)
	{
		getItems().push(item);
	};
	
		this.renderWithBottomPagingOnly = function (divId)
    {
    	setContainerId(divId);
        var html = "";
        html += StringUtil.format('<div id="{0}">', divId + "_listing");
        html += createListing(1);
        html += '</div>';
		html += createPaging(divId + "_pagerbottom");
		divObj = document.getElementById(divId);
		divObj.innerHTML = html;
    };
	
    this.render = function (divId)
    {
    	setContainerId(divId);
        var html = createPaging(divId + "_pagertop");
        html += StringUtil.format('<div id="{0}">', divId + "_listing");
        html += createListing(1);
        html += '</div>';
		html += createPaging(divId + "_pagerbottom");
		divObj = document.getElementById(divId);
		divObj.innerHTML = html;
    };
    
    var getTopPager = function (pageNum)
    {
    	if (document.getElementById(containerId + '_pagertop_' + pageNum)==null){
    		return getBottomPager(pageNum);
    	}else{
    		return document.getElementById(containerId + '_pagertop_' + pageNum);
    	}
    };
    var getBottomPager = function (pageNum)
    {
    	return document.getElementById(containerId + '_pagerbottom_' + pageNum);
    };
    this.switchPage = function (page, selectedPage)
    {
	    getTopPager(currentPage).className = getBottomPager(currentPage).className = 'page';
      getTopPager(selectedPage).className = getBottomPager(selectedPage).className = 'current';
      currentPage = selectedPage;
    	document.getElementById(getContainerId() + '_listing').innerHTML = createListing(page);
    };
    var changePageTo =function (from, to)
    {
    	var divTop = getTopPager(from);
    	var divBottom = getBottomPager(from);
    	
    	divBottom.onclick = function() {liMgr.switchPage(to,to)};
    	divTop.onclick = function() {liMgr.switchPage(to,to)};
    	
    	divBottom.innerHTML = divTop.innerHTML = to;
    	divTop.id = containerId + '_pagertop_' + to;
    	divBottom.id = containerId + '_pagerbottom_' + to;
    };
    this.changePager = function (change)
    {
    	var numOfPage = (((getItems().length - 1) / pageSize) | 0) + 1;
    	if ((currentPagerStartPage <= 1 && change < 0) || (numOfPage <= currentPagerStartPage && change > 1))
    	{
    		return;
    	}
    	var start = currentPagerStartPage + change * pagerSize;
    	var end = start + pagerSize - 1;
    	if (start < 1)
    	{
    		start = 1;
    		end = pagerSize;
    	}
    	else if (end > numOfPage)
    	{
    		start = numOfPage - pagerSize + 1;
    		end = numOfPage;
    	}
    	
    	if (start - currentPagerStartPage < pagerSize)
    	{
    		for (var i = end; i >= start; i--)
	    	{
	    		var from = --currentPagerStartPage + pagerSize;
	    		if (from == currentPage)
	    		{
	    			currentPage = i;
	    		}
	    		changePageTo(from , i);
	    	}
    	}
    	else
    	{
	    	for (var i = start; i <= end; i++)
	    	{
	    		var from = currentPagerStartPage++;
	    		if (from == currentPage)
	    		{
	    			currentPage = i;
	    		}
	    		changePageTo(from, i);
	    	}

	   	}
    	currentPagerStartPage = start;
    	
    	//change current page
    	this.switchPage(currentPagerStartPage, currentPagerStartPage);
    	
    	//show/hide the prev/next buttons
    	if (currentPagerStartPage == 1)
    	{
    		getBottomPager('prev').style.visibility = getTopPager('prev').style.visibility = 'hidden';
    		getBottomPager('next').style.visibility = getTopPager('next').style.visibility = 'visible';
    	}
    	else if (currentPagerStartPage + pagerSize - 1 >= numOfPage)
    	{
    		getBottomPager('next').style.visibility = getTopPager('next').style.visibility = 'hidden';
    		getBottomPager('prev').style.visibility = getTopPager('prev').style.visibility = 'visible';
    	}
    	else
    	{
    		getBottomPager('prev').style.visibility = getTopPager('prev').style.visibility = 'visible';
    		getBottomPager('next').style.visibility = getTopPager('next').style.visibility = 'visible';
    	}
    };
    this.setPageSize = function(newPageSize)
    {
    };
};