var loader = initLoader();

var scrollingEnabled = true;
var sliderMinPosition = 0;
var sliderMaxPosition = 15;
var sliderSpace = 300;	
var sliderWidth = 0;

var flagged = [];
var counter = 0;
var center = -1;
var first = 0;
var last = 0;
var scrollStep = 0;


var wall = null;

function getWall(){
	addPreloader();
	var s = getSort();
	var f = getFilter();
	var fl = getFlag();
	var uri = server+"wall/wall2";
	var Width = Fensterweite();
	var Height = Fensterhoehe();
 	var ajax = new Ajax.Request(uri, {
		parameters: {Breite: Width, Hoehe: Height, Sort: s, Filter: f, flag: fl },
		onSuccess: function(transport){
	//		alert(transport.responseText);
			removePreloader();
			renderWall(transport.responseText);
		},
		onFailure: function(transport){
			alert('shit:'+transport.responseText);
			getWall();  
		}
	});
}



function renderWall(arg)
{
	wall = eval("("+arg+")");
	flagged = [];
	first = 0;
	center = -1;
	var i, j, wrapper = $('WallWrapper');
	
	for(i = 0; i < wall.height; i++)
	{
		// Erstelle eine Zeile
		var zeile = $(document.createElement('div'));
		zeile.addClassName((i%2 == 0) ? 'Zeile1' : 'Zeile2');
		zeile.setAttribute('id', 'Zeile'+i);
		
		// Erstelle für jede Spalte eine Tile
		// Die Anzahl der anzuzeigenden Spalten kann die Anzahl der Spalten der Wall übersteigen
		for(j = 0; j < wall.cols; j++)
		{
			last = j % wall.width;
			var t = createTile(i,last);
			zeile.appendChild(t);
		}
		wrapper.setStyle({"marginTop": wall.margin+'px'});
		wrapper.appendChild(zeile);
	}
	initSlider();
	showFlagged();
}

function showFlagged(){
	scrollToCenter();
	counter = 0;
	blinker = 0;
	animate();
}

function scrollToCenter(){
	if(wall.flag >= 0)
	{
		var off = (Math.floor(wall.cols / 2))-1;
		while( ((first+off) % wall.width) != wall.flag)
		{
			scRight();
		}
	}
}

function animate(){
	
	if(counter <= 46)
	{
		blinker += 0.2;
		if(blinker > 1)
			blinker = 0;
		flagged.each(function(t){
			t.setStyle({opacity: blinker});
		});
		counter++;
		window.setTimeout("animate();", 100)
	} 
	
}

function initSlider(){
	var sl = $('slider');
	if(sl != null)
	{
		var w = wall.width;
		var c = wall.cols - 1;
		if(w <= c)
		{
			disableScrolling();	
		} 
		
		else 
		{
			enableScrolling();
			sliderWidth = sliderSpace * (c / w);
			sl.setStyle({"width": sliderWidth+'px'});
			sliderMaxPosition = sliderSpace - sliderWidth;
			scrollStep = Math.floor(wall.cols / 2);
		}
	}
}

function setSliderPosition(){
	if(scrollingEnabled)
	{
		var p = sliderMinPosition;
		var r = first / (wall.width - 1);
		var w = p + r * sliderMaxPosition;
		$('slider').setStyle({"left": w+'px'});
	}
}

function disableScrolling(){
	scrollingEnabled = false;
	$('arrow_left').onclick = null;
	$('arrow_right').onclick = null;	
	$('slider').setStyle({'width': sliderSpace+'px'});
	$('arrow_left').setStyle({"cursor": "default"});
	$('arrow_right').setStyle({"cursor": "default"});
}

function enableScrolling(){
	scrollingEnabled = true;
	$('arrow_left').onclick = scrollLeft;
	$('arrow_right').onclick = scrollRight;	
	$('arrow_left').setStyle({"cursor": "pointer"});
	$('arrow_right').setStyle({"cursor": "pointer"});	
}


function scrollLeft()
{
	for(var i = 0; i < scrollStep; i++)
	{
		scLeft();
	}
}

function scLeft()
{
	// todo:
	// Entferne das rechteste Bild aus dem DOM
	// füge neues Bild an den Anfang ein
	last = last == 0 ? wall.width - 1 : (last-1) % wall.width;
	first = first == 0 ? wall.width - 1 : (first-1) % wall.width;
	
	var i, j;
	for(i = 0; i < wall.height; i++)
	{
		var z = $('Zeile'+i);
		z.removeChild(z.lastChild);
		z.insertBefore(createTile(i, first), z.firstChild);
	}
	setSliderPosition();
}

function scrollRight()
{
	//alert('start scroll Right');
	for(var i = 0; i < scrollStep; i++)
	{
		//alert('scroll Right (i='+i+')');
		scRight();
	}
}

function scRight(){
	// todo:
	// Entferne das linkeste Bild aus dem DOM
	// füge neues Bild ans Ende an
	last = (last+1) % wall.width;
	first = (first+1) % wall.width;
	//alert("first = "+first);
	var i, j;
	for(i = 0; i < wall.height; i++)
	{
		var z = $('Zeile'+i);
		z.removeChild(z.firstChild);
		z.appendChild(createTile(i, last));
	}
	setSliderPosition();
}

// Erstelle ein Artwork
// @param i: Zeile
// @param j: Spalte
function createTile(i,j)
{
	var tile = wall.field[j][i];
	var id = tile["id"];
	var path = tile["path"];
	
	var t = $(document.createElement('div'));
	t.addClassName('Tile');

	var link = $(document.createElement('a'));
	link.href = "member.php/start/clickArtwork/awid/"+id;
			
	var img = document.createElement('img');
	img.src = path;
	
	link.appendChild(img);
	t.appendChild(link);

	if(wall.admin)
	{
		var a = $(document.createElement('a'));
		a.href = "member.php/admin/block/Awid/"+id;
		a.addClassName("delete");
		
		var cross = $(document.createElement('img'));
		cross.src = "../images/cross.png";
		cross.setStyle({'marginLeft': '-16px'});
		
		a.appendChild(cross);
		t.appendChild(a);
	}

	if(tile["flagged"])
	{
		flagged.push(t);
		if(center == -1) 
			center = j;
	}

	return t;
}

function getFilter(){
	var select = document.getElementById('filter');
	if(select == null) return 0;
	return select.value;
}

function getSort(){
	var select = document.getElementById('sort');
	if(select == null) return 0;
	return select.value;
}

function getFlag(){
	var d = document.getElementById('flag');
	var result = d.innerHTML;	
	d.innerHTML = "";
	return result;
}	
	
function Fensterweite()
{
 if (window.innerWidth) return window.innerWidth;
 else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
 else return 0;
}

function Fensterhoehe()
{
 if (window.innerHeight) return window.innerHeight;
 else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
 else return 0;
}

function initLoader(){
	var div = document.createElement('div');
	div.setAttribute('id', 'preloader');
	
	var l = document.createElement('img');
	l.src = "../images/thickbox/loadingAnimation.gif";
	l.setAttribute('width', '24px');
	l.setAttribute('height', '24px');
	div.appendChild(l);
	
	return div;
}

function addPreloader(){
	var div = $('WallWrapper');
	if(div != null) { 
		div.update();
		div.appendChild(loader);
	}
}

function removePreloader(){
	var div = $('WallWrapper');
	if(div != null) { 
		div.update();
	}
}