// JScript File

//player state
//0 Idle
//1 starting
//2 started
//3 buffering
//4 timeinfo received
//5 playing
//6 closing
//7 closed
//8 error
var playerState = 0;
//0 Normal
//1 thumbnail request
//2 new thumbnail request
//3 sliding
//4 backward request
//5 backward scrolling
//6 forward request
//7 forward scrolling
var playStatus = 0;
var thumbpanelwidth = 670;

var initTimeBanditSettingsID = -1; //timer handle for init timebandit setting
var fadeIn = null; // fade in object
var fadeOut = null; // fade out object
var onTimerTimerhandle = -1; //timer handle for regular processing
var timeBanditMode = false; // source is form timeBandit server or from regular windows encoder
var thispos = 0; //current playing position;
var videobuffersize = 36000; // video stream buffer size
var timeBanditOffset = 0;
var refreshThumbnailBufferFlag = true; // usually, when the player starts, the thumbnail buffer has to be reloaded. But if you click on the thumbnail to start the player, no need to reload.
var errorTimerHandle = -1; // 
var offSyncFlag = false; // thumbnail cursor and play cursor are off-sync or not.
var movethumbnailtimer = -1; // timer handler for thumbnail sliding
var resizeThumbHandler = -1; // timer for resize big thumbnails
var webCallIndex = 0;
var oldHighLightThumbnail = null;
var timeIdRollupCC = -1;
var arrayCCItems = new Array();
var hideCCFlag = true;
var isMultiLanguage = false;
var ccButtonFlag = false;

var rulerIntervals = new Array();
rulerIntervals[0] = 60;
rulerIntervals[1] = 300;
rulerIntervals[2] = 900;
rulerIntervals[3] = 1800;
rulerIntervals[4] = 3600;




function PlayerInit()
{

    if (BrowserVersion == 2)
    {
        PopupMediaPlayer();
    }

    if (onTimerTimerhandle == -1 && BrowserVersion == 0)
    {
        onTimerTimerhandle = setInterval("OnTimer()", 1000);
    }
    
    if(ccLanguage == "en;fr")
        isMultiLanguage = true;
    else
        isMultiLanguage = false;
        
    SetCCFont(ccFontSize);
        
    InitPlayerLayout();
    if(BrowserVersion == 0)
    {
        ShowVolumn();
        setPlayerUrl(0);
    }
}


function PopupMediaPlayer()
{
    window.open("PopupPlayer.aspx?url=" + streamUrl,null,
    "height=100,width=200,status=yes,toolbar=no,menubar=no,location=no");
}

function InitPlayerLayout()
{
    var thumbnailrowobj;
    
    if(playerMode == 2 || BrowserVersion != 0)
    {
        thumbnailrowobj = $get("thumbnailrow");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "none";
        }
    
        if (BrowserVersion != 0)
        {
            playercontrolliveobj = $get("playercontrollive");
            if (playercontrolliveobj != null)
            {
                playercontrolliveobj.style.display = "none";
            }
        }  
    }
    else if(playerMode == 1)
    {
    
        thumbnailrowobj = $get("thumbnailpanel");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "none";
        }
        thumbnailrowobj = $get("zoombuttons");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "none";
        }
        thumbnailrowobj = $get("ctl00_ContentPlaceHolderMainView_Slider3_sliderknobdiv");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "none";
        }
        ctl00_ContentPlaceHolderMainView_Slider2Slider.reset();
        ctl00_ContentPlaceHolderMainView_Slider3Slider.reset();
    }
    else
    {
        thumbnailrowobj = $get("thumbnailpanel");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "";
        }
        thumbnailrowobj = $get("zoombuttons");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "";
        }
        thumbnailrowobj = $get("ctl00_ContentPlaceHolderMainView_Slider3_sliderknobdiv");
        if (thumbnailrowobj != null)
        {
            thumbnailrowobj.style.display = "";
        }
        ctl00_ContentPlaceHolderMainView_Slider2Slider.reset();
        ctl00_ContentPlaceHolderMainView_Slider3Slider.reset();
    }
    
    if(ccAvailable == true && (ccLanguage == "en;fr" || ccLanguage == "en" || ccLanguage == "fr"))
        ShowCCHead();
    else
        HideCCHead();
        
    ResetSliderKnob();  
}

function ShowVolumn()
{
    ctl00_ContentPlaceHolderMainView_volume_Volume.SetVolumeValue(Player.settings.volume);
     //var volumn = Math.ceil(Player.settings.volume / 12.5);
     //DrawVolum(volumn);
}

function setPlayerUrl(pos)
{
    //
    StopMoveThumbnail();
    StopMoveThumbnailForward();
    StopMoveThumbnailBackward();
    pos = Math.round(pos);
    if(pos <= 0)
    {
        Debug.write((new Date()) + ": Restart, pos=0\r\n");
        timeBanditMode = false;
        Player.URL = streamUrl;
        timeBanditOffset = 0;
    }
    else
    {
        if(pos >= videobuffersize)
            pos = videobuffersize - 1;
        Debug.write((new Date()) + ": Restart, pos=" + pos + "\r\n");
        timeBanditMode = true;
	    Player.URL = timeBanditUrl + "$StartTime=" + pos;
	}
    timeBanditEnabled = false;
    playerState = 1;
}

function OnPlayerStateChanged(NewState)
{
    Debug.write("State = " + NewState + "\r\n");
    if (NewState == 3)
    {
        if(playerState != 1)
        {
            Debug.write("Error player State = " + playerState + "\r\n");
            return;
        }
        playerState = 2;
        $get("playbutton").src = themeRoot + "images/player_pause.gif";
        Player.settings.mute = muteflg;
        if (!muteflg)
        {
            Player.settings.volume = playervolumn;
        }
        
        ClearAll();
        if(timeBanditMode == false)
        {
            thispos = 0;
            videobuffersize = thumbnailbufferduration;
            initTimeBanditSettingsID = setTimeout(InitTimeBanditSettings, 5000);
        }
   }
   else if(NewState == 1)
   {
        $get("playbutton").src = themeRoot + "images/player_play.gif";
        playerState = 7;
   }
}

