var currentMovieId=-1;
var currentRadioId=-1;
var currentItemId=-1;

var channelsPerCol = 4;
var rowsPerPage = 4;
var totalChannels = -1;
var channelList;
var currentCategory = -1;
var currentPage = -1;

var dataArray;

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear.
*/
document.write('<style type="text/css">.tabber{display:none;}<\/style>');

var tabberOptions = {

  /* Optional: instead of letting tabber run during the onload event,
     we'll start it up manually. This can be useful because the onload
     even runs after all the images have finished loading, and we can
     run tabber at the bottom of our page to start it up faster. See the
     bottom of this page for more info. Note: this variable must be set
     BEFORE you include tabber.js.
  */
  'manualStartup':true,

  /* Optional: code to run after each tabber object has initialized */

  'onLoad': function(argsObj) {
    /* Display an alert only after tab2 */
    if (argsObj.tabber.id == 'tab2') {
     // changeTab('myworld');
    }
  },

  /* Optional: code to run when the user clicks a tab. If this
     function returns boolean false then the tab will not be changed
     (the click is canceled). If you do not return a value or return
     something that is not boolean false, */

  'onClick': function(argsObj) {

    var t = argsObj.tabber; /* Tabber object */
    var id = t.id; /* ID of the main tabber DIV */
    var i = argsObj.index; /* Which tab was clicked (0 is the first tab) */
    var e = argsObj.event; /* Event object */

    if(i==0){
		changeTab('myworld');
	}
	else if(i==1){
		changeTab('myservices');
	}
	
  },

  /* Optional: set an ID for each tab navigation link */
  'addLinkId': true

};



function changeTab(tab, showCom){
	if(tab=="myworld"){
		//show video
		var worldDiv = document.getElementById("blogs");
		worldDiv.innerHTML = "<h2>My World</h2>";
		var serviceDiv = document.getElementById("myservices");
		serviceDiv.innerHTML = "<h2>My Services</h2>";
		show("video","admin", showCom);
	}
	else{ //tab = myservices
		//show services
		var serviceDiv = document.getElementById("myservices");
		serviceDiv.innerHTML = "";
		loadDes();
	}
	getAdminItems("video");
}

function show(type, username, showCom){
		/*	getInfo of moive here */
		var img = new Array();

		/*	show out  */
		var t = document.createElement("table");
		t.id = "displayTable";
		t.width = "98%";
		document.getElementById("blogs").appendChild(t);
		
		if(username=="admin"){
			dataArray = getAdminItems(type);
			//alert(toJSON(dataArray));
		}
		else{
			dataArray = getUserItems(type, username);  
//alert("[" + dataArray + "]");
	//		alert(toJSON(dataArray));
		}

		var i =0;

		if(type=="video"){
			if ((dataArray != null) && (dataArray != "")) {
				for(i = dataArray.length-1; i>=0; i--){
					showDetailMovie(dataArray[i].id, dataArray[i].thumbnail, dataArray[i].title, dataArray[i].description, dataArray[i].pubDate, showCom);
				}
				//play the first movie in the list return
				currentMovieId = dataArray[dataArray.length-1].id;
				changeMovie(dataArray[dataArray.length-1].id);
			} else {
				changeMovie(0);
			}
		}
		else if(type=="audio"){
			if ((dataArray != null) && (dataArray != "")) {
				for(i = dataArray.length -1; i>=0; i--){
					img[i] = "logo.jpg";
					showDetailRadio(dataArray[i].id, img[i], dataArray[i].title, dataArray[i].description, dataArray[i].pubDate);
				}
				//play the first radio in the list return
				currentRadioId = dataArray[dataArray.length-1].id;
				changeRadio(dataArray[dataArray.length-1].id);
			} else {
				changeRadio(0);
			}
		}
}

