var iMaxTS = 5, iMaxTBS = 3;
var iReadStep = 0;
var sLoDID = ',';
var iDelay = 200;
var iDisplayCateNo = 0;
var iTSTimer = 0;
var iTSCount, iTSCur, iTSFading, iTSPrev = 0, iTSNext = 0, iTSFastMove = 0;
var iFadeDelay = 50;
var iBoxCount = 0;
//-------------------------------------------------------------------------------------------
function gmobj(objID) {
    return document.getElementById(objID);
}
function iif(iEx1, r1, r2) {
    if (iEx1) return r1;
    else return r2;
}

//-------------------------------------------------------------------------------------------
function showtopstoryitem(sNameTS, sPathTS, arItemTS) {
    iTSCount = arItemTS.length - 1;
    var boxwidth = 368;
    var boxheight = 235;
    var borderwidth = 3;
    var layerheight = 45;
    var sHTML = '';
    sHTML = sHTML.concat('<div style="position:relative;width:' + boxwidth + 'px;height:' + boxheight + 'px;">');
    sHTML = sHTML.concat('	<div style="left:0px;top:0px;width:' + boxwidth + 'px;height:' + borderwidth + 'px;" class="HomeTopStoryBorder"></div>');
    sHTML = sHTML.concat('	<div style="left:0px;top:' + (boxheight - borderwidth) + 'px;width:' + boxwidth + 'px;height:' + borderwidth + 'px;" class="HomeTopStoryBorder"></div>');
    sHTML = sHTML.concat('	<div style="left:0px;top:' + borderwidth + 'px;width:' + borderwidth + 'px;height:' + (boxheight - 2 * borderwidth) + 'px;" class="HomeTopStoryBorder"></div>');
    sHTML = sHTML.concat('	<div style="left:' + (boxwidth - borderwidth) + ';top:' + borderwidth + 'px;width:' + borderwidth + 'px;height:' + (boxheight - 2 * borderwidth) + 'px;" class="HomeTopStoryBorder"></div>');
    for (var i = 0; i <= iTSCount; i++) {
        sHTML = sHTML.concat('	<div id="divTopStory').concat(i).concat('" onmousemove="cleartopstorycounter();" style="overflow:hidden;position:absolute;').concat(iif(i == 0, 'left:0px', 'left:-1000px')).concat(';top:0px;width:' + boxwidth + 'px;height:' + boxheight + 'px;">');
       // sHTML = sHTML.concat('		<a href="').concat(arItemTS[i][1]).concat('"><div id="divTopStory" border="0" style="background-repeat:no-repeat;background-image: url(' + arItemTS[i][4] + ');width:' + boxwidth + 'px; height:' + boxwidth + 'px;background-position:center;"></div></a>');
        
        sHTML = sHTML.concat('		<a href="').concat(arItemTS[i][1]).concat('"><img border="0" src="').concat(arItemTS[i][4]).concat('" width="' + boxwidth + '" height="' + boxheight + '"></a>');
        sHTML = sHTML.concat('	</div>');
        sHTML = sHTML.concat('	<div id="divTopStoryLayer').concat(i).concat('" onmousemove="cleartopstorycounter();" style="').concat(iif(i == 0, 'left:0px', 'left:-1000px')).concat(';top:' + (boxheight - layerheight) + 'px;width:' + boxwidth + 'px;height:' + layerheight + 'px;" class="HomeTopStoryColorLayer"></div>');
        sHTML = sHTML.concat('	<div id="divTopStoryTitle').concat(i).concat('" onmousemove="cleartopstorycounter();" style="').concat(iif(i == 0, 'left:0px', 'left:-1000px')).concat(';top:' + (boxheight - layerheight) + 'px;width:' + boxwidth + 'px;height:' + layerheight + 'px;" class="HomeTopStoryColorLayerContent">');
        sHTML = sHTML.concat('		<div style="left:7px;top:4px;width:' + (boxwidth - 10) + 'px;height:18px;" class="HomeTopStoryTitle" onclick="window.location=\'').concat(arItemTS[i][1]).concat('\'">').concat(arItemTS[i][2]).concat('</div>');
        sHTML = sHTML.concat('		<div style="left:8px;top:5px;width:' + (boxwidth - 10) + 'px;height:18px;" class="HomeTopStoryTitleShadow">').concat(arItemTS[i][2]).concat('</div>');
        sHTML = sHTML.concat('		<div style="left:8px;top:28px;width:' + (boxwidth - 50) + 'px;height:18px;" class="HomeTopStoryLead">').concat(arItemTS[i][3]);
        sHTML = sHTML.concat('		</div>');
        sHTML = sHTML.concat('	</div>');
    }
    sHTML = sHTML.concat('<div style="left:' + (boxwidth - 27) + 'px;top:' + (boxheight - 19) + 'px;width:30px;height:32px;" class="HomeTopStoryColorLayerSubImage">');
    sHTML = sHTML.concat('<img id="imgTSPrev" src="/App_Themes/Site/Images/Slide/Prev2.gif" hspace="2" vspace="0" onmouseover="iTSPrev=1;this.src=\'/App_Themes/Site/Images/Slide/Prev.gif\'" onmouseout="iTSPrev=0;this.src=\'/App_Themes/Site/Images/Slide/Prev2.gif\'" style="cursor:pointer" onclick="changetopstory(-1,false);">');
    sHTML = sHTML.concat('<img id="imgTSNext" src="/App_Themes/Site/Images/Slide/Next2.gif" hspace="2" vspace="0" onmouseover="iTSNext=1;this.src=\'/App_Themes/Site/Images/Slide/Next.gif\'" onmouseout="iTSNext=0;if (!iTSFading) this.src=\'/App_Themes/Site/Images/Slide/Next2.gif\'" style="cursor:pointer" onclick="changetopstory(1,false);">');
    sHTML = sHTML.concat('</div>');
    sHTML = sHTML.concat('</div>');
    gmobj('tdTS').innerHTML = sHTML;
    iTSCur = 0;
    setInterval(function() { topstorycounter(); }, 100)
}

