var mediaXml = null;
var firstVisible =0;
var lastVisible = 0;
var maxNavBtns = 16;
var lastNavBtn = 0;
var activeItemIdx = 0;
var displayCnt = 16;

var isWorksFilled = false;
var isBackGroundLoaded = false;

$(document).ready(function(){
	fetchXml();

});
function fetchXml()
{
    if(mediaXml != null) return;
    var loc = window.location.href.toLowerCase();
    if (loc.indexOf('videoplayer.htm') >= 0) return;   
	$.ajax({
		type: "GET",
		url: "ibis_spec.xml",
		dataType: "xml",
		success: function(xml) {
			mediaXml = xml;
			lastNavBtn = getMaxBtnCnt();
            var isWorks = (loc.indexOf('works.htm') >= 0);
			if(isWorks) {
			    if(!isWorksFilled) fillWorks(0);
			    isWorksFilled = true;
			}
		}
	});
}

function loadBackGround()
{
    var ft = $.jqURL.get("ft");
    var frameClass = 'vpContainer';
    var closeBtnTop = '100px'
    var closeBtnLeft = '550px'

    if(ft != null) frameClass = 'vpContainer_' + ft;
    var frameDiv = document.getElementById('picFrameID');
    frameDiv.className = frameClass;      
    var clsBtn = document.getElementById('closeBtnID');           
}

function loadPlayer()
{
    var videoguid = $.jqURL.get("video"); 
    var ft = $.jqURL.get("ft");
    var vidname = $.jqURL.get("vidname");
    
    var height = '480';
    var width = '640';
    var playerTop = 140;
    var playerLeft = '110';
    var tagTop = '820';
    var tagLeft = '350';
    var frameClass = 'vpContainer';
    var closeBtnTop = '100'
    var closeBtnLeft = '550'
  
    var link = 'http://www.ibiscinematography.com/videos/' + vidname + '.mov'; //item.find('link').text();
    var video = 'jbPlayer?video=' + link;

   switch(ft)
    {
        case '1':
            width = '600';
            height = '354';
            playerTop = 238;
            playerLeft = '297px';  
            tagTop = '790px';
            tagLeft = '500px';    
            closeBtnTop = '50px';
            closeBtnLeft = '490px';                                                          
            frameClass = 'vpContainer_1';             
            break;
        case '2':
            width = '640';
            height = '442';
            playerTop = 233;
            playerLeft = '313px';  
            tagTop = '710px';
            tagLeft = '500px';   
            closeBtnTop = '50px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_2';             
            break;     
        case '3':
            width = '640';
            height = '376';
            playerTop = 268;
            playerLeft = '324px';  
            tagTop = '865px';
            tagLeft = '540px';   
            closeBtnTop = '100px';
            closeBtnLeft = '530px';                                                          
            frameClass = 'vpContainer_3';             
            break;  
        case '4':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '325px';  
            tagTop = '685';
            tagLeft = '470px';     
            closeBtnTop = '100px';
            closeBtnLeft = '530px';                                                        
            frameClass = 'vpContainer_4';             
            break;      
        case '5':
            width = '640';
            height = '376';
            playerTop = 268;
            playerLeft = '325px';  
            tagTop = '875px';
            tagLeft = '540px';   
            closeBtnTop = '100px';
            closeBtnLeft = '500px';                                                          
            frameClass = 'vpContainer_5';             
            break;                       
        case '6':
            width = '640';
            height = '443';
            playerTop = 230;
            playerLeft = '314px';  
            tagTop = '835px';
            tagLeft = '540px';   
            closeBtnTop = '50px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_6';             
            break;   
        case '7':
            width = '640';
            height = '443';
            playerTop = 233;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';     
            closeBtnTop = '50px';
            closeBtnLeft = '520px';                                                        
            frameClass = 'vpContainer_7';             
            break;    
        case '8':
            width = '640';
            height = '376';
            playerTop = 262;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';    
            closeBtnTop = '50px';
            closeBtnLeft = '520px';                                                         
            frameClass = 'vpContainer_8';             
            break; 
        case '9':
            width = '640';
            height = '376';
            playerTop = 265;
            playerLeft = '324px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '100px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_9';             
            break; 
        case '10':
            width = '640';
            height = '376';
            playerTop = 267;
            playerLeft = '326px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '70px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_10';             
            break; 
        case '11':
            width = '640';
            height = '376';
            playerTop = 263;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';  
            closeBtnTop = '70px';
            closeBtnLeft = '520px';                                                           
            frameClass = 'vpContainer_11';             
            break; 
        case '12':
            width = '640';
            height = '496';
            playerTop = 200;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';  
            closeBtnTop = '40px';
            closeBtnLeft = '510px';                                                           
            frameClass = 'vpContainer_12';             
            break; 
        case '13':
            width = '640';
            height = '496';
            playerTop = 202;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';    
            closeBtnTop = '50px';
            closeBtnLeft = '510px';                                                         
            frameClass = 'vpContainer_13';             
            break; 
        case '14':
            width = '640';
            height = '376';
            playerTop = 262;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';       
            closeBtnTop = '100px';
            closeBtnLeft = '520px';                                                      
            frameClass = 'vpContainer_14';             
            break; 
        case '15':
            width = '640';
            height = '442';
            playerTop = 233;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';     
            closeBtnTop = '70px';
            closeBtnLeft = '520px';                                                        
            frameClass = 'vpContainer_15';             
            break;   
        case '16':
            width = '640';
            height = '376';
            playerTop = 264;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';  
            closeBtnTop = '80px';
            closeBtnLeft = '520px';                                                           
            frameClass = 'vpContainer_16';             
            break;  
        case '17':
            width = '640';
            height = '496';
            playerTop = 204;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_17';             
            break;    
        case '18':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_18';             
            break; 
        case '19':
            width = '640';
            height = '496';
            playerTop = 203;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_19';             
            break;       
        case '20':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_20';             
            break;     
        case '21':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '327px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_21';             
            break;   
        case '22':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_22';             
            break;   
        case '23':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_23';             
            break;        
        case '24':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_24';             
            break;   
        case '25':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_25';             
            break; 
		case '28':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_28';             
            break; 
		case '29':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_29';             
            break; 
		case '30':
            width = '640';
            height = '376';
            playerTop = 266;
            playerLeft = '328px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_30';             
            break;
		case '31':
            width = '640';
            height = '496';
            playerTop = 203;
            playerLeft = '330px';  
            tagTop = '855px';
            tagLeft = '580px';   
            closeBtnTop = '40px';
            closeBtnLeft = '520px';                                                          
            frameClass = 'vpContainer_31';             
            break;
       
	    default:
            width = '640';
            height = '496';
            playerTop = 140;
            playerLeft = '110px';
            tagTop = '820px';
            tagLeft = '350px';  
            closeBtnTop = '100px';
            closeBtnLeft = '500px';                                                           
            'vpContainer';
            break;                                                             
    }
    var clsBtn = document.getElementById('closeBtnID');
    clsBtn.style.top = closeBtnTop;
    clsBtn.style.left = closeBtnLeft;        
    var playDiv = document.getElementById('playerContainerID');
    playDiv.style.top = (playerTop - 13) + 'px';
    playDiv.style.left = playerLeft;         
    var quicktimeStr = QT_GenerateOBJECTText_XHTML(link, width, height, '','autoplay', 'true','obj#bgcolor', '#333333','align', 'middle');
    playDiv.innerHTML = quicktimeStr;
         
}

