/****************************
PictureSlide
Version: 1.0
@author Alvaro Talavera (alvarotala@gmail.com)
*****************************/

var PictureSlide = Class.create({
  
  initialize: function(holder, images, image_w, image_h, images_split_x, images_split_y, ramdomize_elements_fx, images_fx_time) {
	this.holder = holder;
    this.images_array = images;
	this.image_w = image_w;
	this.image_h = image_h;
	this.images_split_x = images_split_x;
	this.images_split_y = images_split_y;
	
	this.images_fx_time = images_fx_time;
	this.ramdomize_elements_fx = ramdomize_elements_fx;

	this.image_actual_index = 0;
	this.fx_running = false;
	this.image_portion_w = this.image_w / this.images_split_x;
	this.image_portion_h = this.image_h / this.images_split_y;
	
	this.preloaded_images_array = new Array();
	this.preload_images();
	
	this.load_image();
	Event.observe(window, 'keyup', this.key_handler.bindAsEventListener(this));
	
	this.autoupdater();
  },

  autoupdater: function() {
	var obj = this;
	new PeriodicalExecuter(function(pe) {
	  obj.set_image(1);
	}, 5);
  },

  key_handler: function(event) {
    var code = event.keyCode;

    if(code == 39) this.set_image(1); // Right key pressed
	if(code == 37) this.set_image(-1); // Left key pressed
  },

  preload_images: function() {
	var images_len = this.images_array.length;
	
	for(var i=0; i<images_len; i++) {
		this.preloaded_images_array[i] = new Image(this.image_w, this.image_h);
		this.preloaded_images_array[i].src = this.images_array[i];
	}
	
  },

  load_image: function() {
	var fragment = document.createDocumentFragment();
	var ul_tmp = document.createElement("UL");
	ul_tmp.style.zIndex = 1; // setStyle() dont't work fine in firefox..
	
	for(var y=0; y<this.images_split_y; y++) {
		for(var x=0; x<this.images_split_x; x++) {
			
			var position_x = x * this.image_portion_w;
			var position_y = y * this.image_portion_h;
			
			var li_tmp = document.createElement("LI");
			li_tmp.style.width = this.image_portion_w + "px";
			li_tmp.style.height = this.image_portion_h + "px";
			li_tmp.style.position = 'absolute';
			li_tmp.style.margin = position_y + "px 0 0 " + position_x + "px";
			

			var img_tmp = this.preloaded_images_array[this.image_actual_index].cloneNode(true);
			img_tmp.style.margin = "-" + position_y + "px 0 0 -" + position_x + "px";
			li_tmp.appendChild(img_tmp);

			ul_tmp.appendChild(li_tmp);
			
		}
	}

	fragment.appendChild(ul_tmp);

	$(this.holder).appendChild(fragment);
  },

  set_next_image: function(value) {
	this.image_actual_index += value;

	if(this.image_actual_index == this.images_array.length) {
		this.image_actual_index = 0;
	}

	if(this.image_actual_index < 0) {
		this.image_actual_index = (this.images_array.length - 1);
	}
  },

  get_random_effect: function() {	
	var effects_style = [
		{kind: Effect.Morph, options: {style: 'margin-top: -' + this.image_h + 'px;'}},
		{kind: Effect.Morph, options: {style: 'margin-left: -' + this.image_portion_w + 'px;'}},
		{kind: Effect.Morph, options: {style: 'margin-left: ' + this.image_w + 'px;'}},
		{kind: Effect.Morph, options: {style: 'margin-top: ' + this.image_h + 'px;'}}
	];
	
	return effects_style[Math.floor(Math.random()*effects_style.length)];
  },

  set_image: function(value) {
	if(this.fx_running==true) return;
	
	this.fx_running = true;
	var temporal_holder = $(this.holder).down("UL", 0);
	var elements = temporal_holder.childElements();

	temporal_holder.style.zIndex = 10; // setStyle() dont't work fine in firefox..

	this.set_next_image(value);
	this.load_image();

	var obj = this;
	var effect_style = this.get_random_effect();
	
	var interval_t = (this.images_fx_time * elements.length) * 1000;
	
	var effect_options = $H({ 
		speed: this.images_fx_time,
		afterFinish: function() {
			var inteval = setInterval(function() {
				temporal_holder.remove();
				obj.fx_running = false;
				
				clearInterval(inteval);
			}, interval_t);
		}
	});
	
	
	if(this.ramdomize_elements_fx == true) {
		elements.sort(function() {return 0.5 - Math.random()});
	}
	
	Effect.multiple(elements, effect_style.kind, effect_options.merge($H(effect_style.options)).toObject());
	// Effect.multiple(aa, Effect.Fade, effect_options.toObject());
  }

});