function OnPlayerCommand(Type, Param)
{
  Type = Type.toUpperCase();
  if(Type=='TIMEINFO' && playerState == 2)
  {
        var results = Param.split(",");
        if(results.length != 4)
        {
            OnError();
            return;
        }
        
        var temp;
		temp = parseInt(GetValueForKeyPair(results[0]));
		if(isNaN(temp) == true)
		{
            OnError();
            return;
		}
		videobuffersize = temp;
		
		temp = parseInt(GetValueForKeyPair(results[2]));
		if(isNaN(temp) == true)
		{
		    OnError();
		    return;
		}
		if(temp >= videobuffersize)
		    temp = vidoebuffersize - 1;
		else if(temp < 0)
		    temp = 0;
		thispos = temp;
        if(initTimeBanditSettingsID != -1)
        {
            clearTimeout(initTimeBanditSettingsID);
            initTimeBanditSettingsID=-1;
        }
        initTimeBanditSettingsID = setTimeout(InitTimeBanditSettings, 1000);
		Debug.write((new Date()) + ": TIMEINFO :" + Param + "\r\n");
		playerState = 4;
	}
	else if( Type == 'TIMECODE' && (playerState == 4 || (timeBanditMode == false && playerState == 2) || playerState == 5))
	{
	    var temp = new Number(Param);
		if(isNaN(temp) == true)
		{
		    return;
		}
	    var ltime = temp;
	    ltime -= 116444736000000000;
	    ltime /= 10000;
	    
	    var curPos = new Date(ltime);
	    var x = ((new Date()) - curPos) / 1000;
	    x = Math.round(x) - thispos;
	    if(playerState != 5)
	    {
	        timeBanditOffset = x;
	        Debug.write("Get timecode " + curPos + " ");
	        Debug.write((new Date()) + ": get timeBanditOffset before starts: " + x + "\r\n");
	    }
	    else
	    {
	        if(Math.abs(x - timeBanditOffset) > 1) //if offset is greater than 1 second, reset the buffer and time settings
	        {
	            Debug.write("Get timecode " + curPos + " ");
    	        Debug.write((new Date()) + ": get timeBanditOffset after starts: " + x + "\r\n");
	            timeBanditOffset = x;
	            InitTimeBanditSettings();
	        }
	    }
	}
	else if ( Type == 'CC' )
	{
	    if(ccAvailable == false || hideCCFlag == true)
	        return;
	        
	    var cc;
	    if(isMultiLanguage == true)
	    {
	        var first = Param.substring(0, 2);
	        if(currentCCLanguage == first)
	        {
    	        cc = Param.substring(2);
	        }
	        else
	        {
	            return;
	        }
	    }
	    else
	    {
	        cc = Param;
	    }
	    if(cc == " ")
	    {
	        ClearCC();
	    }
	    else 
	    {
	        var oldHeight = divCC.offsetHeight;
	        var height = oldHeight + CreateCCItemDiv(cc);
	        divCC.style.pixelHeight = height;
	        if(height > divCCContainer.offsetHeight)
	        {
	            if(timeIdRollupCC == -1)
	            {
                    timeIdRollupCC = setInterval("OnRollupCC()", 50);
	            }
	        }
	    }
	}
	
}



function GetValueForKeyPair(keyvalue)
{
    var index = keyvalue.indexOf("=");
    return keyvalue.substring(index + 1);
}

function OnBuffering(start)
{
    if(start)
    {
        $get("labBuffering").style.display  = "";
        $get("Player").style.display = "none";
        $get("divImgPlayer").style.display = "";
    }
    else
    {
        $get("labBuffering").style.display  = "none";
        $get("Player").style.display = "";
        $get("divImgPlayer").style.display = "none";
    }

}

function InitTimeBanditSettings()
{
    
    initTimeBanditSettingsID = -1;
    playerState = 5;
    playStatus = 0;
    
    ClearAll();
    

    OnTimer();
    
	offSyncFlag = false;
	if (refreshThumbnailBufferFlag == true) //if current play position is not in thumbnail buffer then refresh thumbnails
	{
	    ClearThumbnails();
		ReloadThumbnails();
	}
	
	refreshThumbnailBufferFlag = true;
}


//get display buffer start time and duration (start time is max value in video buffer start ,thumbnail buffer start ,meeting start )
function getBufferStartTime()
{
    var videostartDate = new Date();
    videostartDate.setSeconds(videostartDate.getSeconds() - videobuffersize - timeBanditOffset);
    var thumbnailbufferstartDate = new Date();
    thumbnailbufferstartDate.setSeconds(thumbnailbufferstartDate.getSeconds() - thumbnailbufferduration - timeBanditOffset);
    var curPlayingDate = new Date();
    curPlayingDate = new Date( curPlayingDate - (thispos + timeBanditOffset) * 1000);
    
    bufferStartTime = meetingStartTime;
    if(bufferStartTime < videostartDate)
    {
        bufferStartTime = videostartDate;
    }
    if(bufferStartTime < thumbnailbufferstartDate)
    {
        bufferStartTime = thumbnailbufferstartDate;
    }
    
    if(bufferStartTime > curPlayingDate)
        bufferStartTime = curPlayingDate;
//    if ((curDate - bufferStartTime) / 1000 < 1800) //if buffer duration < half hour then set duration is half hour
//    {
//        bufferStartTime = new Date(curDate);
//        bufferStartTime.setSeconds(curDate.getSeconds() - 1800);
//    }
    var curDate = new Date();
    bufferDuration = Math.round((curDate.getTime() - bufferStartTime.getTime()) / 1000) - timeBanditOffset;
    if(bufferDuration == 0)
    {
        OnError();
    }
}


