function HomeHostList(sMaskId, sBoxId, sPrevId, sNextId) {
    var oMask = $("#" + sMaskId);
    var oBox = $("#" + sBoxId);
    var oPrev = $("#" + sPrevId);
    var oNext = $("#" + sNextId);
   
    var aryLi = oBox.children("li");
    $("li:eq(4)", oBox).removeClass("hotsborder");
    //oBox.width(aryLi.length * (aryLi.width() + aryLi.css("padding-left") + aryLi.css("padding-right")));
    oBox.width(aryLi.length * 192);
    oBox.data("moving", false);

    oPrev.click(function() {
        move(false);
        return false;
    });

    oNext.click(function() {
        move(true);
        return false;
    });

    var move = function(bToRight) {
    if (oBox.data("moving")) return;
	var iLeft = 0;
	var icrtBoxLeft = parseInt(oBox.css("left"));
	if (isNaN(icrtBoxLeft)) icrtBoxLeft=0;
	var icrtBoxWidth = oBox.width();
	var icrtMaskWidth = oMask.width();
	if (bToRight){
		if (icrtBoxLeft+icrtBoxWidth>icrtMaskWidth){
			var iDelta = icrtBoxWidth-icrtMaskWidth+icrtBoxLeft;
			iLeft = iDelta>=icrtMaskWidth?icrtBoxLeft-icrtMaskWidth:icrtBoxLeft-iDelta;
		}else {
			iLeft = icrtBoxLeft ;
		}
	}else{
		if (icrtBoxLeft<0 && Math.abs(icrtBoxLeft)<icrtMaskWidth){
			iLeft = 0;
		}else if(icrtBoxLeft<0 && Math.abs(icrtBoxLeft)>icrtMaskWidth){
			iLeft = icrtBoxLeft+icrtMaskWidth;
		}
	}
	
	//move it
	if (iLeft != icrtBoxLeft ){
		oBox.data("moving",true);
		oBox.animate({left:iLeft+"px"},"slow",null,function(){updateBtns(true); oBox.data("moving",false)});
	}


    };

    var updateBtns = function(bShow) {
        var icrtBoxLeft = parseInt(oBox.css("left"));
        if (isNaN(icrtBoxLeft)) icrtBoxLeft=0
        var icrtBoxWidth = oBox.width();
        var icrtMaskWidth = oMask.width();

        if (icrtBoxLeft < 0) {
            oPrev.removeClass("hots_prev2").addClass("hots_prev1");
        }
        else {
            oPrev.removeClass("hots_prev1").addClass("hots_prev2");
        }

        if (icrtBoxLeft + icrtBoxWidth > icrtMaskWidth) {
            oNext.removeClass("hots_next2").addClass("hots_next1");
            
        }
        else {
           
            oNext.removeClass("hots_next1").addClass("hots_next2");
           
        }
    };

    updateBtns(true);
};


var homeHostList = null;
$(function() {
    homeHostList = new HomeHostList("mask", "hotsContent", "prev", "next");
});