// Credit: based on original from http://phydeaux3.blogspot.com/2006/11/blogger-beta-widget-for-picasa-web.html 
 
 // Uses the Picasa Web Albums ("pwa") Data API http://code.google.com/apis/picasaweb/reference.html
 
 // TODO  
 // Don't load all the images at the start 
 // Show a single static image if javascript not enabled
 
 // TODO (WIBNI)
 // perhaps mouseover on an image displayed some widgets to control the slideshow)

	 
	// ??
	var albumDisplay = false;
	
	// pause between slides
	var pwaSlideSpeed = 5000;
	 
	// Size of Thumbnails -- Sets the size of the displayed images, you have 3 choices. 
	// The default is 160px, a small 64px size, and an extra small 48px.
	var pwaImageSize = 250;
	// in the middle column, use 200
	//var pwaImageSize = 288;

	// Can also use 200, 288, 320, 400, 512, 576, 640, 720, 800 but must also remove "crop=1" below
	// that will distort pictures...
	
	// The height of the div element 
	// must be at least the vertical height of the largest photo
	var widgetHeight = 216;
	var widgetHeightNum = parseInt(widgetHeight); 
	
	// how many of the album we'd like to display
	var pwaImageFeed = 10; 
	
	// border 
	var pwaBorder = true;
	var pwaBorderSize = 0; 
	
	// Border Color (in Hex) -- Sets the color of the images borders (if shown) in hexadecimal format. 
	// Default is black (#000). 
	// You can use either 3 or 6 hex numbers. 
	var pwaBorderColor = '#000';
	
	// internal variables
	
	// how many of the album we really will display
	// num requested or num available, whichcver is lower
	var pwaFetch = 0; 
	
	var noOfImagesDisplayedSoFar = 0;
	 
	var pwaCurrent = -1; 
	var pwaPrevious = -1;
	var numImageSize = parseInt(pwaImageSize,10); 

	// this is called when the feed is first read
	function pwShow(root) {
		var feed = root.feed; 
		var entries = feed.entry || [];
		var pwTitle = feed.title.$t;
		var album = feed.link[1].href;
		pwf= document.getElementById('pwFeed');
		cDiv = document.createElement('div'); 

		cDiv.style.position = 'relative'; 
		pwfw = numImageSize +5; 
		pwf.style.width = pwfw + 'px';
		pwf.style.margin = '0px auto 0px auto';

		//cDiv.style.textAlign = 'center'; 

		ul = document.createElement('ul');
		ul.id = 'pwaUL';
		ul.style.listStyleType = 'none';

		ulh = numImageSize +10;
		ul.style.height = widgetHeightNum + 'px';
		//ul.style.height = ulh + 'px';

		ul.style.margin = '5px 0px 0px 0px';
		ul.style.padding = '0px';
		
		// work out how many photos we want to fetch
		if (feed.entry.length > pwaImageFeed){
			pwaFetch = pwaImageFeed;
		} else {
			pwaFetch = feed.entry.length;
		} 
		for (var i = 0; i < pwaFetch ; ++i){
			
			var randomIndex = Math.floor(feed.entry.length * Math.random());

			var entry = feed.entry[randomIndex];
			var title = entry.title.$t;
			var jsonImage = entry.media$group.media$content[0].url;
		 	var link = entry.link[1].href;
		 	li = document.createElement('li');
			li.style.backgroundImage = 'none';

 
			li.style.position = 'absolute';
			li.style.top = '3px';
			li.style.left = '0px';
			li.style.padding = '0px';
			li.style.margin = '0px';
			li.style.textIndent = '0px';
 
			li.style.border = '0px';
 
			li.style.display = 'none';
			li.id = 'pwa' + i;
 
			
			// the image will be a hyperlink to the photo in the album
			// disable for now
			//a = document.createElement('a');		
			//a.id = 'pwaImage' + imgNum;
			//a.href = link; a.title = title;
			
			img = document.createElement('img');
		
			// need to include crop=1 for image sizes less than 200	
			//img.src = jsonImage + '?imgmax=' + pwaImageSize + '&crop=1';
			img.src = jsonImage + '?imgmax=' + pwaImageSize + '';
			if(pwaBorder){
				img.style.padding = '2px';
				img.style.border = pwaBorderSize + 'px ' + pwaBorderColor + ' solid';
			} 

			img.style.width = pwaImageSize + 'px';
			// don't set height: allow to adjust itself to suit aspect ratio
			//img.style.height = pwaImageSize + 'px';
			
			// commented out as image is now a hyperlink
			//a.appendChild(img);
			//li.appendChild(a);
			
			li.appendChild(img);
			
			ul.appendChild(li);

		}
		cDiv.appendChild(ul);
		pwf.appendChild(cDiv);

		pwaPlay();

}

	// play all the loaded images in sequential order
	// when the end is reached, start again
	function pwaPlay(){
			
	 	if (pwaPrevious >= 0 ) {
			initImage('pwa'+pwaPrevious,'fadeOUT');
		}

		// work out which image to display next

		pwaCurrent = pwaCurrent + 1;
		if (pwaCurrent == pwaFetch) {
			pwaCurrent = 0;
		} 
		pwaPrevious = pwaCurrent;
		initImage('pwa'+pwaCurrent,'fadeIN');			

		noOfImagesDisplayedSoFar++;
 		// schedule pwaPlay() to be run once more after the specified interval
		setTimeout('pwaPlay()', pwaSlideSpeed);
	} 
		
	// play random images for ever	
	function pwaPlayRandom(){
		
		pwaNext = Math.floor(pwaFetch * Math.random());
		
		initImage('pwa'+pwaCurrent,'fadeOUT');
		initImage('pwa'+pwaNext,'fadeIN');

		pwaPrevious = pwaCurrent;
		pwaCurrent = pwaNext;
			 	
		noOfImagesDisplayedSoFar++;
	
		// schedule pwaPlay() to be run once more after the specified interval	//if (noOfImagesDisplayedSoFar < 5 ) {
		setTimeout('pwaPlayRandom()', pwaSlideSpeed);
	}  
	
	function initImage(currentID, type) {
		imageId = currentID;
		image = document.getElementById(imageId);
		setOpacity(image, 0);
		image.style.visibility = 'visible';
		if (type == 'fadeIN'){
			fadeIn(imageId,0);
			image.style.display = 'block';
		} 
		if (type == 'fadeOUT'){
			fadeOut(imageId,100);
		}
	}
	
	// 
	function setOpacity(obj, opacity) {
		// if opacity arg is 100 reset it to 99.999  
		opacity = (opacity == 100)?99.999:opacity;
		
		// try setting opacity four different ways, to cover various browsers
		// opacity = 0 means invisible
		obj.style.filter = 'alpha(opacity:'+opacity+')';
		obj.style.KHTMLOpacity = opacity/100;
		obj.style.MozOpacity = opacity/100; 
		obj.style.opacity = opacity/100;
	}
	
	// increase the opacity of the specified object (objId)
	// gradually from the specified initial opacity (opacity) 
	// until it is fully visible
	function fadeIn(objId,opacity) {
		if (document.getElementById) {
			obj = document.getElementById(objId);
			if (opacity <= 100) {
				setOpacity(obj, opacity);
				opacity += 10;
				window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 30);
			} 
		}
	}
	
	// decrease the opacity of the specified object (objId)
	// gradually from the specified initial opacity (opacity) 
	// until it is invisible
	function fadeOut(objId,opacity) {
		if (document.getElementById) {
			obj = document.getElementById(objId);
			if (opacity >= 0) {
				setOpacity(obj, opacity);
				opacity -= 10;  
				window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 30);
			}
			if (opacity < 10) {
				obj.style.display = 'none';
			}
		}
	}