function DoAjax(url, callback)
	{
	 if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
			req.onreadystatechange = callback;
			req.open("GET", url, true);
			req.send(null);
		// branch for IE/Windows ActiveX version
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
			if (req) {
				req.onreadystatechange = callback;
			// document.getElementById('status').innerHTML = url
				req.open("GET", url, true);
				req.send();
			}
		}		
	}
	function DoPostAjax(url, data, callback)
	{
	 if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
			req.onreadystatechange = callback;
			req.open("POST", url, true);
			req.send(data);
		// branch for IE/Windows ActiveX version
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
			if (req) {
				req.onreadystatechange = callback;
			// document.getElementById('status').innerHTML = url
				req.open("GET", url, true);
				req.send(data);
			}
		}		
	}
	function IsAjaxResponseValid()
	{
		if (req.readyState != 4) return false;
		if (req.status != 200) return false;
    	if (req.responseText == "") return false;
	    return true;
	}
	
	function GetSegments()
	{
		if (document.getElementById('divSeg') == null)
		    document.getElementById('divInfo').innerHTML  += "<div id=divSeg></div>"
    	document.getElementById('divSeg').innerHTML  =  GetSegmentTabsHTML()
		TabClick('tab11','Segments',2)
		var url = "api.aspx?cmd=GetSegments&arg1=" + gMediaID
		DoAjax(url, GetSegmentsCB)
	}
	
	function GetPlayLists()
	{
		if (document.getElementById('divSeg') == null)
		    document.getElementById('divInfo').innerHTML  += "<div style='width: 500px' id=divSeg></div>"
    	document.getElementById('divSeg').innerHTML  =  GetSegmentTabsHTML() + GetAddNewPlayListButtonHTML()
        plSegIndexArr.length = 0;
		TabClick('tab12','PlayLists',2)
		var url = "api.aspx?cmd=GetPlayLists&arg1=" + gMediaID
		DoAjax(url, GetPlayListsCB)
	}
	
	
	var gSegCmd=""
	var gSegUrl=""
	var gSegArr=null
	function GetSegmentsCB()
	{
        if (!IsAjaxResponseValid()) return
		var strHTML = ""
		var segmentsArr = req.responseText.split("<br>");
		//alert(segmentsArr.length)
		if (segmentsArr.length == 1) return
		
		var playUrl = "", thumbUrl = "", title=""
		ShowSegmentsTab(segmentsArr)
		gSegArr = segmentsArr
	}
	function GetPlayListsCB()
	{
        if (!IsAjaxResponseValid()) return
		var strHTML = ""
		segmentsArr = req.responseText.split("<br>");
		//alert(segmentsArr.length)
		if (segmentsArr.length == 1) return
		
		var playUrl = "", thumbUrl = "", title=""
		ShowPlayListsTab()
	}
	function GetSegmentTabsHTML()
	{
		var strHTML = ""
		strHTML += '<table id=tblTabs  style="border-collapse: collapse" border=0 cellpadding=0 cellspacing=3>'
		strHTML += ' <TR id="trTabs" class="sub" align="center" bgColor="powderblue" height="18">'
        strHTML += '  <TD   id="tab11" onmouseover="TabOver(this)" onclick="TabClick(\'tab11\',\'Segments\',2)" onmouseout="TabOut(this)" ><A href="#" onclick="javascript:TabClick(\'tab11\',\'Segments\',2); GetSegments()"><FONT class="tabLink"><font size=2>&nbsp;Segments&nbsp;</font></FONT></A></TD>'
		strHTML += '  <TD bgColor="lightGrey"><IMG height="2" src="img/spacer.gif" width="1"></TD>'
        strHTML += '  <TD bgColor="darkgrey"><IMG height="2" src="img/spacer.gif" width="1"></TD>'
		strHTML += '  <TD   id="tab12" onmouseover="TabOver(this)" onclick="TabClick(\'tab12\',\'PlayLists\',2)" onmouseout="TabOut(this)"><A href="#" onclick="javascript:TabClick(\'tab12\',\'PlayLists\',2); GetPlayLists();"><FONT class="tabLink"><font size=2>&nbsp;PlayLists&nbsp;</font></FONT></A></TD>'
        strHTML += '  <TD bgColor="lightGrey"><IMG height="2" src="img/spacer.gif" width="1"></TD>'
        strHTML += '  <TD bgColor="darkgrey"><IMG height="2" src="img/spacer.gif" width="1"></TD>'
        strHTML += ' </TR>'
        strHTML += '</table>'
	    return strHTML;
	}	
    function ShowSegmentsTab(segmentsArr)
    {		
		var strHTML = "<br>&nbsp;&nbsp;&nbsp;<input type=button id='btnNewSegment' class=button style='width:120px' value='Create New Segment' onclick='NewSegment()'> <br><br>" 
		strHTML += "<table>"
		for (var i=0; i<segmentsArr.length-1; i++)
		{
		    var itemArr = segmentsArr[i].split("^")
		    if (itemArr.length == 0) continue
		    if (gSegCmd == "EDIT" && gSegUrl == itemArr[1])
		    {
	            strHTML += "<tr>"
	            strHTML += "<td><a target='_new' href='" + itemArr[1] + "'><img id='imgSegThumb" + i.toString() + "' width=160 height=120 title='" + itemArr[0] + "' src='" + itemArr[2].replace("thumbs/","") + "' </a></td>"
		        strHTML += "<td><font size=2>Title:&nbsp;<b>" + "<input type=text id=txtSegTitle value='" + itemArr[0] + "'> </b><br>"
		        strHTML += "Play URL:&nbsp;<b>" + itemArr[1] + "</b><br>"
		        strHTML += "ThumbURL:&nbsp;<b>" + itemArr[2] + "</b><br>"
		        strHTML += "Clip Begin:&nbsp;<b>" + "<input type=text id=txtSegBegin value='" + itemArr[3] + "'> </b><br>"
		        strHTML += "Clip End:&nbsp;<b>" + "<input type=text id=txtSegEnd value='" + itemArr[4] + "'> </b><br>"
		        strHTML += "Artist/Presenter:&nbsp;<b>" + "<input type=text id=txtSegArtist value='" + itemArr[5] + "'> </b><br>"
		        strHTML += "Other Info:&nbsp;<b>" + "<input type=text id=txtSegInfo value='" + itemArr[6] + "'> </b><br></font></td></tr>"
		        strHTML += "<tr><td colspan=2><input type=button class=button id=btnSegApply value='Apply' onclick='EditSegmentSubmit(\"" + itemArr[7] + "\")'>&nbsp;"
		        strHTML += "<input type=button class=button id=btnSegCancelEdit value='Cancel' onclick='CancelSeg()'>&nbsp;"
		        strHTML += "<tr><td colspan=3 width='100%'><hr></td></tr>"
		    }
		    else
		    {
		        var playUrl = itemArr[1] 
	            strHTML += "<tr>"
	            strHTML += "<td><a target='_new' href='" + itemArr[1] + "'><img id='imgSegThumb" + i.toString() + "' width=160 height=120 title='" + itemArr[0] + "' src='img/spacer.gif'></a>"
		        strHTML += "<img style='display:none' onerror='SegThumbError(this)' onload='loadSegThumb(this)' id='imgSegThumbPreload" + i.toString() + "' src='" + itemArr[2].replace("thumbs/","") + "?" + GetTimeID() +  "' </td>"
		        strHTML += "<td><font size=2>Title:&nbsp;<b>" + itemArr[0] + "</b><br>"
		        strHTML += "Play URL:&nbsp;<b>" + playUrl + "</b><br>"
		        strHTML += "ThumbURL:&nbsp;<b>" + itemArr[2] + "</b><br>"
		        strHTML += "Clip Begin:&nbsp;<b>" + itemArr[3] + "</b><br>"
		        strHTML += "Clip End:&nbsp;<b>" + itemArr[4] + "</b><br>"
		        strHTML += "Artist/Presenter:&nbsp;<b>" + itemArr[5] + "</b><br>"
		        strHTML += "Other Info:&nbsp;<b>" + itemArr[6] + "</b><br></font></td></tr>"
		        strHTML += "<tr><td colspan=2><input type=button class=button id=btnSegEdit value='Edit' onclick='EditSegment(\"" + playUrl + "\")' >&nbsp;"
		        strHTML += "<input type=button class=button id=btnSegDel value='Delete' onclick='DeleteSegment(\"" + itemArr[7] + "\")' >&nbsp;"
		        strHTML += "<tr><td colspan=3 width='100%'><hr></td></tr>"
		    }
		}
		
		document.getElementById('divSeg').innerHTML  +=  strHTML

		//alert(strHTML)
	}
 
    function ShowPlayListsTab()
    {		
		var strHTML = GetPlayListsHTML()
		document.getElementById('divSeg').innerHTML  +=  strHTML
    }
    
    function GetAddNewPlayListButtonHTML()
    {
        var strHTML = "<br><div id='divPlaylist' style='position:relative;left:10;'>"
		strHTML += '&nbsp;&nbsp;&nbsp;<input type=button value="Create New PlayList" onclick="OnNewPlayList()"'
		strHTML += '</div><br>'
		return strHTML;
    }
    
    function OnNewPlayList()
    {
		var strHTML = "<b>Add new PlayList</b>"
	    strHTML += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=button class=button value='Submit' onclick='NewSegmentSubmit()' id='btnSegSubmit'>"
	    strHTML += "&nbsp;<input type=button class=button value='Cancel' onclick='CancelSeg()' id='btnSegCancel'>"
	    strHTML += "<br><table width=400><tr>"
	    strHTML += "<td align=right><font size=2>Title:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=30 id='txtPlayListTitle'><td>"
	    strHTML += "</tr></table><br><br>Segments in the new playlist:<br><div id='divSegs2PlayList'>&nbsp;&nbsp;&nbsp;&nbsp;<small>No segments added into this playlist yet!</small></div>"
	    strHTML += "<br>Segments available:" + GetExistingSegTableHTML()
	    strHTML += "<br><br>"
		document.getElementById('divPlaylist').innerHTML  =  strHTML 
    }
    
    function GetExistingSegTableHTML()
    {
        var strHTML = ""
		strHTML += '<table id="tblAvailSeg" width=400 style="position:relative;left:10px;border-collapse: collapse" border=1 cellpadding=0 cellspacing=0>'
		strHTML += " <TR><td colspan=6 align=right><input type=button class=button value='Add Selected Segment To PlayList' onclick='AddSegToPlayList()' id='btnAdd2PlayList'>"
		strHTML += ' <TR id="trTabs" class="sub" align="left" bgColor="powderblue" height="18">'
        strHTML += '  <TD>Segment</TD>'
        strHTML += '  <TD>Presenter</TD>'
        strHTML += '  <TD>Begin</TD>'
        strHTML += '  <TD>End</TD>'
        strHTML += ' </TR>'
		for (var i=0; i<gSegArr.length-1; i++)
		{
		    var itemArr = gSegArr[i].split("^")
		    strHTML += ' <TR id="trAvailSeg_' + i + '" onmouseover="overRow(this)" onmouseout="outRow(this)" onclick="selectRow(this)">'
            strHTML += '  <TD>' + itemArr[0] + '</TD>'
            strHTML += '  <TD>' + itemArr[5] + '</TD>'
            strHTML += '  <TD>' + itemArr[3] + '</TD>'
            strHTML += '  <TD>' + itemArr[4] + '</TD>'
            strHTML += ' </TR>'
        }
        strHTML += '</table>'
        return strHTML;
    }
    
    var plSegIndexArr= new Array()
    function AddSegToPlayList()
    {
        var i=0
        var selSegIndex = getSelAvailSegIndex()
        for (; i < plSegIndexArr.length; i++){
            if (selSegIndex == plSegIndexArr[i]){
                alert('Segment already present in the PlayList')
                return
            }
        }
        plSegIndexArr[plSegIndexArr.length] = selSegIndex
        LoadPlayListSegmentTable()
    }
    function LoadPlayListSegmentTable()
    {
        var strHTML = ""
        var i=0
        var selSegIndex = getSelAvailSegIndex()
        var noRowsMsg = "&nbsp;&nbsp;&nbsp;&nbsp;<small>No segments added into this playlist yet!</small>"
        if ( plSegIndexArr.length == 0){
            document.getElementById('divSegs2PlayList').innerHTML = noRowsMsg;
            return
        }

        
		strHTML += '<table id="tblAvailSeg" width=400 style="position:relative;left:10px;border-collapse: collapse" border=1 cellpadding=0 cellspacing=0>'
		strHTML += " <TR><td colspan=6 align=right><input type=button id='btnMoveUp' class=button value='Up' onclick='MoveSegUp()'>&nbsp;<input id='btnMoveDown' type=button class=button value='Down' onclick='MoveSegDown()'>&nbsp;<input type=button class=button value='Remove' onclick='RemoveSeg()'>"
		strHTML += ' <TR id="trTabs" class="sub" align="left" bgColor="powderblue" height="18">'
        strHTML += '  <TD>Segment</TD>'
        strHTML += '  <TD>Presenter</TD>'
        strHTML += '  <TD>Begin</TD>'
        strHTML += '  <TD>End</TD>'
        strHTML += ' </TR>'
        var countRow = 0;
        for (; i < plSegIndexArr.length; i++){
            if (plSegIndexArr[i] == -1) continue;
            countRow++
		    var itemArr = gSegArr[plSegIndexArr[i]].split("^")
		    strHTML += ' <TR id="trPLSeg_' + i + '" onmouseover="overRow(this)" onmouseout="outRow(this)" onclick="selectRow(this)">'
            strHTML += '  <TD>' + itemArr[0] + '</TD>'
            strHTML += '  <TD>' + itemArr[5] + '</TD>'
            strHTML += '  <TD>' + itemArr[3] + '</TD>'
            strHTML += '  <TD>' + itemArr[4] + '</TD>'
            strHTML += ' </TR>'
        }
        strHTML += '</table>'
        document.getElementById('divSegs2PlayList').innerHTML = (countRow == 0) ? noRowsMsg :strHTML;
        //if (countRow < 2)
        {
            document.getElementById('btnMoveUp').style.display = 'none'
            document.getElementById('btnMoveDown').style.display = 'none'
        }
    }
    function RemoveSeg()
    {
        plSegIndexArr[getSelAvailSegIndex('trPLSeg_')] = -1
        LoadPlayListSegmentTable()
    }
    function MoveSegUp()
    {
        var curIndex = getSelAvailSegIndex('trPLSeg_');
        if (curIndex == plSegIndexArr.length-1) return;
        var tmp =  plSegIndexArr[curIndex];
        var i=1;
        while (curIndex+i < plSegIndexArr.length){
            if (plSegIndexArr[curIndex+i] == -1){ i++; continue;}
            plSegIndexArr[curIndex] = plSegIndexArr[curIndex+i];
            plSegIndexArr[curIndex+i] = tmp;
        }
        LoadPlayListSegmentTable()
    }
    function MoveSegDown()
    {
        var curIndex = getSelAvailSegIndex('trPLSeg_');
        if (curIndex == 0) return;
        var tmp =  plSegIndexArr[curIndex];
        var i=1;
        while (curIndex-i > 0){
            if (plSegIndexArr[curIndex-i] == -1){ i++; continue;}
            plSegIndexArr[curIndex] = plSegIndexArr[curIndex - i];
            plSegIndexArr[curIndex - i] = tmp;
        }
        LoadPlayListSegmentTable()
    }
        
	function SegThumbError(imgObj)
	{
	    var iFind = imgObj.src.indexOf("?")
	    var noCacheSrc = imgObj.src
	    if (iFind != -1)
	        noCacheSrc=imgObj.src.substr(imgObj.src.length,iFind)
		setTimeout(function(){ imgObj.src = noCacheSrc+"?"+GetTimeID();}, 2000)
	}
	function loadSegThumb(imgObj)
	{
	    document.getElementById(imgObj.id.replace("Preload","")).src = imgObj.src
	}

	function NewSegment()
	{
		var strHTML = "<b>Enter info for the new segment</b><br><table>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>Title:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=20 id='txtSegTitle'><td>"
	    strHTML += "</tr>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>Begin Time:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=20 id='txtSegBegin'><td>"
	    strHTML += "</tr>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>End Time:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=20 id='txtSegEnd'><td>"
	    strHTML += "</tr>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>Artist/Presenter:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=20 id='txtSegArtist'><td>"
	    strHTML += "</tr>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>Other Info:&nbsp;<td>"
	    strHTML += "<td><input type=text maxlen=30 size=20 id='txtSegInfo'><td>"
	    strHTML += "</tr>"
	    strHTML += "<tr>"
	    strHTML += "<td align=right><font size=2>&nbsp;<td>"
	    strHTML += "<td><input type=button class=button value='Submit' onclick='NewSegmentSubmit()' id='btnSegSubmit'>"
	    strHTML += "&nbsp;<input type=button class=button value='Cancel' onclick='CancelSeg()' id='btnSegCancel'><td>"
	    strHTML += "</tr>"
		document.getElementById('divSeg').innerHTML  = "<br><br>" + strHTML + "</table>"
	}
	
	function NewSegmentSubmit()
	{
	    if (ValidateSegmentInput()==false)
	        return;
	    
		var url = "api.aspx?cmd=NewSeg&arg1=" + gMediaID
		url += "&arg2=" + document.getElementById('txtSegTitle').value;
		url += "&arg3=" + document.getElementById('txtSegBegin').value;
		url += "&arg4=" + document.getElementById('txtSegEnd').value;
		url += "&arg5=" + document.getElementById('txtSegArtist').value;
		url += "&arg6=" + document.getElementById('txtSegInfo').value;
		DoAjax(url, SegmentActionCB)
	}
	function SegmentActionCB()
	{
    	if (!IsAjaxResponseValid()) return
    	if (req.responseText.indexOf("Successful!") == -1)
    	    alert(req.responseText)
    	GetSegments()
	}
	
	
	function ValidateSegmentInput()
	{
	    
	}
	
	function EditSegment(playUrl)
	{
	    gSegCmd = 'EDIT'
	    gSegUrl = playUrl
	    GetSegments()
	}
	
	function EditSegmentSubmit(segid)
	{
	    if (ValidateSegmentInput()==false)
	        return;
	    
		var url = "api.aspx?cmd=EditSeg&arg1=" + gMediaID
		url += "&arg2=" + document.getElementById('txtSegTitle').value;
		url += "&arg3=" + document.getElementById('txtSegBegin').value;
		url += "&arg4=" + document.getElementById('txtSegEnd').value;
		url += "&arg5=" + document.getElementById('txtSegArtist').value;
		url += "&arg6=" + document.getElementById('txtSegInfo').value;
		url += "&arg7=" + segid
	    gSegCmd= ''
	    gSegUrl = ''
		DoAjax(url, SegmentActionCB)
	}
	function CancelSeg()
	{
		document.getElementById('divSeg').innerHTML  = ""
	    gSegCmd= ''
	    gSegUrl = ''
	    GetSegments()
	}
	
	function DeleteSegment(segid)
	{
	    if (!confirm("Are you sure?")) return
		var url = "api.aspx?cmd=DelSeg&arg1=" + gMediaID
		url += "&arg2=" + segid
	    gSegCmd= ''
	    gSegUrl = ''
		DoAjax(url, SegmentActionCB)
    }