function ClearThumbnails()
{
    if(playerMode == 0)
    {
        maindiv.innerHTML = "";
        Array.clear(arrayThumbnailSpans);
    }
}


function ReloadThumbnails(offset)
{
    if(playerMode != 0)
        return;
        
    
    playStatus = 1;
    var curDate = new Date();
    if (typeof(offset) == "undefined")
    {
    	curDate.setSeconds(curDate.getSeconds() - thispos - timeBanditOffset + step * thumbnailinterval * 3);
    }
    else
    {
    	curDate.setSeconds(curDate.getSeconds() - offset - timeBanditOffset);
    }
    
    //get new thumbnails from buffer start time
    webCallIndex++;
    GetThumbnailsInfo.GetThumbnails(streamid ,bufferStartTime.toFormattedString("yyyy-MM-dd HH:mm:ss") ,curDate.toFormattedString("yyyy-MM-dd HH:mm:ss") ,thumbnailcount, step,
        GetThumbnailsDone, OnMethodError, webCallIndex);
}

function GetThumbnailsDone(result, callIndex)
{
    if(playStatus != 1 || webCallIndex != callIndex)
        return;
        
    playStatus = 0;
    ClearThumbnails();
    
    if (result.length == 0)
    {
        return;
    }
    
    var width = 0;
    for(var i = 0;i < result.length;i++)
    {
        width += CreateThumbnailSpan(result[i]);
    }
    
    var curTime = new  Date();
    maindiv.style.pixelWidth = width;

    RedrawKnobs();    
}

//creat a thumbnail span 
function CreateThumbnailSpan(timestamp)
{
    var span = document.createElement("<span class='thumbnail' id='span" + timestamp + "' onclick='onthumbnailclick(this)'></span>");
    span.innerHTML = "<img src='GetImage.aspx?streamid=" + streamid + "&timestamp=" + timestamp + "' class='thumbnailimage' onmouseenter='ShowImagePanel(this)'  onmouseout='HideImagePanel()'/>" + 
        "<span class='timestamplabel'>" + formatTimestamp(timestamp) + "</span>"
    span.timestamp = timestamp;
    maindiv.insertBefore(span);
    Array.add(arrayThumbnailSpans,span);
    return span.offsetWidth + 1;
}

function CreateThumbnailSpanBackward(timestamp)
{
    var span = document.createElement("<span class='thumbnail' id='span" + timestamp + "' onclick='onthumbnailclick(this)'></span>");
    span.innerHTML = "<img src='GetImage.aspx?streamid=" + streamid + "&timestamp=" + timestamp + "' class='thumbnailimage' onmouseenter='ShowImagePanel(this)'  onmouseout='HideImagePanel(this)'/>" + 
        "<span class='timestamplabel'>" + formatTimestamp(timestamp) + "</span>"
    span.timestamp = timestamp;
    maindiv.insertBefore(span,arrayThumbnailSpans[0]);
    arrayThumbnailSpans.unshift(span);
    return span.offsetWidth + 1;
}


function formatTimestamp(timestamp)
{
    return timestamp.substring(8,10) + ":" + timestamp.substring(10,12) + ":" + timestamp.substring(12,14);
}


function SetSilderKnobWidthPos(startTimestamp, endTimestamp)
{
    if(bufferDuration == 0)
    {
        return;
    }
    
    
    if(startTimestamp != null && endTimestamp != null)
    {
        var startTime = parseTimeStampString(startTimestamp);
        var endTime = parseTimeStampString(endTimestamp);
        var tknobpos = (startTime.getTime() - bufferStartTime.getTime()) / 10 / bufferDuration;
        if(tknobpos < 0)
            tknobpos = 0;
        else if(tknobpos > 100)
            tknobpos = 100;
        
        var showduration = 0;
        var knobwidth = 0;
        
        showduration =  (endTime.getTime() - startTime.getTime()) / 1000;
        showduration += thumbnailinterval * step;
        knobwidth = showduration  / bufferDuration;
        
        ctl00_ContentPlaceHolderMainView_Slider3Slider.setKnobWidth(knobwidth);
        ctl00_ContentPlaceHolderMainView_Slider3Slider.setKnobPostion(tknobpos);
    }


    var knobPos;
    knobPos = (bufferDuration - thispos) * 100 / bufferDuration;
    if(knobPos < 0)
        knobPos = 0;
    else if(knobPos > 100)
        knobPos = 100;
    
	ctl00_ContentPlaceHolderMainView_Slider1Slider.setKnobPostion(knobPos);
	ctl00_ContentPlaceHolderMainView_Slider2Slider.setKnobPostion(knobPos);
}

//convert yyyyMMddHHmmss to date object
function parseTimeStampString(str)
{
    var date = new Date(str.substring(0,4) * 1,str.substring(4,6) * 1 - 1 ,
        str.substring(6,8) * 1 ,str.substring(8,10) * 1 ,str.substring(10,12) * 1,
        str.substring(12,14) * 1 );
    return date;
}


function OnMethodError(para1,para2,para3,para4)
{
    if(playStatus == 1)
        playStatus = 0;
}

function OnError()
{
    if(playerState == 8)
        return;
    playerState = 8;
    errorTimerHandle = setTimeout(ErrorRestart, 5000);
}

function ClearAll()
{
    StopFading();

    if(initTimeBanditSettingsID != -1)
    {
        clearTimeout(initTimeBanditSettingsID);
        initTimeBanditSettingsID = -1;
    }
    
    if(movethumbnailtimer != -1)
    {
        clearInterval(movethumbnailtimer);
    }
    maindiv.style.pixelWidth = thumbpanelwidth;;
    maindiv.style.pixelLeft = 0;
    
    if (resizeThumbHandler != -1)
    {
        clearInterval(resizeThumbHandler);
        resizeThumbHandler = -1;
    }
    HideImagePanel();
    
    ClearCC();
    
}

