// JavaScript Document: class imgGallery by gingebaker

var imgGallery = {
c_bigimg: "bigimgcontainer",
c_anibigimg: "anibigimg",
bigimg: "bigimg",
c_control: "controlcontainer",
c_picinfo: "picinfo",
picprevswitch: "picprevswitch",
picnextswitch: "picnextswitch",
c_category: "categorycontainer",
catimg: "catimg_",
anidiv: "anidiv_",
catname: "catname_",
catatonce: 5,
currentcat: 0,
nextswitch: "nextswitch",
prevswitch: "prevswitch",
loadingimg: new Array(),
catsloaded: 0,
picloaded: true,
controlloaded: true,
controlstatus: "hide",
choosedcat:0,
choosedpic:0,

initGallery: function(atonce) {
	this.catatonce = atonce;
	this.start();
},

start: function() {
	// fill cats
	this.loadcats();
	// set event handler
	Event.observe(this.prevswitch, 'click', this.prevcats.bindAsEventListener(this));
	Event.observe(this.nextswitch, 'click', this.nextcats.bindAsEventListener(this));
	for(i=0;i < this.catatonce;i++) {
		Event.observe(this.catimg+i, 'click', this.catchoosed.bindAsEventListener(this));
	}
	Event.observe(this.picnextswitch, 'click', this.nextpic.bindAsEventListener(this));
	Event.observe(this.picprevswitch, 'click', this.prevpic.bindAsEventListener(this));
	Event.observe(this.c_bigimg, 'click', this.bigpicclick.bindAsEventListener(this));
	this.updateswitches();
},

hidecats: function() {
	for(i=0;i < this.catatonce;i++) {
		$(this.catname+i).innerHTML = "";
		if(i == (this.catatonce - 1))
			new Effect.BlindUp(this.anidiv+i,{duration: 1, afterFinish: function() { this.loadcats() }.bindAsEventListener(this) });
		else
			new Effect.BlindUp(this.anidiv+i,{duration: 1});
	}
},

loadcats: function() {
	this.loadingimg = new Array();
	slot=0;
	//window.alert(this.currentcat+" kleiner als "+(this.currentcat+this.catatonce));
	for(i=this.currentcat;i<(this.currentcat+this.catatonce);i++) {
		if(!cat[i]) { this.loadready('cat'); slot++; continue; }
		this.loadingimg[i]= new Image();
		picid = cat[i][1][0];
		this.loadingimg[i].src = imgurl+pic[picid][0];
		if(this.loadingimg[i].complete) {
			this.showcatloaded(slot,i);
		}
		else {
			this.loadingimg[i].onload = this.showcat.bindAsEventListener(this,slot,i); // (slot,i)
			this.loadingimg[i].onerror = function() {window.alert("Error loading catid: "+i+", on slot "+(slot+1))};
		}
		slot++;
	}
},

showcatloaded: function(slot, catid) {
	$(this.catimg+slot).src = this.loadingimg[catid].src;
	$(this.catimg+slot).title = "klicken um Kategorie zu oeffnen";
	$(this.catname+slot).innerHTML = cat[catid][0];
	Element.writeAttribute(this.catimg+slot, "currcat", catid);
	new Effect.BlindDown(this.anidiv+slot,{duration: 1, afterFinish: function() { this.loadready('cat'); }.bindAsEventListener(this) }); 
},

showcat: function() { //slot,catid
	slot = arguments[1];
	catid = arguments[2];
	this.showcatloaded(slot,catid);
},

catchoosed: function(e) {
	if(!this.checkready()) { return false; }
	element = Event.element(e);
	catid = Element.readAttribute(element, "currcat");
	//window.alert("CATEGORY CHOOSED "+element.identify()+" CURRENT CATEGORY: "+catid);
	this.choosedcat = catid;
	this.choosedpic = cat[catid][1][0];
	this.fadecontrolcontainer("show");
	this.hidepic();
},

hidepic: function() {
	this.updatepicswitches();
	this.picloaded = false;
	new Effect.Fade(this.c_anibigimg,{duration:1.0, from:1.0, afterFinish: function() { this.loadpic() }.bindAsEventListener(this)});
},

loadpic: function() {
	//TODO: Lade Bild und setze nächstes Event auf showpicloaded
	this.loadingimg = new Image();
	this.loadingimg.src = imgurl+pic[this.choosedpic][1];
	if(this.loadingimg.complete) {
		this.showpicloaded();
	}
	else {
		this.loadingimg.onload = this.showpicloaded.bindAsEventListener(this);
		this.loadingimg.onerror = function() {window.alert("Error loading picture: "+imgurl+pic[this.choosedpic][1])};
	}
},

showpicloaded: function() {
	// TODO: zeige geladenes bild mit effekt, nach abschluß info an busy
	$(this.bigimg).src = imgurl+pic[this.choosedpic][1];
	$(this.bigimg).title = "pic from category "+cat[this.choosedcat][0];
	new Effect.Appear(this.c_anibigimg,{duration:1.0, from:0, afterFinish: function() { this.loadready('pic'); }.bindAsEventListener(this) });
},

nextpic: function() {
	if(!this.checkready()) { return false; }
	this.picloaded = false;
	nextpicnumber = cat[this.choosedcat][1].indexOf(this.choosedpic) + 1;
	this.choosedpic = cat[this.choosedcat][1][nextpicnumber];
	this.hidepic();
},

prevpic: function() {
	if(!this.checkready()) { return false; }
	this.picloaded = false;
	prevpicnumber = cat[this.choosedcat][1].indexOf(this.choosedpic) - 1;
	this.choosedpic = cat[this.choosedcat][1][prevpicnumber];
	this.hidepic();
},

nextcats: function() {
	if(!this.checkready()) { return false; }
	this.catsloaded = 0;
	this.currentcat += this.catatonce;
	this.updateswitches();
	this.fadecontrolcontainer("blinddown");
	this.hidecats();
},

prevcats: function() {
	if(!this.checkready()) { return false; }
	this.catsloaded = 0;
	this.currentcat -= this.catatonce;
	this.updateswitches();
	this.fadecontrolcontainer("blinddown");
	this.hidecats();
},

updateswitches: function() {
	if(this.currentcat == 0)
		$(this.prevswitch).style.visibility = 'hidden';
	else
		$(this.prevswitch).style.visibility = 'visible';
	if((this.currentcat+this.catatonce) >= cat.length)
		$(this.nextswitch).style.visibility = 'hidden';
	else
		$(this.nextswitch).style.visibility = 'visible';
},

updatepicswitches: function() {
	// TODO: set catinfo, and set prev and next switches to the right visibility
	piccount = cat[this.choosedcat][1].length;
	currentpicnumber = cat[this.choosedcat][1].indexOf(this.choosedpic) + 1;
	$(this.c_picinfo).innerHTML = "pic "+currentpicnumber+" of "+piccount+" ("+cat[this.choosedcat][0]+")";
	if(currentpicnumber > 1)
		$(this.picprevswitch).style.visibility = "visible";
	else
		$(this.picprevswitch).style.visibility = "hidden";
	if(currentpicnumber < piccount)
		$(this.picnextswitch).style.visibility = "visible";
	else
		$(this.picnextswitch).style.visibility = "hidden";
},

checkready: function() {
	if(this.catsloaded < this.catatonce || this.picloaded == false || this.controlloaded == false) // check if cats/pics/control ready
		return false;
	else
		return true;
},

loadready: function(what) {
	if(what == "cat") {	this.catsloaded++; }
	else if(what == "pic") {	this.picloaded = true; }
	else if(what == "control") {	this.controlloaded = true; }
},

fadecontrolcontainer: function(mode) {
	switch(mode) {
		case "show": if(this.controlstatus != "show") {
		fromvalue = (this.controlstatus == "blinddown") ? 0.3 : 0.1;
		new Effect.Appear(this.c_control,{duration:0.4, from:fromvalue, to:0.7, afterFinish: function() { this.loadready('control'); }.bindAsEventListener(this)}); this.controlloaded = false; this.controlstatus = "show"; } break;
		case "hide": if(this.controlstatus != "hide") {
		new Effect.Fade(this.c_control,{duration:0.4, from:0.7, to:0.1, afterFinish: function() { this.loadready('control'); }.bindAsEventListener(this)}); this.controlloaded = false; this.controlstatus = "hide"; } break;
		case "blinddown": if(this.controlstatus != "blinddown") {
		new Effect.Fade(this.c_control,{duration:0.4, from:0.7, to:0.3, afterFinish: function() { this.loadready('control'); }.bindAsEventListener(this)}); this.controlloaded = false; this.controlstatus = "blinddown"; } break;
	}
},

bigpicclick: function() {
	if(!this.checkready()) { return false; }
	if(this.controlstatus == "show" || this.controlstatus == "blinddown")
		this.fadecontrolcontainer("hide");
	else
		this.fadecontrolcontainer("show");
}


} // end class imgGallery

var imgGallery;
function doinitGallery() { imgGallery.initGallery(4); };
Event.observe(window, 'load', doinitGallery, false);