﻿// Setup - to use dynamical generate gallery:
// 1. add script in to the web page's <header> section:
//    <script type="text/javascript" src="galleryFiles.js"> // this file defines the galleries
//    <script type="text/javascript" src="gallery.js">      // this file contains the javascript code
// 2. add style sheet to the web page's <header> section:
//    <link rel="stylesheet"  type="text/css" href="shan5.css" />   // this file contains the css for the gallery
// 3. add to the <body> section to initialize the gallery
//    Syntax: new photogallery(imagearray, cols, rows, opt_[title, paginatetext, twidth, theight])
//
// Setup - to use popup on existing image table:
// 1. add onload handler in <body> tag:
//    <body onload="addGalleryPopupHandler('galleryID'") >

// Photogallery.js
function photogallery(garray, cols, rows, title, paginatetext, twidth, theight)
{
	gcount=(typeof gcount=="undefined")? 1 : gcount+1; //global var to keep count of current instance of photo gallery
	this.gcount=gcount;
	this.galleryarray=garray;
	this.cols = cols;
	this.rows = rows;

	if (typeof (twidth) != 'string')
	{
	    twidth = (cols * 150) + "px";   // default width
	}
	if (typeof (theight) != 'string')
	{
	    theight = (rows * 200) + "px";  // default height
	}

	if (typeof (title) == 'string')
	{
	    document.write('<div><font face="Papyrus" size="4">' + title + '</font><br/>&nbsp</div>');
	}
	
	var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""]; //Store 2 compontents of paginate DIV text inside array
	this.pagecount = Math.ceil(this.galleryarray.length/(cols*rows)); //calculate number of "pages" needed to show the images
	document.write('<table class="photogallery" id="photogallery-' + gcount + '" style="width:' + twidth + ';">'); //Generate table for Photo Gallery
	
	for (var r=0; r<rows; r++)
	{
		document.write('<tr>')
		for (var c=0; c<cols; c++)
		{
			document.write('<td valign="top" width="100"></td>');
		}
		document.write('</tr>');
	}
	document.write('</table>');
	document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>'); //Generate Paginate Div

	var gdiv=document.getElementById("photogallery-"+this.gcount);
	var pdiv=document.getElementById("photogallerypaginate-"+this.gcount);
	gdiv.defaultImageClick = photogallery.defaultImageClick;
	
	this.showpage(gdiv, 0);
	this.createNav(gdiv, pdiv, ptext);
	gdiv.onclick =
	    function(e) { return photogallery.defaultGalleryClick(e, this) } //attach default custom event handler action to "onclick" event
	
	return gdiv;
}

photogallery.prototype.createImage = function(imgparts)
{
    var imageHTML;

    if (typeof imgparts[1] == 'string' && imgparts[1] != "")
    {
        imageHTML = '<img src="' + imgparts[0] + '" title="' + imgparts[1] + '"/>';
    }
    else
    {
        imageHTML = '<img src="' + imgparts[0] + '"/>';
    }

    if (typeof imgparts[3] == 'string' && imgparts[3] != "")
    {
        //Create URL?
        var linktarget = imgparts[4] || "";
        imageHTML = '<a href="' + imgparts[3] + '" target="' + linktarget + '">' + imageHTML + '</a>';
    }
    
    imageHTML += "<br/>" + this.createDescription(imgparts);

    return imageHTML;
}

photogallery.prototype.createDescription = function(imgparts)
{
    //var imageHTML = '<font face="Bradley Hand ITC" size="2">';
    var imageHTML = '<font face="Century Gothic" size="2">';

    if (typeof imgparts[1] == 'string' && imgparts[1] != "")
    {
        //display 1st description
        imageHTML += imgparts[1];
    }

    if (typeof imgparts[2] == 'string' && imgparts[2] != "")
    {
        //display 2nd description
        imageHTML += '<br />' + imgparts[2];
    }
    
    imageHTML += '</font>';
    
    if (typeof imgparts[4] == 'number')
    {
    	if(imgparts[4] == 1)
	    {
	        imageHTML += '<b class="sold"> Sold</b>';
	    }
	    else if (imgparts[4] == 2)
	    {
	    	imageHTML += '<b class="sold"> NFS</b>';
	    }
	}

    return imageHTML;
}

