var categories = false;

var this_cat = 'nothing';

var gotMarq=false;

var divWidth = 0;

var activeDiv = 0;

var scrollDiv0 = 0;

var scrollDiv1 = 0;

function initMarquee(file) {
	getMarquee(file);
	return;
}

function initFirstMarquee() {
	initMarquee('marquee');
}

function startMarquee() {
	
}

function stepMarquee() {
	
}



function getMarquee(file) {
 xmlhttp.open("GET","data/"+file+".json",true);
 if (xmlhttp.overrideMimeType)
  xmlhttp.overrideMimeType("application/json");
 xmlhttp.send(null);
 return;
}


xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   if (xmlhttp.status!=404) {
    categories=new Function("return "+xmlhttp.responseText)();
    if (!gotMarq) {
	addMarquee(categories);
	clickCategory(-1);
    }
    else newJSONFile();
   } else {
    alert('Something went wrong.\nI can\'t load the category you have asked for.');
   }
  }
}

function newJSONFile() {
	alert('loaded a new file');
}


function setCategory(cat) {
	this_cat = cat;
	removeMarquee();
	addMarquee();
}

function addMarquee() {
// TODO: make the image loading look nicer
	gotMarq = false;
	div = document.getElementById('media_scroll');
	createMarqueeDiv(0);
	createMarqueeDiv(1);
	div.appendChild(scrollDiv0);
	div.appendChild(scrollDiv1);
	scrollDiv0.style.left = 0+'px';
	divWidth=scrollDiv0.offsetWidth;
	activeDiv=0;
	gotMarq = true;
}

function removeMarquee() {
	var marquee = document.getElementById("media_scroll");
	if (marquee.hasChildNodes()) {
		while (marquee.childNodes.length >= 1) {
			marquee.removeChild(marquee.firstChild);
		}
	}
	gotMarq = false;
}

function moveLeft() {
	moveMarquee(-170);
}

function moveRight() {
	moveMarquee(170);
}


function getDivId(index) {
	return 'scroller_'+index;
}

function createMarqueeDiv(index) {
	thisDiv = document.createElement('div');
	thisDiv.style.position='absolute';
	thisDiv.id=getDivId(index);
	var items = categories[this_cat];
	for (i = 0; i < items.length; i++) {
		image = document.createElement('img');
		image.src = items[i].image;
		image.width = items[i].width;
		image.height = items[i].height;
                image.border = '0px';
                image.style.margin = '2px';
		//link = document.createElement('a');
		//link.className = image;
		//link.href = 'javascript:imageClick(\''+this_cat+'\','+i+')';
		//link.appendChild(image);
   		thisDiv.appendChild(image);
  //thisDiv.innerHTML = 'HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD';
	}
	thisDiv.style.left = div.offsetWidth+'px';
	eval('scrollDiv'+index+' = thisDiv;');
}


function moveMarquee(off) {
	if (gotMarq) {
		div = document.getElementById('media_scroll');
		win = div.offsetWidth;
		pos = ((eval('scrollDiv'+activeDiv)).offsetLeft + off);
		nAct = (activeDiv == 0) ? 1 : 0;
		if (pos > 0) {
			pos = pos - divWidth;
			activeDiv = nAct;
			nAct = (activeDiv == 0) ? 1 : 0;
		} else if (pos < -divWidth) {
			pos = pos + divWidth;
			activeDiv = nAct;
			nAct = (activeDiv == 0) ? 1 : 0;
		}
		if (pos + divWidth < win) {
			inaPos=(pos + divWidth);
			document.getElementById(getDivId(nAct)).style.left = inaPos + 'px';
		} else {
			document.getElementById(getDivId(nAct)).style.left = (-divWidth) + 'px';
		}
		document.getElementById(getDivId(activeDiv)).style.left = pos + 'px';

	}
    return ;
}