/*****************************************************
CREDIT TO PHILANDJUDE.GOOGLEPAGES.COM for coding ideas
*****************************************************/

var albumList
var baseUrl = "http://picasaweb.google.com/data/feed/api/user/bapsacramento.org"
var currImg = 0

function removeOldScript()
{
        var pictureScript = document.getElementById('pictureScript');
        if (pictureScript) {
          pictureScript.parentNode.removeChild(pictureScript);
        }
}

function removeOldPictures(){
	currImg = 0
	document.getElementById('photoList').innerHTML=""; //remove old pictures
	document.getElementById('photoWrapper').innerHTML=""; //remove enlarged picture
}

function loadPictureURL(findURL)
{
	removeOldScript();
	removeOldPictures();

	var script = document.createElement('script');
	script.setAttribute('src',findURL)
	script.setAttribute('id','pictureScript')
	script.setAttribute('type', 'text/javascript');
	document.documentElement.firstChild.appendChild(script); //add to header section
	
}

function loadPictures(data)
{
	var photoList = document.getElementById('photoList');

	if (photoList!=undefined)
	{
		photoList.innerHTML = "";
		var i;
		try{
			var numImages = data.feed.entry.length
		}
		catch(err){
			return;
		}

		var photoHTML = ""
		for (i=0;i<numImages;i++)
		{
			var item = data.feed.entry[i]
			var title = "Click to enlarge."
			var image = item.content.src + "?imgmax=72"
	
			var height = parseInt(item.gphoto$height.$t,10);
			var width = parseInt(item.gphoto$width.$t, 10);
			var orientation = (width > height? "hor":"vert")

			var description = item.media$group.media$description.$t;
			photoHTML += "<li><a href='#' id='photo" + i + "' class='"+orientation+"'><img src='"
			photoHTML += image + "' onClick='imgClick(this, " + i + ", &quot;" + orientation + "&quot;)' alt='' title='" + title 
			photoHTML += "'></img><b id='desc" + i + "'>" + description + "</b></a></li>";

		}
		photoList.innerHTML = photoHTML
	}

}

function loadAlbums(data)
{
	albumList = document.getElementById('albums')
	if (albumList!=undefined){
		var i; //index for pictures
		try{	
			var numAlbums=data.feed.entry.length; // Total number of images
		}
		catch(err){
			var entryName = "Error loading photo albums.";
			var optAlbum = document.createElement('option');
			optAlbum.appendChild(document.createTextNode(entryName));
			albumList.appendChild(optAlbum);
			return;
		}

		if (i = 0){
			var entryName = "There are no photo albums.";
			var optAlbum = document.createElement('option');
			optAlbum.appendChild(document.createTextNode(entryName));
			albumList.appendChild(optAlbum);
		}else{
			var entryName = "--Select an Album--"
			var optAlbum = document.createElement('option');
			optAlbum.appendChild(document.createTextNode(entryName));
			albumList.appendChild(optAlbum);
			for (i = 0; i < numAlbums; i++){
				var entryName = data.feed.entry[i].title.$t;
				var entryURL = data.feed.entry[i].id.$t + '&callback=loadPictures';
          			entryURL = entryURL.replace(/\/entry\//i,"/feed/");
	          		var optAlbum = document.createElement('option');
				optAlbum.setAttribute('value', entryURL);
      		
				optAlbum.appendChild(document.createTextNode(entryName));
				albumList.appendChild(optAlbum);
			}
		}
	} 
}

function snapshot(img)
{

	//enlarge image on screen

	var snap=document.getElementById("lightbox");
	document.getElementById("lightboxDiv").style.display="block";
	snap.src = img.src;
   	snap.style.width=(img.parentNode.className=="hor")?"800px":"600px";
	snap.parentNode.focus();

}

function imgClick(img, i, orientation)
{
	//function to set enlarged image to left and description below
	currImg = i


	/*
	//container
	var divContent = document.createElement('div');
	divContent.setAttribute('id','photoContent')
	
	var aEnlarge = document.createElement('a');
	aEnlarge.setAttribute('href','"javascript: void(0)"');

	var imgEnlarge = document.createElement('img');
	imgEnlarge.setAttribute('id','bigImage')
	imgEnlarge.setAttribute('src',img.src.replace('=72','=800'))
	if (orientation=="hor"){
		imgEnlarge.style.width = "300px"
		imgEnlarge.style.height = "auto"
	}else{
		imgEnlarge.style.height = "300px"
		imgEnlarge.style.width = "auto"
	}
	imgEnlarge.setAttribute('onClick','snapshow(this)')

	aEnlarge.appendChild(imgEnlarge)
	divContent.appendChild(aEnlarge)
	document.getElementById('photoWrapper').innerHTML="";
	document.getElementById('photoWrapper').appendChild(divContent)

	*/

	var photoHTML = "<div id='photoContent'><a href='#'>"
	photoHTML += "<img id='bigImage' class='" 
	photoHTML += (orientation="hor"?"largeHor":"largeVert") + "' onClick='snapshot(this)'></img></a>";
	photoHTML += "<p id='bigDescription'>" + document.getElementById('desc' + i).innerText + "</p></div>";
	document.getElementById('photoWrapper').innerHTML = photoHTML;
	document.getElementById('bigImage').src = img.src.replace('=72','=400');
	
}