function showDetailMovie(id, sourceImg, title, desp, time, showCom){
	var table = document.getElementById("displayTable");
	var row = table.insertRow(table.rows.length);
	
	
	row.id = "row"+id;
	//row.onclick = function(){changeMovie(id);};
	
	var cell_1 = row.insertCell(0);
	cell_1.innerHTML = "<a href=\"javascript:changeMovie('"+id+"')\">" + "<img src=\""+sourceImg+"\"> </a>";	cell_1.width = "25%";
	cell_1.onclick = function(){changeMovie(id);};

	
	var cell_2 = row.insertCell(1);
	cell_2.innerHTML =  "<a href=\"javascript:changeMovie('"+id+"')\">" + "<div class=\"styleVideoTitle\">"+title+"</div>" + "<div class=\"styleVideoDesp\">" + desp+"</div>" + "<div class=\"styleVideoDesp\">" + time +"</div>"+"<div id="+id+">&nbsp</div></a>";
	cell_2.onclick = function(){changeMovie(id);};
	
	
	cell_1.onmouseover = function(){cell_1.className='radioMouseover'; cell_2.className='radioMouseover'};
	cell_1.onmouseout = function(){cell_1.className=''; cell_2.className=''};
	
	cell_2.onmouseover = function(){cell_1.className='radioMouseover'; cell_2.className='radioMouseover'};
	cell_2.onmouseout = function(){cell_1.className=''; cell_2.className=''};
	
	if(showCom){
		var cell_3 = row.insertCell(2);		
		cell_3.innerHTML = "<div align='left' class=\"styleCommand\">"+ 
			"<a href=\"javascript:document.getElementById('itemId').value='"+id+"';videoBox.show()\">Edit</a></div> <div align='left' class=\"styleCommand\"> "+ "<a href=\"javascript:remove('"+id+"')\">Remove</a></div>";
		cell_3.width = "15%";
		cell_3.valign = "right";
	}
}



function showDetailRadio(id, sourceImg, title, desp, time){
	var table = document.getElementById("displayTable");
	table.width = "98%";
	var row = table.insertRow(table.rows.length);
	row.onmouseover = function(){row.className='radioMouseover';};
	row.onmouseout = function(){row.className=''};
	row.id = "row"+id;
//	row.onclick = function(){changeRadio(id);};
	
	var cell_1 = row.insertCell(0);
	cell_1.innerHTML = "<a href=\"javascript:changeRadio('"+id+"')\">" + "<img src=\""+sourceImg+"\" width=\"72\" height=\"60\" ></a>";
	cell_1.width = "18%";
	cell_1.onclick = function(){changeRadio(id);};
	
	var cell_2 = row.insertCell(1);
	cell_2.innerHTML = "<a href=\"javascript:changeRadio('"+id+"')\">" + "<div class=\"styleRadioTitle\">"+title+"</div>" + "<div class=\"styleRadioDesp\">" + desp+"</div>" + "<div class=\"styleRadioDesp\">" + time +"</div>"+"<div id="+id+">&nbsp</div></a>";	
	cell_2.onclick = function(){changeRadio(id);};
	
	cell_1.onmouseover = function(){cell_1.className='radioMouseover'; cell_2.className='radioMouseover'};
	cell_1.onmouseout = function(){cell_1.className=''; cell_2.className=''};
		
	cell_2.onmouseover = function(){cell_1.className='radioMouseover'; cell_2.className='radioMouseover'};
	cell_2.onmouseout = function(){cell_1.className=''; cell_2.className=''};
	
	
	if(showCom){ 
		var cell_3 = row.insertCell(2);		
		cell_3.innerHTML = "<div align='left' class=\"styleCommand\">"+ 
			"<a href=\"javascript:document.getElementById('itemId').value='"+id+"';videoBox.show()\">Edit</a></div><div align='left' class=\"styleCommand\">"+
			"<a href=\"javascript:remove('"+id+"')\">Remove</a> &nbsp;</div>";
		
	}
}

function showProfile(username, email, firstName, lastName, mobile, showCom){
	var profileTable = document.getElementById('profileTable');
	var row = profileTable.insertRow(0);
	row.vAlign = "top";
	
	var cell1= row.insertCell(0);
	var cell2= row.insertCell(1);
	var imageLink = getUserImage(username);
	cell1.innerHTML = "<img src=\""+imageLink+"\" border=\"4\" width=\"120\" height=\"120\">";
	cell1.width = "140px";
	
	var divName = document.createElement("div");
	divName.innerHTML = "<span class=\"profileHeader\">"+firstName+" "+lastName+"'s Profile"+ "</span>";
	cell2.appendChild(divName);	
	divName.align = "center";
	
	var divDistance = document.createElement("div");
	divDistance.innerHTML ="&nbsp;";
	cell2.appendChild(divDistance);
	
	var divUsername = document.createElement("div");
	divUsername.innerHTML = "<span class=\"profileInfo\">" +"Username: "+username+"</span>";
	cell2.appendChild(divUsername);
	
	var divEmail = document.createElement("div");
	divEmail.innerHTML ="<span class=\"profileInfo\">" + "Email: "+email+"</span>";
	cell2.appendChild(divEmail);
	
	var divFullname = document.createElement("div");
	divFullname.innerHTML ="<span class=\"profileInfo\">" + "Fullname: "+firstName+" "+lastName+"</span>";
	cell2.appendChild(divFullname);	
	
	var divMobile = document.createElement("div");
	divMobile.innerHTML ="<span class=\"profileInfo\">" + "Mobile No: "+mobile+"</span>";
	cell2.appendChild(divMobile);	
	
	if(showCom){
		var divCommand = document.createElement("div");
		divCommand.innerHTML = "<input type='button' name='edit' value='Edit' onclick=\"profileBox.show()\"/> &nbsp;";
		divCommand.align = "right";
		cell2.appendChild(divCommand);
	}

}


