// Rainbo Design Slideshow Tiles v1.0  October 24, 2009
// Copyright (C) 2009 by Richard L. Trethewey rick@rainbo.net
// All rights reserved.  http://www.rainbodesign.com/pub/
// Use is granted as long as this notice remains intact.

// slideshow globals

var curSlide = 0;         // Current visible slide id
var nextSlide = 1;        // Next visible slide index to gallery array
var opIncrement = 5;      // Width change increment in px
var maxCycles = 3;        // Maximum number of slideshow cycles (0 = no limit)
var cycleCount = 0;       // Current cycle count
var theTiles = new Array;    // tiles objects array
var showObject = null;    // Init slideshow DIV object variable
var s1BoxObject = null;   // Init slide1 DIV object
var s2BoxObject = null;   // Init slide2 DIV object
var s1Object = null;      // Init slide1 object
var s2Object = null;      // Init slide2 object
var t1BoxObject = null;   // Init title1 DIV object
var t2BoxObject = null;   // Init title2 DIV object
var t1Object = null;      // Init title1 object
var t2Object = null;      // Init title2 object
var switchFlag = 0;	  // Switched slides flag
var timeoutID = null;     // ID for timeout handler
var timer = 0;            // Init transition delay timer
var pauseFlag = 0;        // Init pause start/stop flag

var tileBox = new Array;
var tileWidth = slideWidth/2;
var tileHeight = slideHeight/2;
var curTile = 1;          //  current tile
var swapFlag = 0;         // swapping tile image flag
var switchFlag = 0;       // swap completed flag
var tWidth = 0;           // temporary var for tile widths

// preload images
var myImages = new Array;
  for (i=0;i<gallery.length;i++) {
	myImages[i] = new Image;
//	myImages[i].src = gallery[i];  // Comment out this line to avoid pre-loading all image files.
  } // end for i


 function startShow(showName) {
	switchFlag = 0;
	timeoutID = null;
	timer = 0;
	pauseFlag = 0;
	cycleCount = 0;
	nextSlide = 1;
	curSlide = 0;
	curTile = 1;
	swapFlag = 0;

 if (document.getElementById) { // no show on very old and some mobile browsers

	showObject = document.getElementById(showName);
	showObject.style.width = String(slideWidth) + 'px';
	showObject.style.height = String(slideHeight) + 'px';
	tmpStr = '<div id="tileBox1">'
	tmpStr += '<img id="tile1" class="tileImage" src="" width="' + String(tileWidth) + '" />';
	tmpStr += '</div>';
	tmpStr += '<div id="tileBox2">';
	tmpStr += '<img id="tile2" class="tileImage" src="" width="' + String(tileWidth) + '" />';
	tmpStr += '</div>';
	tmpStr += '<div id="tileBox3"><img id="tile3" class="tileImage" src="" width="' + String(tileWidth) + '" /></div>';
	tmpStr += '<div id="tileBox4"><img id="tile4" class="tileImage" src="" width="' + String(tileWidth) + '" /></div>';
	tmpStr += '<div id="titleBox2"></div>';
	showObject.innerHTML = tmpStr;
	statsBox = document.getElementById('status');
	t2BoxObj = document.getElementById('titleBox2');  // use box 2 for titles this time

   for (i=1; i<=4; i++) {
	theTiles[i] = document.getElementById('tile' + i);
	theTiles[i].style.width = String(tileWidth) + 'px';
	theTiles[i].style.height = String(tileHeight) + 'px';
	theTiles[i].src = 'makeTile.php?src=' + gallery[curSlide] + '&tile=' + String(i);
    } // end for i

	tileBox[1] = document.getElementById('tileBox1');
	tileBox[1].style.top = '0px';
	tileBox[1].style.left = '0px';
	tileBox[1].style.width = String(tileWidth) + 'px';
	tileBox[1].style.height = String(tileHeight) + 'px';

	tileBox[2] = document.getElementById('tileBox2');
	tileBox[2].style.top = '0px';
	tileBox[2].style.left = String(slideWidth/2 + 'px');
	tileBox[2].style.width = String(tileWidth) + 'px';
	tileBox[2].style.height = String(tileHeight) + 'px';

	tileBox[3] = document.getElementById('tileBox3');
	tileBox[3].style.top = String(slideHeight/2 + 'px');
	tileBox[3].style.left = '0px';
	tileBox[3].style.width = String(tileWidth) + 'px';
	tileBox[3].style.height = String(tileHeight) + 'px';

	tileBox[4] = document.getElementById('tileBox4');
	tileBox[4].style.top = String(slideHeight/2 + 'px');
	tileBox[4].style.left = String(slideWidth/2 + 'px');
	tileBox[4].style.width = String(tileWidth) + 'px';
	tileBox[4].style.height = String(tileHeight) + 'px';

	opIncrement = 2;   // default to 2, but try to find a higher divisor for tile sizes
         for (i=4; i<=16; i++) {
	if ((slideWidth/i) == (parseInt(slideWidth/i))) { opIncrement = i; }
         }

	getTiles();  // preload replacement tiles
	timeoutID = setTimeout('doIdle()', idleTime * 1000);
        showTitle();
	if (showStats) { stats(); } // display variables data

   } // endif (document.getElementById)
 } // end startShow()

