var numPic = 0;
var idPic = 0;
var leftPic = 0;
var myMenu = null;
window.addEvent('domready', function(){	
	var req = new Request({
		method: 'get',
		url: 'exemples/config.xml',
		evalResponse: false,
		onComplete:function(responseXML){handleXML(responseXML);}
	}).send();
	var prevPic = $("prevPic");
	var nextPic = $("nextPic");
	var fxPic = new Fx.Morph($('samplePictures'), {duration:1000, wait:false, transition: 'quart:out'});
	prevPic.addEvent('click', function(){
		var oldLeftPic = leftPic;
		leftPic += 127;
		leftPic = Math.min(leftPic, 0 );
		fxPic.start({'left': leftPic + 'px'});
		if(oldLeftPic < leftPic){
			idPic -= 1;
		}
		setArrowsVisibility();
	});
	nextPic.addEvent('click', function(){
		var oldLeftPic = leftPic;
		leftPic -= 127;
		leftPic = Math.max(leftPic, -($('samplePictures').clientWidth - 510) );
		leftPic = Math.min(leftPic, 0);
		fxPic.start({'left': leftPic + 'px'});
		if(oldLeftPic > leftPic){
			idPic += 1;
		}
		setArrowsVisibility();
	});
});

function setArrowsVisibility(){
	if(idPic > 0){
		$("prevPic").style.visibility = "visible";
	}else{
		$("prevPic").style.visibility = "hidden";
	}
	if(numPic - 4 <= idPic){
		$("nextPic").style.visibility = "hidden";
	}else{
		$("nextPic").style.visibility = "visible";
	}
}

function handleXML(responseXML){
	var xotree = new XML.ObjTree();
	xotree.force_array = [ "category", "picture" ];
	var tree = xotree.parseXML( responseXML );
	$each(tree.samples.category, function(cNode){
		var category = new Category(cNode);
		category.createLink($("sampleLinks"));
	});
	myMenu = new MenuMatic({id:"sampleLinks"});
	Category.categories[0].activate();
}

var Category = new Class({
	initialize: function(node){
		Category.categories.push(this);
		this.node = node;
		this.name = node["-name"];
		this.categories = new Array();
		this.pictures = new Array();
		if(node.category){
			for(var i = 0 ; i < node.category.length ; i++){
				this.categories.push(new Category(node.category[i]));
			}
		}
		if(node.picture){
			for(var j = 0 ; j < node.picture.length ; j++){
				this.pictures.push(new Picture(node.picture[j]));
			}
		}
		for(var k = 0 ; k < this.categories.length ; k++){
			this.pictures = this.pictures.concat(this.categories[k].pictures);
		}
	},
	createLink: function(parentUl){
		this.li = new Element("li");
		this.link = new Element("a", 
			{	"class" : "sampleLink",
				"text" : this.name
			});
		this.link.category = this;
		this.link.addEvent("click", function(){
			this.category.activate();
		});
		parentUl.adopt(this.li);
		this.li.adopt(this.link);
		if(this.categories.length > 0){
			this.ul = new Element("ul");
			this.li.adopt(this.ul);
			for(var j = 0 ; j < this.categories.length ; j++){
				this.categories[j].createLink(this.ul);
			}
		}
	},
	activate: function(){
		if(Category.currentCategory){
			for(var i = 0 ; i < Category.currentCategory.pictures.length ; i++){
				Category.currentCategory.pictures[i].image.addClass("hidden");
				Category.currentCategory.link.removeClass("active");
			}
		}
		idPic = 0;
		leftPic = 0;
		numPic = this.pictures.length;
		for(var i = 0 ; i < numPic ; i++){
			this.pictures[i].image.removeClass("hidden");
			this.link.addClass("active");
		}
		Category.currentCategory = this;
		$("samplePictures").style.width = this.pictures.length * 127 + 'px';
		$("samplePictures").style.left = "0px";
		this.pictures[0].activate();
		setArrowsVisibility();
	}
});
Category.categories = new Array();
Category.currentCategory = null;

var Picture = new Class({
	initialize: function(node){
		this.node = node;
		this.src = node["-src"];
		this.legend = node["-legend"];
		this.image = new Element("img",
			{	"src" : "./exemples/"+this.src,
				"width" : "20%",
				"height" : "20%",
				"class" : "hidden"
			});
		this.image.picture = this;
		this.image.addEvent("click", function(){
			this.picture.activate();
		});
		$("samplePictures").adopt(this.image);
	},
	activate: function(){
		$("sampleDetail").src = this.image.src;
		$("sampleDescription").empty();
		$("sampleDescription").appendText(this.legend);
	}
});