function changeRadio(newRadioId){
	var newsrc = (newRadioId > 0) ? ("radio.do?id="+newRadioId) : "noradio.txt";
	parent.radioPage.location.href = newsrc;

	//update Now Playing Radio
	if(currentRadioId!=-1){
		var oldRadio = document.getElementById(currentRadioId);
		oldRadio.innerHTML = "&nbsp";
		var oldrow = document.getElementById("row"+currentRadioId);
		oldrow.style.backgroundColor = "";
	}

	var newRadio = getShowPlayingDiv(newRadioId);
	newRadio.innerHTML = "Now Playing >> ";
	newRadio.style.fontSize = "11px";
	newRadio.style.fontFamily = "Arial, Helvetica, sans-serif";
	newRadio.style.color = "#006699";
	
	var newrow =  document.getElementById("row"+newRadioId);
	newrow.style.backgroundColor = "#E5E5E5";
	
	currentRadioId = newRadioId;
	currentItemId = currentRadioId;
	loadComments();
}

function changeMovie(newMovieId){
	var iframe = document.getElementById("videoPage");
	var newsrc = (newMovieId > 0) ? ("video.do?id="+newMovieId) : "novideo.txt";

	parent.videoPage.location.href = newsrc;

	//update Now Playing
	if(currentMovieId!=-1){
		var oldMovie = document.getElementById(currentMovieId);
		oldMovie.innerHTML = "&nbsp";
		var oldrow = document.getElementById("row"+currentMovieId);
		oldrow.style.backgroundColor = "";
	}
	
	var newMovie = getShowPlayingDiv(newMovieId);
	newMovie.innerHTML = "Now Playing >> ";
	
	var newrow =  document.getElementById("row"+newMovieId);
	newrow.style.backgroundColor = "#E5E5E5";
	
	currentMovieId = newMovieId;
	currentItemId = currentMovieId;
	loadComments();
}

var jsonrpc; 
function loadJSON() { 
try {
if (Undef(jsonrpc)){
jsonrpc = new JSONRpcClient("/JSON");
}
} catch (ex) {
alert(ex);
}
}

function Undef(o){
    return typeof(o)=='undefined'||o===''||o==null
}

function getAdminItems(type) {
	loadJSON();
	try {
		dataArray = jsonrpc.jsonManager.getAdminItems(type);
	} catch (ex) {
		alert (ex);
	}
	return dataArray;
}

function getUserItems(type, username){
	loadJSON();
	try {
		dataArray = jsonrpc.jsonManager.getUserItems(type, username);
	} catch (ex) {
		alert (ex);
	}
	return dataArray;
}

function getUserImage(username) {
	var img;
	loadJSON();
	try {
		img = jsonrpc.jsonManager.getUserImage(username);
	} catch (ex) {
		alert (ex);
	}
	return img;
}


function getShowPlayingDiv(id){
	return document.getElementById(id);
}


function playNextMovie(){
	var newMovie = 1;
	var i =0;
	for(i =dataArray.length-1; i>=0; i--){
		if(currentMovieId==dataArray[i].id){
			var next = 0;
			if(i==0) 
				next = dataArray.length-1;
			else next = (i-1)%dataArray.length;
			newMovie = dataArray[next].id;
		}
	}
	changeMovie(newMovie);
}

function playNextRadio(){
	var newRadio = 1;
	var i =0;
	for(i =dataArray.length-1; i>=0; i--){
		if(currentRadioId==dataArray[i].id){
			var next = 0;
			if(i==0) 
				next = dataArray.length-1;
			else next = (i-1)%dataArray.length;
			newRadio = dataArray[next].id;
		}
	}
	changeRadio(newRadio);
}


