var i, j;
var imageSize = 138;
var imageHalf = imageSize * 0.5;
var docWidth, docHeight, imagesX, imagesY, xp, yp, maxImages;
var oldImagesX = 0;
var oldImagesY = 0; 

var pictureMode;

var maxX = 0;
var maxY = 0;

var pictureData = [];

var randomPosition;
var positions = [];

var posMode = 'initial';
var isCreating = true;
var imageCount = 0;
var loadingInterval;
var movementInterval;
var numItems;
var imageNum = 0;
var targX = 0;
var targY = 0;
var floatX = 0;
var floatY = 0;

function checkPos (e){
	targX = (e.clientX / docWidth) * -((maxX * imageSize) - docWidth);
	targY = (e.clientY / docHeight) * -((maxY * imageSize) - docHeight);
}



function resizeWindow( e ) {
	docWidth = $(window).width();
	docHeight = $(window).height();
	imagesX = Math.ceil(docWidth / imageSize) + 4;
	imagesY = Math.ceil(docHeight / imageSize) + 3;
	//alert('resize ' + docWidth +  ' ' + docHeight);
	
	if ( posMode == 'initial' ) {
			
		for (i = 0; i < imagesX; i++ ) {
			for (j = 0; j < imagesY; j++ ) {
				positions.push( { x: i, y: j } );
			}
		}
			
	} else if ( posMode == 'fillrest' ) {
	
		if ( imagesX > maxX || imagesY > maxY ) {
		
			// set right column
			for (i = oldImagesX; i < imagesX; i++ ) {
				for (j = 0; j < imagesY; j++ ) {
					positions.push( { x: i, y: j } );
				}
			}
			
			// set bottom row without right column
			for (i = 0; i < oldImagesX; i++ ) {
				for (j = oldImagesY; j < imagesY; j++ ) {
					positions.push( { x: i, y: j } );
				}
			}
			
			if ( !isCreating ) {
				isCreating = true;
				loadingInterval = setInterval(getImages,50);
			}
			
		}
		
		
	}
	
	maxX = Math.max( maxX, imagesX);
	maxY = Math.max( maxY, imagesY);
	
	maxImages = maxX * maxY;


	
	oldImagesX = imagesX;
	oldImagesY = imagesY;
	
}

function getImages(){
	//$("#output").text( 'imageCount:' + imageCount + ' numItems:' + numItems + ' maxImages:' + maxImages + ' posMode:' + posMode );
	if(imageCount < imageAmount){
		posMode = 'initial';
		addImage( imageCount );
		imageCount++;
	} else if (imageCount < maxImages){
		posMode = 'fillrest';
		var randomImage = ~~(Math.random()* numItems );
		addImage( randomImage  );
		imageCount++;
	} else {
		posMode = 'fillrest';
		clearInterval(loadingInterval);
		isCreating = false;
	}
}


function posImages() {
	//$("#output").text( 'isCreating:' + isCreating + ' ' + Math.random() );
	floatX -= ( floatX - targX) * 0.1;
	floatY -= ( floatY - targY) * 0.1;
	$("#imageWall").css('left', floatX).css('top', floatY);
}



function addImage(imageId){
	imageNum++;
	var pos = getPosition();
	//var bgcolor = 'rgb(' + ~~(Math.random()*255) + ',' + ~~(Math.random()*255) + ',' + ~~(Math.random()*255) +  ')';
	var grey = ~~(Math.random()*50 + 70);
	var bgcolor = 'rgb(' + grey + ',' + grey + ',' + grey + ')';
	var con = '<div class="container" id="container' + imageNum + '" style="background-color:' + bgcolor + ';width:' + imageSize + 'px;height:' + imageSize + 'px;left:' + pos[0] + 'px;top:' + pos[1] + 'px;"></div>';
	$(con).appendTo('#imageWall').fadeIn();
	var img = '<img src="' + pictureData[imageId].img + '" class="wallImage" id="image' + imageNum + '"/>';
	$(img).appendTo("#container" + imageNum);
	var color = pictureData[imageId].colour;
	//var imgOver = '<a href="javascript:popup(\''+imageTitle[imageId - 1]+'\', ' + imageNum +');"><img src="wallImages/triangles/' + color + 'Off.gif" class="wallImageOver" id="imageOver' + imageNum + '"></a>';
	var imgOver = '<a href="javascript:popup(\'' + pictureData[imageId].id + '\', \'' + imageNum + '\', \'' + pictureData[imageId].cat + '\');"><img src="wallImages/triangles/' + color + 'Off.gif" class="wallImageOver" id="imageOver' + imageNum + '"></a>';
	$(imgOver).appendTo('#container' + imageNum);
	
	//$('#imageOver' + imageNum ).hover( function() {onOver(imageNum) }, function() {onOut(imageNum) } );
	
	eval("$( '#imageOver" + imageNum + "').hover(function() {$( 'img#imageOver" + imageNum + "').attr('src','wallImages/triangles/" + color + "Over.gif'); }, function() { $( 'img#imageOver" + imageNum + "' ).attr('src','wallImages/triangles/" + color + "Off.gif'); });");
}
/*
function onOver(id) {
	//alert('over'+ id);
	$( '#imageOver' + id  ).attr('src','wallImages/triangles/festivalsOver.gif');
}


function onOut(id) {
}

*/