function changetopstory(direction, fade) {
    var iTop, iBot;
    var oTop, oBot, oTopLayer, oBotLayer, oTopTitle, oBotTitle;
    iTop = iTSCur;
    iBot = iTop + direction;
    if (iBot < 0) iBot = iTSCount;
    if (iBot > iTSCount) iBot = 0;
    oTop = 'divTopStory' + iTop;
    oBot = 'divTopStory' + iBot;
    oTopLayer = 'divTopStoryLayer' + iTop;
    oBotLayer = 'divTopStoryLayer' + iBot;
    oTopTitle = 'divTopStoryTitle' + iTop;
    oBotTitle = 'divTopStoryTitle' + iBot;
    if (iTSFading == 1) {
        gmobj('divTopStory' + (iTop + 1)).style.left = '-1000px';
        gmobj('divTopStoryLayer' + (iTop + 1)).style.left = '-1000px';
        gmobj('divTopStoryTitle' + (iTop + 1)).style.left = '-1000px';
        outdirectionimage();
        iTSFading = 0;
    }
    iTSTimer = 0;
    if (!fade) {
        iTSFastMove = 1;
        changeOpac(100, oBot);
        changeOpac(40, oBotLayer);
        changeOpac(100, oBotTitle);
        gmobj(oTop).style.zIndex = 1;
        gmobj(oBot).style.zIndex = 2;
        gmobj(oBot).style.left = '0px';
        gmobj(oTop).style.left = '-1000px';
        gmobj(oBotLayer).style.left = '0px';
        gmobj(oTopLayer).style.left = '-1000px';
        gmobj(oBotTitle).style.left = '0px';
        gmobj(oTopTitle).style.left = '-1000px';
        iTSFading = 0;
        iTSCur = iBot;
    }
    else {
        iTSFastMove = 0;
        changeOpac(100, oBot);
        changeOpac(0, oBotLayer);
        changeOpac(0, oBotTitle);
        gmobj(oTop).style.zIndex = 2;
        gmobj(oBot).style.zIndex = 1;
        gmobj(oBot).style.left = '0px';
        gmobj(oBotLayer).style.left = '0px';
        gmobj(oBotTitle).style.left = '0px';
        iTSFading = 1;
        changingdirectionimage(direction);
        changingtopstory(iTop, iBot, 0, 100);
    }
}