function showProgressUpload(){
	var tableUpload = document.getElementById("tableUpload");
	tableUpload.style.visibility = "hidden";
	var progressBar = document.getElementById("progressBar");
	progressBar.style.visibility = "visible";
}

function showProgressUploadFile(mediaType){
	if (mediaType == 'addMedia') {
		//alert('media: ' + document.uploadForm.media.value);
	}
	var tableUpload = document.getElementById("tableUpload");
	tableUpload.style.visibility = "hidden";
	var progressBar = document.getElementById("progressBar");
	progressBar.style.visibility = "visible";
}


function reloadMedia(type, username, showCom){
		var img = new Array();
		var blogs = document.getElementById("blogs");
		blogs.innerHTML = "";
		/*	show out  */
		var t = document.createElement("table");
		t.id = "displayTable";
		t.width = "98%";
		document.getElementById("blogs").appendChild(t);
		
		if(username=="admin"){
			dataArray = getAdminItems(type);
		}
		else{
			dataArray = getUserItems(type, username);  
		}
		if(dataArray.length>0){
		var i =0;
		if(type=="video"){
			for(i = dataArray.length-1; i>=0; i--){
				showDetailMovie(dataArray[i].id, dataArray[i].thumbnail, dataArray[i].title, dataArray[i].description, dataArray[i].pubDate, showCom);
			}
			/*
			//play the first movie in the list return
			currentMovieId = dataArray[0].id;
			changeMovie(dataArray[0].id);	
			*/
		}
		else if(type=="audio"){
			for(i = dataArray.length -1; i>=0; i--){
				img[i] = "logo.jpg";
				showDetailRadio(dataArray[i].id, img[i], dataArray[i].title, dataArray[i].description, dataArray[i].pubDate);
			}
			/*
			//play the first radio in the list return
			currentRadioId = dataArray[0].id;
			changeRadio(dataArray[0].id);
			*/
		}
		}
}

function getSubscriptions(username){
	loadJSON();
	var channelList;
	try {
		channelList = jsonrpc.jsonManager.getSubscriptions(username);
		//alert(toJSON(channelList));
	} catch (ex) {
		alert (ex);
	}
	return channelList;
}

function createSubscription(subscriber, owner){
	alert("You have subscribed to "+owner+"'s channel");
	loadJSON();
	try {
		jsonrpc.jsonManager.createSubscription(subscriber, owner);
	} catch (ex) {
		alert (ex);
	}
	
	window.location.reload(true);
}

function removeSubscription(subscriber, channelId){
	loadJSON();
	try {
		jsonrpc.jsonManager.removeSubscription(subscriber, channelId);
	} catch (ex) {
		alert (ex);
	}
	//reload
	window.location.reload(true);
}

function removeSubscriptionFromUser(subscriber, owner){
	loadJSON();
	try {
		jsonrpc.jsonManager.removeSubscription(subscriber, owner);
	} catch (ex) {
		alert (ex);
	}
	//reload
	window.location.reload(true);
}


function checkSubscription(subscriber, owner){
	var result;
	loadJSON();
	try {
		result = jsonrpc.jsonManager.checkSubscription(subscriber, owner);
	} catch (ex) {
		alert (ex);
	}
	return result;
}

function showSubscription(username, showCom){
	var channelListDiv = document.getElementById("channelListDiv");
	var channelTable = document.createElement("table");
	channelTable.id = "channelTable";
	channelTable.style.backgroundColor = "#FAFAFA";
	channelTable.width = "800px";
	channelTable.cellSpacing ="0px";
	channelListDiv.appendChild(channelTable);

	var channelList = getSubscriptions(username);
	var i = 0;
	for(i=0;i<channelList.length; i++){
	showDetailSubscription(username, channelList[i].id, channelList[i].image, channelList[i].title, channelList[i].description, channelList[i].provider, showCom); 
	}
}

