// Javascript for new photos page functionality
// Phil Whitehurst
// Nov 2009

var pImage = '';
var cImage = '';

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Spry.$$("#viewingWhat")[0].innerHTML = "<p>You are currently viewing the last 100 photos posted</p>";

// Attach onclick event to each albums once built, click sets photo source to album and opens photos to view

var myObserver1 = { onPostUpdate: function(notifier, data) {Albums();} };
Spry.Data.Region.addObserver("albums", myObserver1);

function Albums()
{
	var myalbums = Spry.$$("#albums li", "TabbedPanels1")
	var rows = dsAlbums.getData(); 
	var setListener = function( element, value )
	{
		Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false ); 
		};
	for( var i = 0, length = myalbums.length; i < length; i++ )
	{
		setListener( myalbums[i], i );
		}

}
function showAlbum(i)
{
	pauseShow();
	pImage = 'No';
	var rows = dsAlbums.getData();
	var albumid = rows[i]["albumid"];
	var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
	dsPhotos.setURL(url);
	dsPhotos.loadData();
	
	var rowcount = dsAlbums.getRowCount() - 1;
	var nextalbum;
	var navnext;
	var n;
	
	if (i > 0)
	{
		n = i - 1;
		prevalbum = rows[n]["title"]
	    navprev = 'Show previous album <a href="#" onclick="showAlbum(' + n + ');" > ' + prevalbum + ' </a>';
		navnextstart = " or ";
	}
	else
	{
		navprev = "";
		navnextstart = "Show";
	}
	
	
	if (i < rowcount)
	  {
	  n = i + 1;
	  nextalbum = rows[n]["title"]
	  navnext = navnextstart +  ' next album <a href="#" onclick="showAlbum(' + n + ');" > ' + nextalbum + '.</a></p>';
	  }
	else
	{
		navnext = ".</p>";
	}
	var base = "<p>You are currently viewing the album <b>" + rows[i]["title"] + "</b>. ";
	var content = base + navprev + navnext;
	
	Spry.$$("#viewingWhat")[0].innerHTML = content;
	
    TabbedPanels1.showPanel(1);
	
}
// Attach onclick event to each tag once built, 

var myObserver2 = { onPostUpdate: function(notifier, data) {Tags();} };
Spry.Data.Region.addObserver("mtags", myObserver2);


function Tags()
{
	
	var mytags = Spry.$$("#mtags a", "TabbedPanels1");
	var setListener2 = function( element, value )
	{
		Spry.Utils.addEventListener( element, "click", function(){ showTag( value ); },false ); 
		}
	for( var i = 0, length = mytags.length; i < length; i++ )
	{
		setListener2( mytags[i], i );
		}

}
function showTag(i)
{
	
	var rows = dsTags.getData();
	var tag = rows[i]["title"];
	pauseShow();
	pImage = 'No';
	var url = "xml/PicasaTphotoFeed.asp?tag=" + tag;
	dsPhotos.setURL(url);
	dsPhotos.loadData();
	
	var rowcount = dsTags.getRowCount() - 1;
	var nexttag;
	var navnext;
	var n;
	
	if (i > 0)
	{
		n = i - 1;
		prevtag = rows[n]["title"]
	    navprev = 'Show photos for previous tag <a href="#" onclick="showTag(' + n + ');" > ' + prevtag + ' </a>';
		navnextstart = " or ";
	}
	else
	{
		navprev = "";
		navnextstart = "Show photos for ";
	}
	
	
	if (i < rowcount)
	  {
	  n = i + 1;
	  nexttag = rows[n]["title"]
	  navnext = navnextstart +  ' next tag <a href="#" onclick="showTag(' + n + ');" > ' + nexttag + '.</a></p>';
	  }
	else
	{
		navnext = ".</p>";
	}
	
	base = "<p>You are currently viewing photos tagged with <b>" + rows[i]["title"] + "</b>. ";
	var content = base + navprev + navnext;
	
	
	Spry.$$("#viewingWhat")[0].innerHTML = content;
	
    TabbedPanels1.showPanel(1);	
}

    var myPhotos = Spry.$$("#AlbumTabTop a").addEventListener("click", function(){ showPhotos(); },false ); 
	
function showPhotos()
{
	pauseShow();
	pImage = 'No';
	dsPhotos.setURL("xml/PicasaPphotoFeed.asp");
	dsPhotos.loadData();
	Spry.$$("#viewingWhat")[0].innerHTML = "<p>You are currently viewing the last 100 photos posted</p>";
	TabbedPanels1.showPanel(1);	
}

function showthisPhoto(rowNumber)
{
	pauseShow();
	fadeOutContentThenSetRow(rowNumber,true);
	
}



// Slideshow code

//
//         Define some global variables that will help deal with the case
//         where a member may rapidly click on items in the thumbnail region. We
//         want our effect transitions to be as smooth as possible.
//
var gEffectInProgress = null;
var gPendingSetRowNumberRequest = -1;
var StartSlideTimer = null;
var shuffle = false;


