// vars

var grid_width = 6;
var grid_height = 6;

var square = "<a class=\"square\" href=\"#\">&nbsp;</a>";

// 75x75px images, this will be populated by the init_thumbnails() function with objects contraining the photo data
var thumbnails = new Array();
// these are the grid squares
var squares = new Array();
var last_bg_image = 0;
var feed_size = 0;
var img_preload = "";
var loadingimagepath ="/images/loading_spokes_lg.gif";

var feedurl = '/modern/exhibitions/streetandstudio/xml/winners.xml';

function flickr_init(){
	
	// how big is the feed
	$.get(feedurl, function(data){
			// what to do with the feed
			var rootnode = data.getElementsByTagName('section');
			
			if( rootnode.length > 0 ){
				feed_size = rootnode[0].getAttribute('count');
				//alert(feed_size);
				
				if(feed_size > 0){
							
					// what to do with the feed
						var photo_sequence = rootnode[0].getElementsByTagName('photo');

						if( photo_sequence.length == 0 ){
							alert("There are no photos in the initial sequence");
							return false;
						} else {
							thumbnails = new Array();
							
							for (var k=0; k < photo_sequence.length; k++) {
								nextphoto = photo_sequence[k];
								
								var photo_data = {};
								photo_data.thumbnailurl = nextphoto.getAttribute('squareurl');
								photo_data.mediumurl = nextphoto.getAttribute('smallurl');
								photo_data.flickrurl = nextphoto.getAttribute('url');
								photo_data.title = escape(nextphoto.getAttribute('title'));
								if(photo_data.title == "" ){
									photo_data.title = "[untitled]";
								}
								photo_data.username = escape(nextphoto.getAttribute('ownername'));
								thumbnails.push(photo_data );
								photo_data = null;
								
							} // end for photos in feed
							
							
							// build the grid from thumbnails array
							// pick number at random to start the sequence
							
							last_bg_image = Math.floor(Math.random()* feed_size); 
							//alert(last_bg_image);
							for( i=1; i <= grid_height; i++){
								
								for( j=1; j <= grid_width; j++){
			
									// clear every nth one
									if(j==1 && i != 1){
									//$(new_square_code).css("clear","both"); // <-- this doesn't work in IE
										$("#slideshow").append("<br clear='both' />");
									} 
			
									// give it a background image
									// this bit will be rebuilt as objects once the feed is live
									if(last_bg_image >= thumbnails.length ){
										last_bg_image = 0;
									}
									// add it to the page
									var new_square_code = $(square);
									//alert($(new_square_code).html());
									$(new_square_code).replace_square(thumbnails[last_bg_image]); // 
									$("#slideshow").append(new_square_code);
									last_bg_image++;
									
									new_square_code = null;

								} // end width
		
							} // end height
	
							$("#slideshow .square:last").each(function(){
							//alert(this);
								});
	
							// start the slideshow
							run_slideshow();
							setTimeout('run_slideshow()', 1000);
							//setTimeout('run_slideshow()', 3000);
							
						}
						
						rootnode = null;
						photo_sequence = null;
				
				} else {
					alert("there are no photos in the pool");	
				}
				
			} else {
				alert("the XML feed is empty");	
			}
		
	});
	
	
} // end function


$(document).ready( function(){
	//load the height & width utils first
	$.getScript("/javascripts/jquery.tate.hwxy.js", function(){
  		flickr_init();
	});
} );


// this does the random swapping of images
function run_slideshow(){
	// get a random square and replace it 
	get_random_photo();

	setTimeout('run_slideshow()', 1500);
} // end run_slideshow()


function get_random_photo(){
	// get random number from feed
	var randomnumber2 = Math.floor(Math.random()* thumbnails.length); 
	
	// get one random square from grid
	var randomnumber = Math.floor(Math.random()* grid_width * grid_height);
	
	if( typeof(thumbnails[randomnumber2]) == "undefined"){ 
		//alert(randomnumber2);
	}
	
	$(".square:nth-child("+randomnumber+")").replace_square(thumbnails[randomnumber2]);
	
				
} // end get_random_photo();

	

jQuery.fn.extend({
				 // arg = photo_data object
	replace_square: function( photo_data ) {
		
		// load the thumbnail

		$(this).css("background-image", "url('" + photo_data.thumbnailurl + "')");
		$(this).attr("href", photo_data.flickrurl);
		
		var thissquare = $(this);
		
		$(this).hover(function(){
				
				// remove any previous ones
				$(".large_image").remove();
				// create a div with the large image in it
				var newdiv = $("<div class=\"large_image\"></div>");
				
				// remove previous hover events
				
				// put event handler on the div
				$(newdiv).hover( function(){}, function(){
					// mouse out on the new div - hide it.
					$(this).remove();
					// unlock the locked square here
					//$(thissquare).removeClass("locked");
				});
				$(newdiv).append("<div class=\"large_image_holder\"><a href=\"" + photo_data.flickrurl + "\" title=\"View this photo on Flickr\"><img src=\""+loadingimagepath+"\" alt=\"loading\"  id=\"lg_flickr_image\" class=\"loadingimage\" /></a></div>");
				
				$(newdiv).append("<div class='photodetails'><a href=\"" + photo_data.flickrurl + "\" title=\"View this photo on Flickr\" class=\"external\">" + unescape(photo_data.title) + "</a> by " + unescape(photo_data.username) + "</div>");
				$(newdiv).css("position", "absolute");
				
				// put the div where the mouse pointer is
												
				$("body").append(newdiv);
				//$(newdiv).css({top:30, left:-3000});
				
				var largeHeight = $(newdiv).absHeight();
				var pointLeft = $(this).absX() + 60 + "px"; 
				
				
				var pointTop = $(this).absY() - 10 + "px";
				
				var blockTop = 270;
		
							
				$(newdiv).css({top:pointTop, left:pointLeft}).fadeIn('slow');
				
				// preload the larger image
				img_preload = new Image();
				img_preload.onload=function(){
					
					//if (($("#lg_flickr_image").attr("src")) == loadingimagepath) {
					var isloadingimg = $("#lg_flickr_image").attr("src").match( loadingimagepath );
					if (isloadingimg != null) {	
						$("#lg_flickr_image").fadeOut('fast', function(){ 
							$("#lg_flickr_image").attr("src", img_preload.src).removeClass('loadingimage').fadeIn('fast');
							var largeHeight = $(newdiv).height(); 	
							if (pointTop >= (blockTop + (75 * (grid_height))-largeHeight)) { 
								pointTop = blockTop + (75 * (grid_height)) - largeHeight; $(newdiv).animate({ top: pointTop }, 50); 
							}  
							//$(thissquare).addClass("locked");
						}); 
					
					} //end if
					newdiv = null;
				}// end function image onload
				img_preload.src= photo_data.mediumurl;
				
			
			}, function(){
			});

		return;
		

	}
});