function showDetailSubscription(username, channelId, image, title, description, provider,  showCom){
	var channelTable = document.getElementById("channelTable"); 
	var row = channelTable.insertRow(0);
	var cell_1 = row.insertCell(0); 
	var cell_2 = row.insertCell(1);
	
	cell_1.width = "120px";
	cell_1.innerHTML = "<a href=\"javascript:directToChannel("+provider+")\"><img src=\""+image+"\" width=120 height=90></a>";
	cell_2.innerHTML = "<div class='formLabel'>" + title + "</div>"
						+ "<div class='formLabel'>" + description + "</div>";
	cell_2.onmouseover = function(){cell_1.className='radioMouseover';cell_2.className='radioMouseover';};
	cell_2.onmouseout = function(){cell_1.className='';cell_2.className='';};
	cell_1.onclick = function(){directToChannel(provider)};
	cell_2.onclick = function(){directToChannel(provider)} ;
	
	if(showCom && username != provider){
		var cell_3 = row.insertCell(2);
		cell_3.innerHTML = "<div class='formLabel'><a href=\"javascript:removeSubscription('"+loginUsername+"',"+channelId+")\">UnSubscribe</a></div>";
		cell_3.valign ="bottom";
		cell_3.align ="right";	
		cell_3.width = "55";
	}
}

function directToChannel(provider){
//	window.location.href = "http://localhost:8080/mbittv/userpage.do?username="+provider;
		window.location.href = "http://mbit.tv/"+provider;
}

function showSubscribeButton(buttonType, flag, loginUser, user){
	var subscribeDiv = document.getElementById("subscribeDiv");
	if(buttonType=='Subscribe'){
		if(flag){
			subscribeDiv.innerHTML = "<input type='button' name='subscribe' value='Subscribe' onclick=\"createSubscription('"+loginUser+"', '"+user+"')\">";
		}
		else{
			subscribeDiv.innerHTML = "<input type='button' name='subscribe' value='Subscribe' onclick=\"alert('Please log in to subscribe to this channel')\" >";
		}
	}
	else{
		subscribeDiv.innerHTML = "<input type='button' name='unsubscribe' value='UnSubscribe' onclick=\"removeSubscriptionFromUser('"+loginUser+"', '"+user+"')\">";
	}
}

function getCategories(){
	var result;
	loadJSON();
	try {
		result = jsonrpc.jsonManager.getCategories();
		//alert(toJSON(result));
	} catch (ex) {
		alert (ex);
	}
	return result;
}

function getSubCategories(catId){
	var result;
	loadJSON();
	try {
		result = jsonrpc.jsonManager.getSubCategories(catId);
		//alert(toJSON(result));
	} catch (ex) {
		alert (ex);
	}
	return result;
}

function showCategoryTree(){
	var categories = getCategories();
	var category_tree = new Zapatec.Tree({
		tree: "category_tree",
		defaultIcons: "customIcon",
		expandOnLabelClick: true,
		highlightSelectedNode: true
	});
	
	var i = categories.length-1;
	for(i=categories.length-1; i>=0; i--){
		if(categories[i].leaf){
			var newLi = document.createElement("li");	
			newLi.innerHTML = "<a href=\"javascript:listChannelOfCategory(" + categories[i].id+ ")\">"+categories[i].name +"</a>";
			category_tree.appendChild(newLi, null, true);
		}
		else{ //get subcategories
			var newLi = document.createElement("li");
			newLi.innerHTML = categories[i].name;	
			var subCat = getSubCategories(categories[i].id);
			var str = newLi.innerHTML;
			str =  str + "<ul>";
			var j=0;
			for(j=0; j<subCat.length; j++){
				str = str + "<li onclick=\"listChannelOfCategory("+subCat[j].id+")\">"+ subCat[j].name + "</li>";
			}
		
			newLi.innerHTML = str + "</ul>";
			category_tree.appendChild(newLi, null, true); 

		}
	}
}


function getChannels(catId){
	var result;
	loadJSON();
	try {
		result = jsonrpc.jsonManager.getChannels(catId);
	} catch (ex) {
		//alert (ex);
	}
	return result;
}

function listChannelOfCategory(catId){
	//update current category
	currentCategory = catId;
	
	channelList = getChannels(catId);
	if(channelList!=null){
		initPaging(channelList.length, 1);
		totalChannels = channelList.length;	
		gotoPage(1);
	}
}

function showDetailChannel(row, col, channelId, image, title, description, provider){
	var tableChannel = document.getElementById("tableChannel"); 
	var newRow, newCell;

	if(col==0){
		newRow = tableChannel.insertRow(tableChannel.rows.length);
		var j=0;
		for(j=0; j<channelsPerCol; j++){
			newRow.insertCell(j);
		}
	}
		
	newRow = tableChannel.rows[row];
	newCell = newRow.cells[col];
	newCell.width = "25%";	
	newCell.innerHTML = "<div><a href=\"javascript:directToChannel('"+provider+"')\"><img src=\""+image+"\" width=120 height=90></a></div>"
		+ "<div class='formLabel'>" + title + "</div>";
	
	
}