//
//         Define a function observer that will fade-in the current image content
//         whenever the content in the region is re-generated and inserted into the
//         document.
//
//         see CSS rule for currentImage else image may flicker on first load.
//         that gives it an opacity of zero, which basically means that when the page
//         is first loaded, the detail region is completely invisible/see-thru. This
//         prevents an initial flash from occuring in some browsers if the content is
//         rendered to the screen before the fade-in effect kicks in.
//



function fadeInContent()
{
	cImage = Spry.$$('#myImage')[0].src;
		
	if (cImage == pImage)
	 {
	 gEffectInProgress = null;
	 gPendingSetRowNumberRequest = -1;
	 return;
	 }
	if (pImage == 'No')
	{
	 gEffectInProgress = null;
	 gPendingSetRowNumberRequest = -1;
	 pImage = 'Yes';
	 return;
	}
			
	var effect = new Spry.Effect.Fade('cImage', { to: 100, from:0, duration: 500, finish: function() {
		// The region is now showing. Process any pending row change request.
		gEffectInProgress = null;
		if (gPendingSetRowNumberRequest >= 0)
		{
			var rowNumber = gPendingSetRowNumberRequest;
			gPendingSetRowNumberRequest = -1;
			fadeOutContentThenSetRow(rowNumber);
		}
	}});
	effect.start();
	pImage = cImage;
}


//
//         Register the function as an onload event listener on the image
//
//Spry.$$('#myImage').addEventListener("load",fadeInContent(),false);
//
//         Define a function which will be used to fade-out the current Image detail region. This
//         same function will define a custom finish function, which will be called by
//         the fade-out effect when it is finished, to trigger a call to setCurrentRow().
//         This custom finish function is registered with the effect by passing it as an
//         option to the effect constructor.
//
function fadeOutContentThenSetRow(rowNumber,addPage)
{
	
	// If no rowNumber provided then we must be in slideshow mode
	// So get next rowNumber based on sequence of shuffle
	
	
	rows = dsPv1.getData();
	var pageNumber = rows[0]["ds_PageNumber"] - 1;
	if(rowNumber == null)
	{
	 var CrowNumber = dsPhotos.getCurrentRowNumber();
     var rowCount = dsPhotos.getRowCount();
	if (shuffle)
	{
		rowNumber = Math.floor(Math.random()*(rowCount - 1));

	}
	
	else
	{
	if (CrowNumber < rowCount - 1)
	{
	 rowNumber = CrowNumber + 1;	
	}
	else
	{
	rowNumber = 0;	
	}
	} 
 
	}
	else
	{
		if (addPage)
		{
		rowNumber = rowNumber + (pageNumber * 30);
		}
	}
	
	
	
	// If we have an effect already in progress, don't do anything
	// We'll set the rowNumber when we're done.
 
   
	
	if (gEffectInProgress)
	{
		gPendingSetRowNumberRequest = rowNumber;
		return;
	}
 
	// If the correct row is already showing, don't do anything!
 
	if (rowNumber == dsPhotos.getCurrentRowNumber())
		return;
 
	gEffectInProgress = new Spry.Effect.Fade('cImage', { to: 0, from: 100, duration: 500, finish: function() {
		dsPhotos.setCurrentRowNumber(rowNumber);
		
		
	}});
	dsPv1.goToPageContainingRowNumber(rowNumber);
	rows = dsPv1.getData();
	var pageNumber = rows[0]["ds_PageNumber"] - 1;
	
	gEffectInProgress.start();
	var selrowNumber = rowNumber - (pageNumber * 30);
	var selector = '#tmb' + selrowNumber;
	Spry.$$(selector).toggleClassName("tmbhigh");
}


// Add click handlers to slideshow buttons



Spry.$$("#prev").addEventListener("click",function(){prev();},false);
Spry.$$("#next").addEventListener("click",function(){next();},false);
Spry.$$("#play").addEventListener("click",function(){startShow();},false);
Spry.$$("#pause").addEventListener("click",function(){pauseShow();},false);
Spry.$$("#shuffle").addEventListener("click",function(){shuffleit();},false);


function prev()
{
pauseShow();

	dsPv1.previousPage();
	var rows = dsPv1.getData();
    var rowNumber = rows[0]["ds_PageFirstItemNumber"] - 1;
	fadeOutContentThenSetRow(rowNumber,false);

}

function next()
{
	pauseShow();

	dsPv1.nextPage();
	var rows = dsPv1.getData();
    var rowNumber = rows[0]["ds_PageFirstItemNumber"] - 1;
	fadeOutContentThenSetRow(rowNumber,false);
}


function pauseShow()
{
clearInterval(StartSlideTimer);
Spry.$$("#slideshowPlaying")[0].innerHTML = "";
}

function startShow()
{
clearInterval(StartSlideTimer);
StartSlideTimer = setInterval("fadeOutContentThenSetRow()", 6000);

if (shuffle)
{
Spry.$$("#slideshowPlaying")[0].innerHTML = "<p>You are playing the slideshow in shuffle mode</p>";
}
else
{
 Spry.$$("#slideshowPlaying")[0].innerHTML = "<p>You are playing the slideshow in sequential mode</p>";
}

}

function shuffleit()
{
	if (!shuffle)
	{
		shuffle = true;
	}
	else
	{
		shuffle = false;
	}
	startShow();
}