function ErrorRestart()
{
    errorTimerHandle = -1;
    
    ClearThumbnails();
    ClearAll();
    Player.controls.stop();
    playerState = 1;
    Player.controls.play();
}

function OnTimer()
{
    if(playerState != 5)
        return;
    

    
    if(playerMode != 2)
    {
        getBufferStartTime();
    }
    
    RedrawKnobs();
    showCurrentPlayTime();
    var curDate = new Date();
    if ((curDate.getSeconds() % 30 == 0 ) && videobuffersize > 0 && playerMode != 2)
    {
        DrawRuler();    
    }
    
    if(offSyncFlag == false && NeedToRefresh() == true && playerMode == 0 && curDate.getSeconds() % 3 == 0)
    {
        RenewThumbnails();
    }
}

function RedrawKnobs()
{
    if(playerMode  == 0)
    {
        IsInThumbnailBuffer();
        HighLightCurrentThumbnail();
    }

    if (!ctl00_ContentPlaceHolderMainView_Slider1Slider.IsDragging
        && !ctl00_ContentPlaceHolderMainView_Slider2Slider.IsDragging
        && !ctl00_ContentPlaceHolderMainView_Slider3Slider.IsDragging && playStatus == 0)
    {
        if(arrayThumbnailSpans.length >= 1)
        {
            SetSilderKnobWidthPos(arrayThumbnailSpans[0].timestamp, arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp);
        }
        else
        {
            SetSilderKnobWidthPos(null, null);
        }

    }
}

function HighLightCurrentThumbnail()
{
    if(offSyncFlag == true)
        return;
        
    var endDate = new Date();
	endDate.setSeconds(endDate.getSeconds() - thispos - timeBanditOffset);
	var highligtspan = null;
    for(var i = arrayThumbnailSpans.length - 1;i >= 0;i--)
    {
        if(parseTimeStampString(arrayThumbnailSpans[i].timestamp) <=  endDate)
        {
            highligtspan = arrayThumbnailSpans[i];
            break;
        }
    }	
    if (highligtspan != oldHighLightThumbnail && oldHighLightThumbnail != null)
    {
        oldHighLightThumbnail.style.backgroundColor = "";
        oldHighLightThumbnail.className = "thumbnail";
    }
    oldHighLightThumbnail = null;
    
    if(highligtspan != null)
    {
        highligtspan.className = "highlightthumbnail";
        oldHighLightThumbnail = highligtspan;
    }
   
}

function IsInThumbnailBuffer()
{
    if(offSyncFlag == true && playStatus == 0)
    {
        var curDate = new Date();
	    curDate.setSeconds(curDate.getSeconds() - thispos - timeBanditOffset);
	    var startDate, endDate;
	    if(arrayThumbnailSpans.length == 0)
	        return;
	    startDate = parseTimeStampString(arrayThumbnailSpans[0].timestamp);
	    endDate = parseTimeStampString(arrayThumbnailSpans[arrayThumbnailSpans.length  - 1].timestamp);
	    endDate.setSeconds(endDate.getSeconds() + step * (thumbnailinterval + 2));
	    if(curDate >= startDate && curDate < endDate)
	        offSyncFlag = false;
	}

}

function showCurrentPlayTime()
{
	if (!isNaN(thispos))
	{
        var curDate = new Date();
	    curDate.setSeconds(curDate.getSeconds() - thispos - timeBanditOffset);
        var divCurrentTime = $get('CurPlayerTime');
        divCurrentTime.innerHTML = curDate.toFormattedString("HH:mm:ss");
    }
}


function DrawRuler()
{
	var parentdiv = $get("divRuler");
	parentdiv.innerHTML = "";
	var rulerwidth = parentdiv.offsetWidth;
	var interval = 60 * 5;
	for(var i = 0;i < rulerIntervals.length;i++)
	{ 
	    interval = rulerIntervals[i];
	    if (bufferDuration / interval < 20)
	    {
	        break;
	    }
	}
	var posInterval = interval * rulerwidth / bufferDuration;
	var timeoffset = interval - (bufferStartTime.getMinutes() * 60 + bufferStartTime.getSeconds()) % interval;
	i = 0;
	while(true)
	{
	    var rulertime = timeoffset + interval * i;
	    var leftpos = rulertime * rulerwidth / bufferDuration;
		if (leftpos > rulerwidth)
		{
		    break;
		}
		var oImg=document.createElement("IMG");
		oImg.src = themeRoot + "images/tick.jpg";
		oImg.style.top = 0;
		oImg.style.left = leftpos;
		oImg.style.position = "absolute" ;
		oImg.style.zIndex = -10;
		oImg.height = 15;
		oImg.width = 2; 
		parentdiv.appendChild(oImg);
		if (i % 3 == 0)
		{
    		var span=document.createElement("SPAN");
	        var labelTime = new Date(bufferStartTime);
	        labelTime.setSeconds(bufferStartTime.getSeconds() + rulertime);
    		
		    span.style.top = 17;
		    span.style.position = "absolute" ;
		    span.style.zIndex = -10;
		    span.innerHTML = labelTime.format("HH:mm:ss");
    		parentdiv.appendChild(span);
		    span.style.left = leftpos - span.offsetWidth / 2;
        }
		i++;
	}
}

function NeedToRefresh()
{
    if(arrayThumbnailSpans.length == 0)
        return false;
        
    var playDate = new Date();
	playDate.setSeconds(playDate.getSeconds() - thispos - timeBanditOffset);
	
	var endDate = parseTimeStampString(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp);
	var off1 = (playDate - endDate) / 1000;
	var curDate = new Date();
	curDate.setSeconds(curDate.getSeconds() - timeBanditOffset);
	var off2 = (curDate - endDate) / 1000;
	
	if(off1 >= step * thumbnailinterval * -2 && off2 >= step * thumbnailinterval )
	{
	    return true;
	}
	else
	    return false;

}

