/* The slide images are contained in the slides array. */
var slides = new Array('images/mosaic/mosaic2.jpg',
					   'images/mosaic/mosaic1.jpg'
                       );

var currenttile = 0;
var totaltiles = 0;
var colcount = 5;
var rowcount = 5;

var delay_between_images = 3000;
var delay_between_tiles = 500;
var order = new Array(); //random order for showing tiles
/* Width and height of the tiles in pixels: */
//var tabwidth = 128, tabheight = 95;
var tabwidth = 128, tabheight = 95;

$(document).ready(function () {
    /* This code is executed after the DOM has been completely loaded */

    /* Preloading all the slide images: */
    for (var i = 0; i < slides.length; i++) {
        (new Image()).src = slides[i];
    }

    /* Showing the first one on page load: */
    transition(1);
    next();
});

var current = {};
function transition(id)
{
	/* This function shows the individual slide. */
	if(!slides[id-1]) return false;

	if(current.id)
	{
		/* If the slide we want to show is currently shown: */
		if(current.id == id) return false;
		
		/* Moving the current slide layer to the top: */
		current.layer.css('z-index',10);
		
		/* Removing all other slide layers that are positioned below */
		$('.mosaic-slide').not(current.layer).remove();
	}

    /* Creating a new slide and filling it with generateGrid: */

	var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:rowcount,cols:colcount,image:slides[id-1]}));

	/* Moving it behind the current slide: */
	newLayer.css('z-index',1);

	$('#mosaic-slideshow').append(newLayer);
	
	if(current.layer)
	{
		/* Hiding each tile of the current slide, exposing the new slide: */
	    order = new Array();
	    var tilecount = rowcount*colcount;
	    for (var i = 0; i < tilecount; i++) {
	        order[i] = i;
	    }
	    fisherYates(order);

	    totaltiles = tilecount;
	    currenttile = 0;
	    showtile();
	}
	
	/* Adding the current id and newLayer element to the current object: */
	current.id = id;
	current.layer = newLayer;
}

function showtile() {
    $("#tile_" + order[currenttile]).css('visibility', 'hidden');
    
    
    currenttile++;
    if (currenttile >= totaltiles) {
        setTimeout("next();", delay_between_images);
        return;
    }
    //showtile();
    var t = setTimeout("showtile();", delay_between_tiles);
}

function next()
{
	if(current.id)
	{
		transition(current.id%slides.length+1);
	}
}

function generateGrid(param)
{
	/* This function generates the tile grid, with each tile containing a part of the slide image */
	
	/* Creating an empty jQuery object: */
	var elem = $([]),tmp;
	var tilecount = 0;

	for(var i=0;i<param.rows;i++)
	{
		for(var j=0;j<param.cols;j++)
		{
		    tmp = $('<div>', {
                    "id":"tile_"+tilecount,
					"class":"tile",
					"css":{
						"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
					}
			});
			
			/* Adding the tile to the jQuery object: */
            elem = elem.add(tmp);
            tilecount++;
		}
		
		/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
        elem = elem.add('<div class="clear"></div>');
    }
	
	return elem;
}

function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}