MaleriList = {
	maler_div: "maleri_list",
	info_div: "maleri_info",
	index: 0,
	selected_index: 0,
	number_of_paintings: 0,
	animation_counter: 0,
	animation_timer: "",
	animation_pos: 0,
	animation_runs: false,
	botton_timer: "",
	
	small_image_size: 75,
	big_image_size: 100,
	
	init: function(number_of_paintings){
		this.number_of_paintings = number_of_paintings;
	},

	left: function(){
		if(MaleriList.selected_index >0)
			MaleriList.startAnimation(-1);
	},
	
	leftDown: function(bool){
		if(bool)
			this.botton_timer = window.setInterval(MaleriList.left,300);
		else
			window.clearInterval(this.botton_timer);
	},
	
	right: function(){
		if(MaleriList.selected_index < (MaleriList.number_of_paintings-1))
			MaleriList.startAnimation(1);
	},
	
	rightDown: function(bool){
		if(bool)
			this.botton_timer = window.setInterval(MaleriList.right,300);
		else
			window.clearInterval(this.botton_timer);		
	},
	
	startAnimation: function(step){
		if(!this.animation_run){
			this.selected_index += step;
			this.animation_run = true;
			this.hideInfo();
			this.runMove();
		}
	},
	
	runMove: function(){
		var loops = 5;
		var distance = MaleriList.small_image_size;
		var direction = 1;
		if(MaleriList.selected_index > MaleriList.index)
			direction = -1;
		MaleriList.animation_pos += (direction*(distance/loops));

		document.getElementById(MaleriList.maler_div).style.left = MaleriList.animation_pos+"px";
		MaleriList.runTransformation(loops);
		MaleriList.moveBar(loops,direction);	
		
		if(MaleriList.animation_counter < loops){
			MaleriList.animation_counter++;	
			MaleriList.animation_timer = window.setTimeout(MaleriList.runMove,50);
		}
		else{
			window.clearTimeout(MaleriList.animation_timer);
			MaleriList.animation_counter = 0;
			MaleriList.index = MaleriList.selected_index;
			MaleriList.showInfo();
			MaleriList.animation_run = false;
		}
	},
	
	runTransformation: function(loops){
		var big_size = this.big_image_size;
		var small_size = this.small_image_size;
		var size_diff = (big_size - small_size)/loops;
		
		var size; 
		
		if(document.getElementById("maleri_"+this.selected_index+".img").style.height){
			size = document.getElementById("maleri_"+this.selected_index+".img").style.height;
			document.getElementById("maleri_"+this.selected_index+".img").style.height = (parseInt(size.replace("px",""))+size_diff)+"px";
		}
		if(document.getElementById("maleri_"+this.selected_index+".img").style.width){
			size = document.getElementById("maleri_"+this.selected_index+".img").style.width;
			document.getElementById("maleri_"+this.selected_index+".img").style.width = (parseInt(size.replace("px",""))+size_diff)+"px";
		}
		document.getElementById("maleri_"+this.selected_index+".div").style.width = (parseInt(size.replace("px",""))+size_diff)+"px";
		
		if(document.getElementById("maleri_"+this.index+".img").style.height){
			size = document.getElementById("maleri_"+this.index+".img").style.height;
			document.getElementById("maleri_"+this.index+".img").style.height = (parseInt(size.replace("px",""))-size_diff)+"px";
		}
		if(document.getElementById("maleri_"+this.index+".img").style.width){
			size = document.getElementById("maleri_"+this.index+".img").style.width;
			document.getElementById("maleri_"+this.index+".img").style.width = (parseInt(size.replace("px",""))-size_diff)+"px";
		}
		document.getElementById("maleri_"+this.index+".div").style.width = (parseInt(size.replace("px",""))-size_diff)+"px";
	},
	
	hideInfo: function(){
		document.getElementById(this.info_div).style.visibility = "hidden";
	},
	
	showInfo: function(){
		var div = "maleri_"+this.selected_index;
		document.getElementById(this.info_div+"_titel").innerHTML = document.getElementById(div+".titel").value;
		document.getElementById(this.info_div+"_pris").innerHTML = document.getElementById(div+".pris").value;
		document.getElementById(this.info_div+"_link").href = document.getElementById(div+".link").href; 
		document.getElementById(this.info_div).style.visibility = "visible";
	},
	
	moveBar: function(loops,direction){
		var size = 264;
		var width = (size/this.number_of_paintings);
		var pos = width*this.selected_index;
		var sub = (width/loops) * (loops-MaleriList.animation_counter)*direction*-1;
		pos -= sub;
		document.getElementById("maleri_bar").style.left = pos+"px";
	}

}