// used by VideoPlayer page
function fillInfoTag()
{
    var video = new String(window.location.search);
    video = video.substr(7,video.length -7);	
	var item = findItem(video);
	if(item != null)
	{
	
		var description = item.find('description').text();
		var author = item.find('author').text();	
		var moveTitle = item.find('title').text();	
		document.getElementById('vpInfoTagID').innerHTML = description;
	}    
}


// if activeindex is less than 8 (have displayable)
// display 1-16, set select to activeindex
// if activeindex > 8 and lastNavBtn > activeindex + 8, then put active index at 8 and show -7left, 8 right 
// if activeindex + 8 > lastNavBtn, show last 16 (or n) and place activeindex where found.
function fillWorks(pageNo)
{
	$('pages',mediaXml).each(function(){
	    
		lastNavBtn = $(this).find('page').length;
		var pageCnt = 0;					
		$(this).find('page').each(function(){		
			if(pageCnt == pageNo )
			{
			    doPage($(this));
			}
			pageCnt ++;
		});
	});	
}
function doPage(pgNode)
{
    var pgDiv = "";
    $(pgNode).find('video').each(function(){		
        var pgCodeTemplate = '<a id=\"THUMB_ID\" class=\"wpThumbLink\" onmouseover=\"setWorkNavBtnOver(this);\" onmouseout=\"setWorkNavBtnOut(this);\"   href=\"VideoPlayer.htm?video=VIDEO_GUID\" style=\"top:THUMB_TOPpx; left:THUMB_LEFTpx; CHANGE_CURSOR\" ><img id=\"IMGTHUMBIDimg\" src=\"images/THUMB_SRC\" alt=\"\" /></a>';  
	    var targetGuid = $(this).attr('guid'); //.toLowerCase();
	    var thumbid = $(this).attr('thumbid'); //.toLowerCase();
	    var thumbTop = new Number( $(this).attr('top'));
	    var thumbLeft =  new Number( $(this).attr('left'));
	    var isvisible  = $(this).attr('isvisible');
	    var frameType = $(this).attr('frametype');
	    var vidname = $(this).attr('vidname');
	    //thumbTop += 144;
	    //thumbLeft += 24;
	    if(isvisible = true)
	    {
	        // no vidname == coming soon, no linking
	        if(vidname == '') {
	            pgCodeTemplate = pgCodeTemplate.replace('onmouseover=\"setWorkNavBtnOver(this);\"','onmouseover=\"return false;\"');
	            pgCodeTemplate = pgCodeTemplate.replace('onmouseout=\"setWorkNavBtnOut(this);\"','onmouseout=\"return false;\"');
	        }
	        var newThumb = '';
	        if(vidname == 'NO_LINK') {
                //href=\"VideoPlayer.htm?video=VIDEO_GUID\"
                pgCodeTemplate = pgCodeTemplate.replace('href=\"VideoPlayer.htm?video=VIDEO_GUID\"','href=\"#\" onclick=\"return false;\"');
                pgCodeTemplate = pgCodeTemplate.replace('CHANGE_CURSOR','cursor:default');
                
                newThumb = pgCodeTemplate;
	        }	        
	        else {
	            newThumb = pgCodeTemplate.replace('VIDEO_GUID', targetGuid + '&vidname=' + vidname + '&ft=' + frameType + '&rnd=' + Math.random());
	            newThumb =newThumb.replace('CHANGE_CURSOR','cursor:pointer');
	        }
	        newThumb =newThumb.replace('THUMB_ID',targetGuid);
	        newThumb =newThumb.replace('IMGTHUMBID',targetGuid);
	        
	        newThumb =newThumb.replace('THUMB_SRC',thumbid);
	        newThumb =newThumb.replace('THUMB_TOP',thumbTop);
	        newThumb =newThumb.replace('THUMB_LEFT',thumbLeft);
	        pgDiv += newThumb;
	    }
	    
	});
    var workDiv = document.getElementById('gWorkContainer');
    if(workDiv != null) workDiv.innerHTML = pgDiv;

//	$('video',pgNode).each(function(){
//		var targetGuid = $(this).find('guid').text().toLowerCase();
//		var thumbid = $(this).find('thumbid').text().toLowerCase();
//		var thumbTop = $(this).find('top').text().toLowerCase();
//		var thumbLeft = $(this).find('left').text().toLowerCase();
//		var isvisible  = $(this).find('isvisible').text().toLowerCase();
//	});	
}
function doItem(abtn)
{
	var idx = abtn.innerHTML;
	var dxNum = new Number(idx);
	
	clearNavSelection();
	drawEpisode(dxNum -1);
	abtn.className = "paginationLinksOn";				
}