function RenewThumbnails()
{
    if(playerMode != 0)
        return;

    if(playStatus != 0)
        return;        
    playStatus = 2;
    var curDate = new Date();
   	curDate.setSeconds(curDate.getSeconds() - thispos - timeBanditOffset + step * thumbnailinterval * 3);
    //get new thumbnails from last thumbnail timestamp
    webCallIndex++;
    GetThumbnailsInfo.GetNewThumbnails(streamid ,arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp,
        curDate.toFormattedString("yyyy-MM-dd HH:mm:ss") , 1, step,  GetNewThumbnailsDone, OnMethodError, webCallIndex);
}

function GetNewThumbnailsDone(result, callIndex)
{
    if(playStatus != 2 || callIndex != webCallIndex)
        return;
        
    playStatus = 0;
    
    if (result.length == 0)
    {
        return;
    }
    
    var width = maindiv.style.pixelWidth;
    var oldwidth = maindiv.style.pixelWidth;
    for(var i = 0;i < result.length;i++)
    {
        if(arrayThumbnailSpans.length > 0)
        {
            if(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp < result[i])
                width += CreateThumbnailSpan(result[i]);
        }
    }
    
    if(width == oldwidth)
        return;

    maindiv.style.pixelWidth = width;;
    HighLightCurrentThumbnail();
    if(arrayThumbnailSpans.length > thumbnailcount)
    {
        playStatus = 3;
        if(movethumbnailtimer != -1)
        {
            clearInterval(movethumbnailtimer);
        }
        movethumbnailtimer = setInterval("OnMoveThumbnail()",100);
        if(result.length > 0)
        {
            fadeIn = new Fade();
            fadeOut = new Fade();
            fadeIn.start(arrayThumbnailSpans[0].id, 10, (width - oldwidth) * 50, 100, 0);
            fadeOut.start(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].id, 10, (width - oldwidth) * 50, 0, 100);
            //OpacityFat.fade_element(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].id, 10, (width - oldwidth) * 50, 0, 100 );
            //OpacityFat.fade_element(arrayThumbnailSpans[0].id, 10, (width - oldwidth) * 50,100, 0, CheckNeedCanclFadeOut);
        }
    }
}


function OnMoveThumbnail()
{
    maindiv.style.pixelLeft -= 2;
    if((maindiv.offsetLeft +maindiv.offsetWidth) < (divthumbnails.offsetWidth))
    {
        StopMoveThumbnail();
    }
}

function StopMoveThumbnail()
{
    if(playStatus == 3)
    {
        var width = maindiv.style.pixelWidth;
        var oldarrayLength = arrayThumbnailSpans.length;
        for(var i = 0;i < oldarrayLength - thumbnailcount;i++)
        {
            if(arrayThumbnailSpans.length > 0)
            {
                width -= arrayThumbnailSpans[0].offsetWidth + 1;
                maindiv.removeChild(arrayThumbnailSpans[0]);
                Array.removeAt(arrayThumbnailSpans ,0);
            }
        }
        if (width < thumbpanelwidth)
        {
            width = thumbpanelwidth;
        }
        maindiv.style.pixelWidth = width;
        maindiv.style.pixelLeft = 0;
        clearInterval(movethumbnailtimer);
        movethumbnailtimer = -1;
        playStatus = 0;
        StopFading();
    }
}

function StopFading()
{
    if(fadeIn != null && fadeIn.started == true)
    {
        fadeIn.stop(100);
        fadeIn = null;
    }
    if(fadeOut != null && fadeOut.started == true)
    {
        fadeOut.stop(0);
        fadeOut = null;
    }
    
}

function ShowImagePanel(imageobj)
{
    var left = GetOffsetLeft(imageobj);
    var top = GetOffsetTop(imageobj);
    var obj = document.getElementById("ImagePanel");
    if (obj != null)
    {
        document.getElementById("bigThumbnail").src = imageobj.src;
        obj.style.pixelLeft = left;
        obj.style.pixelTop = top - 20;
        if (obj.style.display == "none")
        {
            obj.style.display = "";
            if (resizeThumbHandler == -1)
            {
                resizeThumbHandler = setInterval("resizeThumbPanel()", 15);
            }
        }
    }
}

function resizeThumbPanel()
{
    var obj = document.getElementById("ImagePanel");
    if (obj != null)
    {
        if (obj.style.pixelWidth < 120)
        {
            obj.style.pixelWidth = obj.style.pixelWidth + 12;
            obj.style.pixelHeight = obj.style.pixelHeight + 9;
        }
        else
        {
            clearInterval(resizeThumbHandler);
            resizeThumbHandler = -1;
        }
    }    
}

function HideImagePanel()
{
    var obj = document.getElementById("ImagePanel");
    if (obj != null)
    {
        obj.style.display = "none";
        obj.style.pixelWidth = 20;
        obj.style.pixelHeight = 15;
    }
}

function timebarsliderdragging(slidervalue ,position) 
{
	var pos =Math.round(bufferDuration-bufferDuration * slidervalue / 100);
    var divCurrentTime = $get('divCurrentTime');
    var curDate = new Date();
	curDate.setSeconds(curDate.getSeconds() - pos - timeBanditOffset);
    divCurrentTime.innerHTML = curDate.toFormattedString("HH:mm:ss");
    divCurrentTime.style.posLeft =  position - 13;
    divCurrentTime.style.display = "inline";
    var sliderBody = $get("sliderBody");
    if(sliderBody != null)
    {
        sliderBody.style.pixelLeft = position - 16;
        sliderBody.style.display = "inline";
    }
}