function showTitle() {
   if (titles.length > 0) {
  t2BoxObj.innerHTML = titles[curSlide];
   }
 } // end showTitle

function hideTitle() {
   if (titles.length > 0) {
  t2BoxObj.innerHTML = '';
   }
 }

function getTiles() {
  for (i=1;i<5;i++) {
	myImages[i].src = 'makeTile.php?src=' + gallery[nextSlide] + '&tile=' + String(i);
  } // end for i
 } // end getTiles

 function tiles() {
  if (pauseFlag == 0) {
   tWidth = parseInt(theTiles[curTile].style.width);
   switchFlag = 0;

    if (swapFlag == 0) {
	tWidth -= opIncrement;
	theTiles[curTile].style.width = String(tWidth) + 'px';
	if (tWidth == 0) {
		swapFlag = 1;
		theTiles[curTile].src = 'makeTile.php?src=' + gallery[nextSlide] + '&tile=' + String(curTile);
	} // endif tWidth == 0
     } else {
	tWidth += opIncrement;
	theTiles[curTile].style.width = String(tWidth) + 'px';
	if (tWidth == tileWidth) {
		swapFlag = 0;		// Clear swapping flag
		curTile++;		// Move to next tile
	} // endif (tWidth == tileWidth)

     } // endif swapFlag == 0

   if (curTile == 5) {
	curTile = 1;
	curSlide = nextSlide;
	nextSlide++;
	switchFlag = 1;		// Show switch completed!
    if (nextSlide == gallery.length) { nextSlide = 0; cycleCount++; }
       } // endif curTile


    if (switchFlag == 1) {
	getTiles();  // preload replacement tiles
        showTitle();
	timeoutID = setTimeout('doIdle()', idleTime * 1000);
      } else {
        hideTitle();
	timeoutID = setTimeout('tiles()', delay);
      }

  } // endif pauseFlag == 0
	if (showStats) { stats(); } // display variables data
 } // end tiles()

function doIdle() {
    if (pauseFlag == 0) {                         // Are we paused?
       timeoutID = setTimeout('tiles()', delay);  // No! Begin fade/transition
      } else {
       timeoutID = setTimeout('doIdle()', 20);    // Yes! Check here again (soon!)
    } // endif pauseFlag   
 } // end doIdle


  function pauseShow() {
     pauseFlag = 1;
     return true;
   }

  function resumeShow() {
     pauseFlag = 0;
     return true;
  }

     function getTheStyle(elName, attName) {  
       var elem = document.getElementById(elName);  
       var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue(attName);
       return theCSSprop;  
      }  

 function showStyles() {
	var thecss = new Array();
	if (document.styleSheets) {
    for (i=0; i<document.styleSheets.length; i++) {
 document.writeln("Stylesheet #" + i + "<br>");
 theSheet = document.styleSheets[i];
 theRules = theSheet.cssRules ? theSheet.cssRules : theSheet.rules; // FF/IE Compatibility
     for (j=0; j<theRules.length; j++) {
 document.writeln(theRules[j].selectorText + ' = ' + theRules[j].cssText + '<br />');
     } // end for j
   } // end for i
        } // endif stylesheets[0]
 } // end showStyles();

    function stats() {
         sMessage = '<p>tWidth = ' + tWidth + ' swapFlag = ' + swapFlag + ' switchFlag = ' + switchFlag;
         sMessage += ' curTile = ' + curTile;
         sMessage += ' nextSlide = ' + nextSlide;
         sMessage += '<br>cycleCount = ' + cycleCount;
         sMessage += ' opIncrement = ' + opIncrement;
//	 sMessage += '<br>slideShow.width = ' + getTheStyle('slideshow', 'width');
         sMessage += '<\/p>';
         statsBox.innerHTML = sMessage;
      } // end stats()