function getPosition() {
	randomPosition = ~~(Math.random() * positions.length );
	//randomPosition = ~~(Math.random() * numItems );
	xp = positions[ randomPosition ].x * imageSize;
	yp = positions[ randomPosition ].y * imageSize;
	positions.splice( randomPosition, 1 ); // remove y in x
	return [xp,yp];
}

function popup(id, leftPos, cat) {
	
	$("div.eventCloud").remove();
	
	var imageToPos = 'imageOver' + leftPos;
	var imageTopPos = $('img#imageOver' + leftPos).offset().top;
	var imageLeftPos = $('img#imageOver' + leftPos).offset().left;
	var globalOps;
	
	if ( pictureMode == 'venues' ) {
		
		globalOps = {
			leftPos: imageLeftPos,
			topPos: imageTopPos,
			//date: '10 05 2009', //formatDate.format('dS M Y'),
			VenId: id,
      VenName: cat
		}
		
		requestVenuePop(globalOps);
		
	} else if (pictureMode == 'events' ) {
		
		globalOps = {
			leftPos: imageLeftPos,
			topPos: imageTopPos,
	    cat: cat
		}
		
		requestInfoPop(id, globalOps);
		
	};
		
}

function getImagesOnLoad(){
	loadPicEvents();
	//loadPicVenues();
}

function loadPicVenues() {
	
	// show food & drink Ticked
	pictureMode = 'venues';
	clearPictures();
	$.getJSON('/Ajax/GetPictures.ashx?fd=true', function (data) {
		checkData(data);
		imageAmount = numItems = data.length;
		
		if (numItems == 0 ) return;
		
		if ( numItems > maxImages ) imageAmount = maxImages;
		$.each(data,function(index, item){
			if (item.ImgMedium == '' || item.ImgMedium == null) {
				item.ImgMedium = getDefaultImage( item.Name );
			}
			pictureData[ index ] = { id: item.Id, img: item.ImgMedium, cat: item.Category.Name, colour: 'venue' };
});

		startPictures();
	});
}


function loadPicEvents() {
    pageView = 'pictures';
	// show food & drink UnTicked
	pictureMode = 'events';
	clearPictures();
	$.getJSON('/Ajax/GetPictures.ashx', GetFilters(), function (data) {
	  checkData(data);
		imageAmount = numItems = data.length;
		
		if (numItems == 0 ) return;
		
		if ( numItems > maxImages ) imageAmount = maxImages;
		$.each(data,function(index, item){
			if (item.ImgMedium == '' || item.ImgMedium == null) {
				item.ImgMedium = getDefaultImage( item.Categories[0].Name );
			}
			pictureData[ index ] = { id: item.Id, img: item.ImgMedium, cat: item.Categories[0].Name, colour: item.Categories[0].Name };
		});
		startPictures();
	});
}


function getDefaultImage( catName ) {
	switch (catName) {
    case 'Dance':
        return 'images/defaults/medium/default-dance-medium.gif';
    case 'Theatre':
        return'images/defaults/medium/default-theatre-medium.gif';
    case 'Art':
        return'images/defaults/medium/default-art-medium.gif';
    case 'Comedy':
        return'images/defaults/medium/default-comedy-medium.gif';
    case 'Festivals':
        return'images/defaults/medium/default-festivals-medium.gif';
    case 'Film':
        return'images/defaults/medium/default-film-medium.gif';
    case 'Heritage':
        return'images/defaults/medium/default-heritage-medium.gif';
    case 'Music':
        return'images/defaults/medium/default-music-medium.gif';
    case 'Cafe':
        return 'images/defaults/medium/default-cafe-medium.gif';
    case 'Bar':
        return 'images/defaults/medium/default-bar-medium.gif';
    case 'Restaurant':
        return 'images/defaults/medium/default-restaurant-medium.gif';
	case 'Pub':
        return 'images/defaults/medium/default-pub-medium.gif';
	case 'More':
        return 'images/defaults/medium/default-more-medium.gif';
    default:
        return 'images/defaults/medium/default-cafe-medium.gif';
	}
}







function clearPictures() {

	$('#imageWall').empty();
	
	$("div.eventCloud").remove();
	
	$(window).unbind("resize", resizeWindow);
	$(document).unbind("mousemove", checkPos);
	
	clearInterval( loadingInterval );
	clearInterval( movementInterval );

	// reset all vars
	maxImages = 0;
	oldImagesX = 0;
	oldImagesY = 0; 
	maxX = 0;
	maxY = 0;
	positions = [];
	posMode = 'initial';
	isCreating = true;
	imageCount = 0;
	imageNum = 0;
	pictureData = [];
	
	//resizeWindow();
}

function startPictures() {

    resizeWindow();

	loadingInterval = setInterval(getImages,80);
	movementInterval = setInterval(posImages,50);
	$(window).bind("resize", resizeWindow);
	$(document).bind("mousemove", checkPos);
}
/*$(function(){
$('<div style="position:absolute;z-index:9999;top:0px;left:0px;background:red;width:200px;height:120px;" id="output">Yo!</div>').appendTo('body');
});*/