function initPaging(totalChannels, currentPage){
	var totalPages=0;
	var channelsPerPage = rowsPerPage * channelsPerCol;
	var remainder = totalChannels % channelsPerPage;
	if(remainder==0)
		totalPages = totalChannels/channelsPerPage;
	else totalPages = (totalChannels-remainder)/channelsPerPage + 1;
	
	/*	Only show the first 7 pages and the end page	*/
	var url = "";
	var i= 0;
	if(totalPages<=8){
		for(i=1;i<totalPages; i++){
			if(i==currentPage)
				url = url + " "+ "<a href=\"javascript:gotoPage("+i+")\"><strong>" +i +"</strong></a>" + " |";
			else 
				url = url + " "+ "<a href=\"javascript:gotoPage("+i+")\">" +i +"</a>" + " |";
		}
		if(currentPage == totalPages)
			url = url + " "+ "<a href=\"javascript:gotoPage("+totalPages+")\"><strong>" +totalPages +"</strong></a>";
		else
			url = url + " "+ "<a href=\"javascript:gotoPage("+totalPages+")\">" +totalPages +"</a>";
	}
	else{
		for(i=1;i<8; i++){
			if(i==currentPage)
				url = url + " "+ "<a href=\"javascript:gotoPage("+i+")\"><strong>" +i +"</strong></a>" + " |";
			else 
				url = url + " "+ "<a href=\"javascript:gotoPage("+i+")\">" +i +"</a>" + " |";
		}
		if(currentPage == totalPages)
			url = url + " ... | "+"<a href=\"javascript:gotoPage("+totalPages+")\"><strong>" +totalPages +"</strong></a>";
		else 
				url = url + " ... | "+"<a href=\"javascript:gotoPage("+totalPages+")\">" +totalPages +"</a>";		
	}
	
	
	if(currentPage==1){	// NO Prev link
		if(totalPages>1) url = "Pages    "+url+  "<a href=\"javascript:gotoPage(2)\"> Next </a>";
		else url = "Pages  "+url; 
	}
	else if(currentPage == totalPages ){ // NO Next link
		if(totalPages>1) url = "Pages    " + "<a href=\"javascript:gotoPage(2)\"> Prev </a>" +url;
	}
	else{
		url = "Pages    "+ "<a href=\"javascript:gotoPage("+(currentPage-1)+")\"> Prev </a>" + url+  "<a href=\"javascript:gotoPage("+(currentPage+1)+")\"> Next </a>";		
	}
	
	if(totalChannels==0) url="";
	var pagingHead = document.getElementById("pagingHead");
	pagingHead.innerHTML = url;
}

function gotoPage(pageNo){
	//if(pageNo!=currentPage){
		currentPage = pageNo;
		//alert(currentPage);
		initPaging(totalChannels, currentPage);
		//reset table
		var divChannelList = document.getElementById("channelList"); 
		divChannelList.innerHTML ="";
		var tableChannel = document.createElement("table");
		tableChannel.id = "tableChannel";
		divChannelList.appendChild(tableChannel);
	
		//load new data for the table
		var totalRows = 0;
		var channelsPerPage = rowsPerPage * channelsPerCol;
		if(pageNo*channelsPerPage <= totalChannels){
			totalRows = rowsPerPage;
		}
		else{
			var row=0, col=0,  totalRows=0;
			var channels = totalChannels % channelsPerPage;
			var remainder = channels % channelsPerCol;
			totalRows = (channels-remainder)/channelsPerCol;
			if(remainder>0)
				totalRows = totalRows + 1;
		}

		//display
		var row=0, col=0;
		for(row=0; row<totalRows; row++){
			if(row==totalRows-1){
				remainder = channelList.length - row*channelsPerCol;
			}
			else remainder = channelsPerCol;
			for(col=0; col<remainder; col++){
				i = channelsPerPage*(pageNo-1) + row*channelsPerCol + col;
				showDetailChannel(row, col, channelList[i].id, channelList[i].image, channelList[i].title, channelList[i].description, channelList[i].provider);

			}
		}

	//}
}