function changingtopstory(iTop, iBot, iStep, iCurOpac) {
    var oTop, oBot, oTopLayer, oBotLayer, oTopTitle, oBotTitle;
    oTop = 'divTopStory' + iTop;
    oBot = 'divTopStory' + iBot;
    oTopLayer = 'divTopStoryLayer' + iTop;
    oBotLayer = 'divTopStoryLayer' + iBot;
    oTopTitle = 'divTopStoryTitle' + iTop;
    oBotTitle = 'divTopStoryTitle' + iBot;
    if (iTSFading == 1) {
        if (iStep == 0) {
            if (iCurOpac >= 0) {
                changeOpac(iCurOpac, oTopTitle);
                changeOpac(iCurOpac * 40 / 100, oTopLayer);
                iCurOpac -= 5;
                setTimeout(function() { changingtopstory(iTop, iBot, 0, iCurOpac) }, iFadeDelay);
            }
            else {
                setTimeout(function() { changingtopstory(iTop, iBot, 1, 100) }, 1000);
            }
        }
        else if (iStep == 1) {
            if (iCurOpac >= 0) {
                changeOpac(iCurOpac, oTop);
                iCurOpac -= 5;
                setTimeout(function() { changingtopstory(iTop, iBot, 1, iCurOpac) }, iFadeDelay);
            }
            else {
                iTSCur = iBot;
                gmobj(oTop).style.left = '-1000px';
                gmobj(oTopLayer).style.left = '-1000px';
                gmobj(oTopTitle).style.left = '-1000px';
                setTimeout(function() { changingtopstory(iTop, iBot, 2, 0) }, 100);
            }
        }
        else if (iStep == 2) {
            if (iCurOpac <= 100) {
                changeOpac(iCurOpac, oBotTitle);
                changeOpac(iCurOpac * 40 / 100, oBotLayer);
                iCurOpac += 5;
                setTimeout(function() { changingtopstory(iTop, iBot, 2, iCurOpac) }, iFadeDelay);
            }
            else {
                outdirectionimage();
                iTSFading = 0;
                iTSTimer = 0;
            }
        }
    }
    else if (iStep < 2 && iTSFastMove == 0) {
        gmobj(oBot).style.left = '-1000px';
        gmobj(oBotLayer).style.left = '-1000px';
        gmobj(oBotTitle).style.left = '-1000px';
        outdirectionimage();
        iTSFading = 0;
        iTSTimer = 0;
    }
}

function changingdirectionimage(direction) {
    if (direction > 0) gmobj('imgTSNext').src = "/App_Themes/Site/Images/Slide/Next.gif"
    else gmobj('imgTSPrev').src = "/App_Themes/Site/Images/TopStory/Prev.gif"
}

function outdirectionimage() {
    if (iTSNext == 0) gmobj('imgTSNext').src = "/App_Themes/Site/Images/Slide/Next2.gif"
    if (iTSPrev == 0) gmobj('imgTSPrev').src = "/App_Themes/Site/Images/Slide/Prev2.gif"
}

function topstorycounter() {
    iTSTimer++;
    if (iTSTimer > 70) {
        iTSTimer = 0;
        changetopstory(1, true);
    }
}

function cleartopstorycounter() {
    changeOpac(100, 'divTopStory' + iTSCur);
    changeOpac(40, 'divTopStoryLayer' + iTSCur);
    changeOpac(100, 'divTopStoryTitle' + iTSCur);
    iTSFading = 0;
    iTSTimer = 0;
}

function changeOpac(opacity, id) {
    gmobj(id).style.opacity = (opacity / 100);
    gmobj(id).style.MozOpacity = (opacity / 100);
    gmobj(id).style.KhtmlOpacity = (opacity / 100);
    gmobj(id).style.filter = "alpha(opacity=" + opacity + ")";
}