function clearNavSelection()
{
	for(var j = 1; j < 17; j++)
	{				
		var btn = document.getElementById("nav" + j.toString());
		if(btn != null) btn.className = "paginationLinks";		
	}					
}

function drawEpisode(idx)
{
	var item = findItem(idx);
	if(item != null)
	{
		var maintitle = item.find('maintitle').text();
		if(maintitle == "") maintitle = 'The Hills Are Alive';
		var episode_number = item.find('episode_number').text();
		var title = item.find('title').text();
		var description = item.find('description').text();
		var descAuthor = item.find('description_author').text();
		var heading = item.find('heading').text();
		var content = item.find('content').text();
		var author = item.find('author').text();		
		document.getElementById('headerID').innerHTML = maintitle + '<br />Webisode ' + episode_number + ' - ' + title;
		document.getElementById('descID').innerHTML = description;
		document.getElementById('descAuthorID').innerHTML = '-' + descAuthor;
		document.getElementById('subHeadingID').innerHTML = heading;
		document.getElementById('bodyTextID').innerHTML = content;
		document.getElementById('authorID').innerHTML = author;
		activeItemIdx = idx;
	}
}

function doNext()
{
	if(activeItemIdx > lastNavBtn) {
		activeItemIdx = lastNavBtn -1;
		activeItemIdx++;
		fillNavBar();					
	}
	else if(activeItemIdx == lastNavBtn -1)
	{
	}
	else 
	{
		activeItemIdx++;
		fillNavBar();
	}
}

function doPrev()
{
	activeItemIdx--;
	if(activeItemIdx < 0) activeItemIdx = 0;			
	fillNavBar();			
}
function getMaxBtnCnt()
{
	var maxBtn = 0;
	$('channel',mediaXml).each(function(){
		maxBtn = $(this).find('item').length;
		return false;
	});		
	return maxBtn +1;		
}
function findItem(guid)
{
    var findGuid = guid.toLowerCase();
	var targetItem = null;
	var itemCnt = 0;	
            
	$('channel',mediaXml).each(function(){
	
		lastNavBtn = $(this).find('item').length;						
		$(this).find('item').each(function(){		
		    var targetGuid = $(this).find('guid').text().toLowerCase();
			if(targetGuid == findGuid )
			{
			//var episode_number = $(this).find('episode_number').text();
			//var title = $(this).find('title').text();
				targetItem = $(this);
				
				return false;
			}
			itemCnt ++;
		});
		return false;
	});	
	return targetItem;		
}

function setNavBtnOver(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/menu_buttons/' + ctrl.id + '_O.png';
    
}
function setNavBtnOut(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/menu_buttons/' + ctrl.id + '.png';
    
}
//
function setHomeNavBtnOver(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/home_page/' + ctrl.id + '_O.jpg';
    
}
function setHomeNavBtnOut(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/home_page/' + ctrl.id + '.jpg';
    
}

function setWorkNavBtnOver(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/works_pages/thumbnails/' + ctrl.id + '_O.png';
    
}
function setWorkNavBtnOut(ctrl)
{
    var curImg = document.getElementById(ctrl.id + 'img');
    if(curImg) curImg.src = 'images/works_pages/thumbnails/' + ctrl.id + '.png';
    
}