photogallery.prototype.showpage = function(gdiv, pagenumber)
{
    var totalitems = this.galleryarray.length;
    var showstartindex = pagenumber * (this.rows * this.cols); //array index of div to start showing per pagenumber setting
    var showendindex = showstartindex + (this.rows * this.cols); //array index of div to stop showing after per pagenumber setting
    var tablecells = gdiv.getElementsByTagName("td");

    if (totalitems - showstartindex < this.rows * this.cols)
    {
    	// this.rows * 2 * this.cols
        for (var init = 0; init < (this.rows * this.cols); init++)
        {
            tablecells[init].innerHTML = '';
        }
    }

    for (var i = showstartindex, currentcell = 0; i < showendindex && i < totalitems; i++, currentcell++)
    {
    	tablecells[currentcell].innerHTML = this.createImage(this.galleryarray[i]);

        //Loop thru this page's images and populate cells with them
        //var currentrow = Math.floor(currentcell / this.cols);
        //var currentcol = currentcell - currentrow * this.cols;
        //var piccell = currentrow * 2 * this.cols + currentcol;
        //var textcell = currentrow * 2 * this.cols + this.cols + currentcol;
        //tablecells[piccell].innerHTML = this.createImage(this.galleryarray[i]);
        //tablecells[textcell].innerHTML = this.createDescription(this.galleryarray[i]);
    }
}

photogallery.prototype.createNav = function(gdiv, pdiv, ptext)
{
    var instanceOfGallery = this;
    var navHTML = '';


    for (var i = 0; i < this.pagecount; i++)
    {
        navHTML += '<a href="#navigate" rel="' + i + '">' + ptext[1] + (i + 1) + '</a> ' //build sequential nav links
    }

    pdiv.innerHTML = '<p>' + ptext[0] + ' ' + navHTML + '</p>';
    var navlinks = pdiv.getElementsByTagName("a")
    navlinks[0].className = "current" //Select first link by default
    this.previouspage = navlinks[0] //Set previous clicked on link to current link for future ref

    for (var i = 0; i < navlinks.length; i++)
    {
        //navlinks[i].onclick = photogallery.clickNav;
        navlinks[i].onclick = function()
        {
            instanceOfGallery.previouspage.className = ""; //"Unhighlight" last link clicked on...
            this.className = "current"; //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
            instanceOfGallery.showpage(gdiv, this.getAttribute("rel"));
            instanceOfGallery.previouspage = this; //Set previous clicked on link to current link for future ref
            return false;
        }
    }
}

photogallery.clickNav= function(instanceOfGallery)
{
    var instanceOfGallery = this;
    instanceOfGallery.previouspage.className = ""; //"Unhighlight" last link clicked on...
    this.className = "current"; //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
    instanceOfGallery.showpage(gdiv, this.getAttribute("rel"));
    instanceOfGallery.previouspage = this; //Set previous clicked on link to current link for future ref
    return false;
}

// default gallery onClick handler, can be overriden
photogallery.defaultGalleryClick=function(e, gdiv)
{ 
    //function that runs user defined "onselectphoto()" event handler
	var evtobj=e || window.event;
	var clickedobj=evtobj.target || evtobj.srcElement;
	if (clickedobj.tagName=="IMG")
	{
		var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null;
		return gdiv.defaultImageClick(clickedobj, linkobj);
	}
}

// default image onClick hander, can be overriden
photogallery.defaultImageClick = function(img, link)
{
    if (link != null) //if this image is hyperlinked
    {
        //window.open("photopopup.htm?image=" + link + "&title=" + img.title, "", "width=600, height=600, status=1, resizable=1");
        window.open("photopopup.htm?image=" + link + "&title=" + img.title, "", "width=520, height=560, resizable=1");
        return false;
    }
}

// use popup on pre-defined photo table
function addPopupHandler(galleryID)
{
    var galleryTable = document.getElementById(galleryID);
    if (typeof (galleryTable) == 'object')
    {
        galleryTable.defaultImageClick = photogallery.defaultImageClick;
        galleryTable.onclick =
	        function(e) { return photogallery.defaultGalleryClick(e, this) } //attach default custom event handler action to "onclick" event
    }
}

// functions for the popup window
function getImageName()
{
    return getQueryString('image');
}

function getImageTitle()
{
    return getQueryString('title');
}

function getQueryString(keyid, valuepattern)
{
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i = 0; i < parms.length; i++)
    {
        var pos = parms[i].indexOf('=');
        if (pos > 0)
        {
            var key = parms[i].substring(0, pos);
            var val = parms[i].substring(pos + 1);
            if (key == keyid)
            {
                return val;
            }
        }
    }
}