function timebarsliderdropped(slidervalue, position) {
    var divCurrentTime = $get('divCurrentTime');
    divCurrentTime.style.display = "none";
    var sliderBody = $get("sliderBody");
    if(sliderBody != null)
    {
        sliderBody.style.display = "none";
    }
    
	var pos =Math.round(bufferDuration-bufferDuration * slidervalue / 100);
	setPlayerUrl(pos);
}    


function timebarslider1dragging(slidervalue ,position) {
	var temppos=Math.round(bufferDuration-bufferDuration * slidervalue / 100);
    var divCurrentTime = $get('divCurrentTime1');
    var curDate = new Date();
	curDate.setSeconds(curDate.getSeconds() - temppos - timeBanditOffset);
    divCurrentTime.innerHTML = curDate.toFormattedString("HH:mm:ss");
    divCurrentTime.style.posTop = 20;
    divCurrentTime.style.posLeft =  position - 30;
    divCurrentTime.style.display = "inline";
}

function timebarslider1dropped(slidervalue) {
    var divCurrentTime = $get('divCurrentTime1');
    divCurrentTime.style.display = "none";
	var pos=Math.round(bufferDuration-bufferDuration * slidervalue / 100);
    setPlayerUrl(pos);
}    


function thumbnailsilderdragging(slidervalue ,position) 
{
	var pos =Math.round(bufferDuration-bufferDuration * slidervalue / 100);
    var divCurrentTime = $get('divCurrentTime1');
    var curDate = new Date();
	curDate.setSeconds(curDate.getSeconds() - pos - timeBanditOffset);
    divCurrentTime.innerHTML = curDate.toFormattedString("HH:mm:ss");
    divCurrentTime.style.posTop = 30;
    divCurrentTime.style.posLeft =  position - 25;
    divCurrentTime.style.display = "inline";
}



function thumbnailsilderdropped(slidervalue) 
{
    var divCurrentTime = $get('divCurrentTime1');
    divCurrentTime.style.display = "none";
    
    offSyncFlag = true;
    
	var pos = bufferDuration-bufferDuration * slidervalue / 100;
    var rightpos = pos;
    if(arrayThumbnailSpans.length >= 1)
    {
       	var endDate = parseTimeStampString(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp);
       	var startDate = parseTimeStampString(arrayThumbnailSpans[0].timestamp);
        rightpos -= (endDate - startDate) / 1000;
    }

    if(rightpos < 0)
        rightpos = 0;
        
    StopMoveThumbnail();
    StopMoveThumbnailForward();
    StopMoveThumbnailBackward();
    
	ReloadThumbnails(Math.round(rightpos));
}    

function StopPlayer()
{
    if(Player.playState != 1)
    {
        playerState = 6;
        StopMoveThumbnail();
        StopMoveThumbnailForward();
        StopMoveThumbnailBackward();
        ClearAll();
        Player.controls.stop();
        pausedTime= new Date();
        $get("playbutton").src = themeRoot + "images/player_play.gif";
    }
    else
    {
        var curTime = new Date();
        var pos = thispos;
        if (pausedTime != null)
        {
            var offsetSeconds = (curTime.getTime() - pausedTime.getTime()) / 1000;
            pos = thispos +  offsetSeconds;
            pausedTime = null;
        }
        setPlayerUrl(pos);
        refreshThumbnailBufferFlag = false;
        $get("playbutton").src = themeRoot + "images/player_pause.gif";
    }
}

function MutePlayer()
{
    Player.settings.mute = !Player.settings.mute;
    muteflg = Player.settings.mute;
    if (Player.settings.mute)
    {
        $get("mutebutton").src = themeRoot + "images/player_mute_on.gif";
    }
    else
    {
        $get("mutebutton").src = themeRoot + "images/player_mute_off.gif";
    }
    
}

function PopupWindowMediaPlayer()
{
    window.open(streamUrl);
}

function PlayerClose()
{
    if (BrowserVersion != 0)
        return;

    Player.controls.stop();
    ClearAll();
    if (onTimerTimerhandle != -1)
    {
        clearInterval(onTimerTimerhandle);
        onTimerTimerhandle = -1;
    }
    
}
function OnVolumeChanged(value)
{
    var mute = Player.settings.mute;
    Player.settings.volume = value;
    Player.settings.mute = mute;
}

function thumbnailsliderclick(slidervalue)
{
    var divCurrentTime = $get('divCurrentTime1');
    divCurrentTime.style.display = "none";
	var pos=Math.round(bufferDuration-bufferDuration * slidervalue / 100);
    setPlayerUrl(pos);
	ctl00_ContentPlaceHolderMainView_Slider2Slider.setKnobPostion(slidervalue);
	ctl00_ContentPlaceHolderMainView_Slider3Slider.setKnobPostion(slidervalue);
}

function ChangeStreamUrl()
{
    var lstLanguage = $get(lstLanguageId);
    if(lstLanguage.selectedIndex != -1)
    {
        var item = lstLanguage.options[lstLanguage.selectedIndex];
        var valueArray = item.value.split("#");
        var newStreamId = valueArray[0];
        
        if(streamid != newStreamId)
        {
            streamid = newStreamId;
            streamUrl = valueArray[2];
            timeBanditUrl = valueArray[1];
            var formatAudioOnly = valueArray[3];
            if(playerMode != 2)
            {
                if(formatAudioOnly == "True")
                {
                    playerMode = 1;
                }
                else
                {
                    playerMode = 0;
                }
            }
            
            ccLanguage = valueArray[4];
            if(ccLanguage == "en;fr")
                isMultiLanguage = true;
            else
                isMultiLanguage = false;
            
            InitPlayerLayout();
            maindiv.innerHTML = "";
            Array.clear(arrayThumbnailSpans);
            setPlayerUrl(thispos);
        }
    }
}

