//  AJAX gallery browser display javascript using enlargeit javascript
//  Peter J Lawrence (December 2008)
//  Tested with picasa, coppermine, JSON feeds on iE7, Firefox and Google Chrome browsers
// This script is based on code from  javascript by Jeroen see http://www.multiprof.nl/category/projects/pwi/

var thumbsize = 72; //size thumb /cropped(see for supported format:  http://code.google.com/apis/picasaweb/reference.html#Parameters)
var cols = 4; // distribute thumbs on albumphotos page over x collums
var maxresults = 12; //maximum of pictures on albumphotos page
var photosize = 512; //return maximum size picture (see for supported format:  http://code.google.com/apis/picasaweb/reference.html#Parameters)
var g_JSONFeedArray = new Array();
var g_TableHeaderCol = '#8CA6B5';
var g_TableBackGroundCol = '#F2F5F7';

function formatDate(dt){
   var months = new Array(12);months[0]  = "January";months[1]  = "February";months[2]  = "March";months[3]  = "April";months[4]  = "May";months[5]  = "June";months[6]  = "July";months[7]  = "August";months[8]  = "September";months[9]  = "October";months[10] = "November";months[11] = "December";
	var today = new Date(Number(dt));
	var year = today.getYear(); if(year<1000){ year+=1900 };
	return ( months[(today.getMonth())] + " " + today.getDate() + ", " + year);
}

function formatDateTime(dt){
	var today = new Date(Number(dt));
	var year = today.getYear(); if(year<1000){ year+=1900 };
	return (today.getDate() + "-" + (today.getMonth()+1) + "-" + year + " " + today.getHours() + ":" + (today.getMinutes()<10 ? "0"+today.getMinutes() : today.getMinutes()) );
}
function DisplayAlbumJSON(htmltag,albumpage)
{
	// Parsing JSON Feed
	var j = g_JSONFeedArray[htmltag];
	var title = j.feed.title.$t;
	var link = '';
	if (j.feed.link[1])
	{
		link =j.feed.link[1].href;
	}
	else if (j.feed.link[0])
	{
		link =j.feed.link[0].href;
	}
	var desc= j.feed.subtitle.$t;
	var id = j.feed.id.$t;
	var len = j.feed.entry.length;
		
	var pageCount = parseInt((len-1)/maxresults);
	var item_plural = "s";
	if (len == "1") { item_plural = ""; }
    var page_plural = "s";
	if (pageCount == "0") { page_plural = ""; }

	content = "<table align='center' width='100%' cellspacing='1' style='clear: both; table-layout: fixed;'>";
	content+= "<tr><td colspan='"+cols+"'>";
	content+= "<div style='margin-left:3px'><b><i>Album:</i></b> <a href='"+link+"'>"+ title +"</a></div>";
	content+= "</td></tr>";
	
	//create paging navigation
	var navRow = "<tr><td bgcolor='"+g_TableHeaderCol+"' colspan='"+cols+"'>";
    navRow+="<table width='100%'><tr><td>";
    navRow+="<div style='margin-left:3px'><i>"+ len +" photo"+item_plural+" on "+(pageCount+1)+" page"+page_plural+"</i></div></td>";
    navRow+="<td align='right'><div style='margin-right:3px'>";
	var StartItem=albumpage*maxresults;
	if (StartItem>len)
	{
		albumpage=0;
		StartItem=0;
	}
	var i;
	for(i=0;i<=pageCount;i++)
	{
		if(albumpage == i)
		{
			navRow += "<b>["+(i+1)+"]</b> ";
		}
		else
		{
		    navRow += "<a href='javascript:DisplayAlbumJSON(\""+htmltag+"\","+i+")'>"+(i+1)+"</a> ";
		};
	};
    navRow +="</div></td></tr></table>"
	navRow += "</td></tr>"
	content += navRow; 
	
	var EndItem =(albumpage+1)*maxresults;
	if (EndItem>len) EndItem=len;
	var PhotoCount=0;
	for(i=StartItem;i<EndItem;i++)
	{
		var img_base, id_base, img_title, photoDate;
		
		if (j.feed.entry[i].media$group.media$thumbnail[1])
		{
			img_base = j.feed.entry[i].media$group.media$thumbnail[1].url;
		}
		else
		{
			img_base = j.feed.entry[i].media$group.media$thumbnail[0].url;
		}
		var id_width = j.feed.entry[i].media$group.media$content[0].width;
		var id_height = j.feed.entry[i].media$group.media$content[0].height;
		var id_base = j.feed.entry[i].media$group.media$content[0].url;
		
		if (j.feed.entry[i].media$group.media$description)
		{
            if (j.feed.entry[i].media$group.media$description.$t)
            {
                img_title =j.feed.entry[i].media$group.media$description.$t;
            }
            else
            {
                if (j.feed.entry[i].media$group.media$title)
                {
                    img_title = j.feed.entry[i].media$group.media$title.$t;
                }
                else
                {
                    img_title="";
                }
            }
		}
		else
		{
			if (j.feed.entry[i].media$group.media$title)
			{
				img_title = j.feed.entry[i].media$group.media$title.$t;
			}
            else
            {
                img_title="";
            }
		}   
		content += "<td bgcolor=\""+g_TableBackGroundCol+"\" valign=\"middle\" align=\"center\">";	
        var matchPos1 = link.indexOf("picasa");
        if(matchPos1 != -1)
        {
            content += "<a href='"+img_title+"' id='"+img_title+"' class='image' target='_blank' onclick='return false;'>"
            content += "<img src='"+img_base+"?imgmax="+photosize+"' class='set1' onclick='enlarge(this);' alt='"+img_title+"' id='"+i+htmltag+"' longdesc='"+id_base+"?imgmax="+photosize+"' title='"+img_title+"' />";
        }
        else
        {
            content += "<a href='"+img_title+"' id='"+img_title+"' class='image' target='_blank' onclick='return false;'>"
            content += "<img src='"+img_base+"' class='set1' onclick='enlarge(this);' alt='"+img_title+"' id='"+i+htmltag+"' longdesc='"+id_base+"' title='"+img_title+"' />";
        }
		content += "</a>";
        content +="<br/>";
		content += "<small>"+img_title+"</small>";
        content += "</td>";
		if (PhotoCount % cols == (cols-1))
		{
			content += "</tr><tr>";
		}
		PhotoCount++;
	}
    // add any empty cells
    PhotoCount = cols - ((PhotoCount-1) % cols) -1;
    for (i=0;i<PhotoCount;i++)
    {
        content += "<td bgcolor=\""+g_TableBackGroundCol+"\" ></td>";
    }
	content += "</tr>";
	content += navRow; 

    var GeneratedBy = null;
    var GeneratedByURI = null;
    if (j.feed.generator)
    {
            GeneratedBy = j.feed.generator.$t;
            GeneratedByURI = j.feed.generator.uri;
    }
    if (GeneratedBy)
    {
        content+= "<tr><td colspan='"+cols+"'>";
        content+="<table width='100%'><tr>";
        content+= "<td><small><i><a href='"+link+"'>View Album: "+title+"</a></i></small></td>";
        content+= "<td align=\"right\"><small><i><a href='"+GeneratedByURI+"'>"+GeneratedBy+"</a></i></small></td>";
        content+= "</tr></table>";
        content+= "</td></tr>";
    }
	content += "</table>";
	
	// Display the result
	document.getElementById(htmltag).innerHTML = content;
}