var currentdrawitem = 0;
var currentclearitem = 0;
var nextfunctioninterval;

var pictures_array = "";
var pictures = new Array();
var draworder = new Array();

var colors = new Array('#3b3b3b', '#252525', '#0f0f0f', '#000000');
var margin = 85;
var noneDisplayItems = new Array();

var screen_width = screen.width;
var document_width = document.documentElement.offsetWidth;

var pictures_in_row = Math.floor((screen_width - margin)/110);
var pictures_num = pictures_in_row*3;

var time_pictures_in_row;
var time_document_width;

var marquee = document.getElementById('marquee');

var longpause = 5000;
var shortpause = 500;

var hover = 0;

var rows = 3;

function InitializeRotation(){
	
	var base_html = '<table border="0" cellspacing="0" cellpadding="0"><tr>';
	
	for (i = 0; i < pictures_num; i++) {
		draworder.push(i+1);
		
		base_html += '<td style="width: 120px; height: 120px;" id="area'+ (i+1) +'" valign="bottom" align="right">';
		base_html += '<div align = "center" valign = "center" style = "background-color: '+ colors[Math.floor(Math.random() * colors.length)] +'; width: 120px; height: 120px; cursor: hand;"></div>';
		base_html += '</td>';
		
		if (!((i+1)%pictures_in_row)) {
			base_html += '</tr><tr>';
		}
	}
				
	base_html 			 += "</tr></table>";
	marquee.innerHTML 	  = base_html;
	loadElementsVisibility();
	marquee.style.display = "block";				
	setTimeout('DrawSmallImage(1, \'\')', shortpause);
}

function elementsVisibility() {

	var new_document_width = document.documentElement.offsetWidth;
	
	if (new_document_width != time_document_width) {
		
		var new_pictures_in_row = Math.floor((new_document_width - margin)/120);
		
		if (new_pictures_in_row > time_pictures_in_row) {
			
			var change = pictures_in_row - new_pictures_in_row;
			
			time_pictures_in_row = new_pictures_in_row;
			time_document_width = new_document_width;
			
			for (i = 0; i < rows; i++) {
				for (j = 0; j < pictures_in_row; j++) {
					if (j < (pictures_in_row - change)) {						
						document.getElementById('area'+ (i*pictures_in_row+j+1)).style.display = '';
							
						for (k = 0; k < noneDisplayItems.length; k++) {
							if (noneDisplayItems[k] == (i*pictures_in_row+j+1)) {
								noneDisplayItems[k] = '_';
								break;
							}
						}
					}
				}
			}		
		}
		
		if (new_pictures_in_row < time_pictures_in_row) {
			
			var change = pictures_in_row - new_pictures_in_row;
			
			if ((pictures_in_row - change) >= rows) {
				
				time_pictures_in_row = new_pictures_in_row;
				time_document_width = new_document_width;
				
		
				for (i = 0; i < rows; i++) {
					for (j = 0; j < pictures_in_row; j++) {
						if (j >= (pictures_in_row - change)) {
							document.getElementById('area'+ (i*pictures_in_row+j+1)).style.display = 'none';
							
							var is_exists = false;
							
							for (k = 0; k < noneDisplayItems.length; k++) {
								if (noneDisplayItems[k] == (i*pictures_in_row+j+1)) {
									is_exists = true;
								}
							}
							
							if (!is_exists) {
								for (k = 0; k < noneDisplayItems.length; k++) {
									if (noneDisplayItems[k] == '_') {
										noneDisplayItems[k] = (i*pictures_in_row+j+1);
										break;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

function loadElementsVisibility() {
	var new_document_width = document.documentElement.offsetWidth;
	
	for (i = 0; i < (pictures_num - 9); i++) {
		noneDisplayItems.push('_');
	}

	if (new_document_width != screen_width) {
		var new_pictures_in_row = Math.floor((new_document_width - margin)/120);

		if (new_pictures_in_row != pictures_in_row) {
			var change = pictures_in_row - new_pictures_in_row;
			
			while ((pictures_in_row - change) < rows) {
				change--;
			}
			
			new_pictures_in_row = pictures_in_row - change;
			
			time_pictures_in_row = new_pictures_in_row;
			time_document_width = new_document_width;

			for (i = 0; i < rows; i++) {
				for (j = 0; j < pictures_in_row; j++) {
					if (j >= (pictures_in_row - change)) {
						document.getElementById('area'+ (i*pictures_in_row+j+1)).style.display = "none";
						
						for (k = 0; k < noneDisplayItems.length; k++) {
							if (noneDisplayItems[k] == '_') {
								noneDisplayItems[k] = (i*pictures_in_row+j+1);
								break;
							}
						}
					}
				}
			}
		} else {
			time_pictures_in_row = pictures_in_row;
			time_document_width = document_width;
		} 
	} else {
		time_pictures_in_row = pictures_in_row;
		time_document_width = document_width;
	}
}

function DrawSmallImage(init, pictures_array) {
	if (init) {
		currentdrawitem = 0;
		var len = draworder.length;
		
		for (i = 0; i < len; i++) {
			var randomval 		 = Math.floor(Math.random() * draworder.length);
			var temp	  		 = draworder[i];
			draworder[i]  		 = draworder[randomval];
			draworder[randomval] = temp;
		}
		sendRequest('test.asp?pictures_num='+pictures_num, '', 'POST', pictures_array);
	} else {
		if (pictures_array != '') {
			pictures = pictures_array.split('^') ;
		}
		
		element = document.getElementById('area' + draworder[currentdrawitem]);
		var imageurl = "albumimages/"+pictures[currentdrawitem] ;
	
		var color = Math.floor(Math.random() * colors.length);
		
		element.innerHTML = '<div align = "center" valign = "center" style = "background-color: '+ colors[color] +'; background-image: url('+ imageurl + '); background-repeat: no-repeat; background-position: center; width: 120px; height: 120px; cursor: hand;"></div>';
	
		if (currentdrawitem >= pictures_num - 1){
			nextfunctioninterval = setTimeout('DrawSmallImage(1, \'\')',longpause);
		} else {
			while (true) {
				currentdrawitem++;
				
				if (currentdrawitem >= pictures_num - 1) {
					break;
				}
				
				var next = true;
				for (i = 0; i < noneDisplayItems.length; i++) {
					if (noneDisplayItems[i] == draworder[currentdrawitem]) {
						next = false;
					}
				}
								
				if (next) break; 

			}
			
			nextfunctioninterval = setTimeout('DrawSmallImage(0,\'\')',shortpause);
		}

	}
}

if(document.getElementById && document.createTextNode)
{
	window.onload=InitializeRotation;
	window.onresize = elementsVisibility;
}