function onthumbnailclick(thumbnailspan)
{
    try
    {
        var timestamp = thumbnailspan.timestamp;
        var date = parseTimeStampString(timestamp);
        var curDate = new Date();
        var pos = Math.round((curDate.getTime() - date.getTime()) / 1000);
        pos -= timeBanditOffset;
        refreshThumbnailBufferFlag = false;
        setPlayerUrl(pos);
    }
    catch(e)
    {
    }        
}


function zoomin()
{
    SetZoomLevel(zoomlevel + 1)
}

function zoomout()
{
    if (zoomlevel <= 1)
    {
        return;
    }

    SetZoomLevel(zoomlevel - 1)
}

function SetZoomLevel(level)
{
    //caculate new zoomlevel and step
    if(level == zoomlevel)
    {
        return;
    }
    var newstep = Math.pow(2,level - 1);
    if (bufferDuration / thumbnailcount < newstep * thumbnailinterval) 
    {
        return;
    }
    zoomlevel = level;
    step = newstep;
    var pos = Math.round(bufferDuration - bufferDuration * ctl00_ContentPlaceHolderMainView_Slider3Slider.Value / 100) - (step * thumbnailcount ) * thumbnailinterval;
    if(pos < 0)
        pos = 0;
    
    offSyncFlag = true;        
    ClearThumbnails();
    ClearAll();
    ReloadThumbnails(pos);
}


//

function GetNextBuffer(forward)
{
    if(arrayThumbnailSpans.length == 0)
        return;

    StopMoveThumbnail();
    StopMoveThumbnailForward();
    StopMoveThumbnailBackward();
    var pos;        
    if (forward)
    {
        var curTime = new Date();
        var bufferendTime = parseTimeStampString(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp);
        pos = Math.round((curTime - bufferendTime) / 1000 - timeBanditOffset);
        if (pos < thumbnailinterval * step)
        {
            return;
        }
        pos = pos - (thumbnailcount * step * thumbnailinterval + 5);
    }
    else
    {
        var curTime = new Date();
        var bufferendTime = Date.parseLocale(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp, "yyyyMMddHHmmss");
        pos = Math.round((curTime - bufferendTime) / 1000 - timeBanditOffset);
        if (pos > bufferDuration - thumbnailinterval * step)
        {
            return;
        }
        pos = pos + (thumbnailcount * step * thumbnailinterval + 5);
    }
    if (pos < 0)
        pos = 0;
    else if(pos > bufferDuration)
        pos = bufferDuration;

    offSyncFlag = true;        
    GetThumbnailsForNextBuffer(pos, forward);
}

function GetThumbnailsForNextBuffer(pos, forwardflg)
{
    if(playerMode != 0)
        return;
        
    
    if(forwardflg == true)
        playStatus = 6;
    else 
        playStatus = 4;
    
    var curDate = new Date();
	curDate.setSeconds(curDate.getSeconds() - pos - timeBanditOffset);
    webCallIndex++;
    GetThumbnailsInfo.GetThumbnails(streamid ,bufferStartTime.toFormattedString("yyyy-MM-dd HH:mm:ss") ,curDate.toFormattedString("yyyy-MM-dd HH:mm:ss") ,thumbnailcount, step,
        GetThumbnailsForNextBufferDone, OnMethodError, webCallIndex);
}

function GetThumbnailsForNextBufferDone(result, callIndex)
{
    if((playStatus != 4 && playStatus != 6) || webCallIndex != callIndex)
        return;
    
    if(result.length == 0)
    {
        playStatus = 0;
        return;
    }

    if (playStatus == 6)
    {
        playStatus = 7;
        
        var width = maindiv.style.pixelWidth;
        var thumbEndTime = parseTimeStampString(arrayThumbnailSpans[arrayThumbnailSpans.length - 1].timestamp);
        for(var i = 0;i < result.length;i++)
        {
            if (parseTimeStampString(result[i]) > thumbEndTime)
            {
                width += CreateThumbnailSpan(result[i]);
            }
        }
        maindiv.style.pixelWidth = width;;
        if(movethumbnailtimer != -1)
        {
            clearInterval(movethumbnailtimer);
        }
        movethumbnailtimer = setInterval("OnMoveThumbnailForward()",100);
    }
    else
    {
        playStatus = 5;
        var width = maindiv.style.pixelWidth;
        var thumbStartTime = parseTimeStampString(arrayThumbnailSpans[0].timestamp);
        for(var i = result.length - 1;i >= 0;i--)
        {
            if (parseTimeStampString(result[i]) < thumbStartTime)
            {
                width += CreateThumbnailSpanBackward(result[i]);
            }
        }
        maindiv.style.pixelWidth = width;;
        maindiv.style.pixelLeft = (divthumbnails.offsetWidth - maindiv.offsetWidth);
        if(movethumbnailtimer != -1)
        {
            clearInterval(movethumbnailtimer);
        }
        movethumbnailtimer = setInterval("OnMoveThumbnailBackward()",100);
    }
}

function OnMoveThumbnailForward()
{
    maindiv.style.pixelLeft -= 100;
    //SetSilderKnobWidthPos();
    if((maindiv.offsetLeft +maindiv.offsetWidth) < (divthumbnails.offsetWidth))
    {
        StopMoveThumbnailForward();
        RedrawKnobs();
    }
}

function StopMoveThumbnailForward()
{
    if(playStatus == 7)
    {
        var width = maindiv.style.pixelWidth;
        var oldarrayLength = arrayThumbnailSpans.length;
        for(var i = 0;i < oldarrayLength - thumbnailcount;i++)
        {
            if(arrayThumbnailSpans.length > 0)
            {
                width -= arrayThumbnailSpans[0].offsetWidth + 1;
                maindiv.removeChild(arrayThumbnailSpans[0]);
                Array.removeAt(arrayThumbnailSpans ,0);
            }
        }
        if (width < thumbpanelwidth)
        {
            width = thumbpanelwidth;
        }
        maindiv.style.pixelWidth = width;;
        maindiv.style.pixelLeft = 0;
        clearInterval(movethumbnailtimer);
        movethumbnailtimer = -1;
        playStatus = 0;
    }
}

function OnMoveThumbnailBackward()
{
     maindiv.style.pixelLeft += 100;
    //SetSilderKnobWidthPos();
    if(maindiv.offsetLeft > -100)
    {
        StopMoveThumbnailBackward();
        RedrawKnobs();
    }
}


function StopMoveThumbnailBackward()
{
    if(playStatus == 5)
    {
        var width = maindiv.style.pixelWidth;
        var oldarrayLength = arrayThumbnailSpans.length;
        for(var i = oldarrayLength;i > thumbnailcount;i--)
        {
            if(arrayThumbnailSpans.length >= thumbnailcount)
            {
                width -= arrayThumbnailSpans[thumbnailcount].offsetWidth + 1;
                maindiv.removeChild(arrayThumbnailSpans[thumbnailcount]);
                Array.removeAt(arrayThumbnailSpans ,thumbnailcount);
            }
        }
        if (width < thumbpanelwidth)
        {
            width = thumbpanelwidth;
        }
        maindiv.style.pixelWidth = width;;
        maindiv.style.pixelLeft = 0;
        clearInterval(movethumbnailtimer);
        movethumbnailtimer = -1;
        playStatus = 0;
    }
}




function OnRollupCC()
{
    divCC.style.pixelTop -= 4;
    if((divCC.offsetTop + divCC.offsetHeight) < (divCCContainer.offsetHeight))
    {
        StopRollupCC();
    }
}

function StopRollupCC()
{
    var height = divCC.style.pixelHeight;
    var oldarrayLength = arrayCCItems.length;
    for(var i = 0;i < oldarrayLength - 3;i++)
    {
        if(arrayCCItems.length > 0)
        {
            height -= arrayCCItems[0].offsetHeight;
            divCC.removeChild(arrayCCItems[0]);
            Array.removeAt(arrayCCItems, 0);
        }
    }
    
    if(height > divCCContainer.offsetHeight)
        height = divCCContainer.offsetHeight;
    divCC.style.pixelHeight = height;
    divCC.style.pixelTop = 0;
    
    clearInterval(timeIdRollupCC);
    timeIdRollupCC = -1;
}



function CreateCCItemDiv(cc)
{
    var div = document.createElement("<div class='ccItem'></div>");
    div.innerHTML = cc;
    div.cc = cc;
    divCC.insertBefore(div);
    Array.add(arrayCCItems,div);
    return div.offsetHeight;
}

function ClearCC()
{
    divCC.innerHTML = "";
    divCC.style.pixelHeight = 0;
    Array.clear(arrayCCItems);
   
}

function HideCCPanel()
{
    ClearCC();
    divCCContainer.style.display = "none";
    ResetSliderKnob();
    hideCCFlag = true;
    
}

function ShowCCPanel()
{
    divCCContainer.style.display = "block";
    ResetSliderKnob();
    hideCCFlag = false;
}

function ShowCCHead()
{
    $get("ccbutton").style.display="block";
}

function HideCCHead()
{
    $get("ccbutton").style.display="none";
    ccLangPanel.style.display = "none";
    divCCContainer.style.display = "none";
    ResetSliderKnob();
}

function DisplayCCLangPanel()
{
    if(ccButtonFlag == true)
    {
        ccButtonFlag = false;
        return;
    }
    
    if(ccLangPanel.style.display == "none")
    {
        ccLangPanel.style.display = "block";
        if(hideCCFlag == true)
        {
            $get("rdCCNone").checked = true;
        }
        else
        {
            if(currentCCLanguage == pageLanguage)
            {
                $get("rdCCLang1").checked = true;
            }
            else
            {
                $get("rdCCLang2").checked = true;
            }
        }
        
        if(isMultiLanguage == true)
        {
            $get("rdCCLang1").disabled = false;
            $get("rdCCLang2").disabled = false;
        }
        else
        {
            if(ccLanguage == pageLanguage)
            {
                $get("rdCCLang1").disabled = false;
                $get("rdCCLang2").disabled = true;
            }
            else
            {
                $get("rdCCLang1").disabled = true;
                $get("rdCCLang2").disabled = false;
            }
        }
        
        ccLangPanel.focus();
    }
    else
    {
        ccLangPanel.style.display = "none";
    }
}

function SelectCCLang(value)
{
    if(value == 0)
    {
        //none
        HideCCPanel();
    }
    else
    {
        if(value == 1)
        {
            currentCCLanguage = pageLanguage;
        }
        else
        {
            if(pageLanguage == "en")
                currentCCLanguage = "fr";
            else
                currentCCLanguage = "en";
        }
        ShowCCPanel();
    }
    HideCCLangPanel();
    ClearCC();
}

function HideCCLangPanel()
{
    ccLangPanel.style.display = "none";
}



function SetCCFont(fontSize)
{
    divCC.style.fontSize = fontSize;
}

function IsChild(parent, child)
{

    return parent.contains(child);
        
}

function CCLang_OnBlur()
{
    if(IsChild(event.srcElement, document.activeElement) == false)
    {
        HideCCLangPanel();   
    }
}


function onCCButtonMouseDown()
{
    if(ccLangPanel.style.display != "none")
    {
        ccButtonFlag = true;
    }
}

function ResetSliderKnob()
{
    ctl00_ContentPlaceHolderMainView_Slider1Slider.reset();
    ctl00_ContentPlaceHolderMainView_Slider2Slider.reset();
    ctl00_ContentPlaceHolderMainView_Slider3Slider.reset();
}