/****************************************************************************************
 * EE Rotate Gallery v3.2
 * 2k-Group, NickM (Nickproger)
 *
 * <!-- Full example of use: -->
 *
 * <style>
 * .canvas_gallery_photo img {
 *	position:absolute;
 *	display:none;
 * }
 * </style>
 *
 * <div id="gallery_div" class="canvas_gallery_photo">
 *	<img src="img1.jpg" alt="" />
 *	<img src="img2.jpg" alt="" />
 *	<img src="img3.jpg" alt="" />
 * </div>
 *
 * <script type="text/javascript" src="ee_rotate_gallery.js"></script>
 * <script type="text/javascript">
 * onload = function() {
 *	var my_gall = new ee_rotate_gallery("gallery_div", 20, 40, 5000);
 *	my_gall.run();
 * }
 * </script>
 *
 */

ee_rotate_gallery = function(div_id, frames, frame_time, time_to_wait, current_image, action_on_change) {
	// Effect configuring
	var config_frames	= frames;
	var config_frame_time	= frame_time;
	var config_time_to_wait	= time_to_wait;
	// Image-indicator
	var vars_img_list = document.getElementById(div_id).getElementsByTagName("img");
	var vars_img_amount = vars_img_list.length;
	if (vars_img_amount == 1)
	{
		this.runImg = function() {};
		return;
	}
	var vars_current_image = (current_image) ? current_image : 0;
	var vars_prev_current_image = vars_img_amount-1;
	// This vatiable save current effect-frame
	var fr_counter = 0;
	var thisObj = this;

	var action_on_change = (action_on_change) ? action_on_change : function(){};

	this.runImg = function () {
		action_on_change();
		if (vars_img_amount > 0) { 
			var next_img = vars_img_list[vars_current_image];
			next_img.style.zIndex = 2;
			this.js_gallery_opacity(next_img, 0);
			next_img.style.display = 'block';
			this.js_gallery_effect_first();
		}
		setTimeout(function(){thisObj.js_gallery_rotate_next();}, config_time_to_wait);
	}
	
	this.js_gallery_effect_first = function () {
		var next_img = vars_img_list[vars_current_image];
		fr_counter++;
		this.js_gallery_opacity(next_img, fr_counter/(config_frames));
		if (fr_counter < config_frames) {
			setTimeout(function(){thisObj.js_gallery_effect_first();}, config_frame_time);
		} else {
			fr_counter = 0;
		}
	} 
 
	this.js_gallery_effect = function () {
		var prev_img = vars_img_list[vars_prev_current_image];
		fr_counter++;
		this.js_gallery_opacity(prev_img, (config_frames-fr_counter)/config_frames);
		if (fr_counter < config_frames) {
			var thisObj = this;
			setTimeout(function(){thisObj.js_gallery_effect();}, config_frame_time);
		} else {
			prev_img.style.zIndex=0;
			this.js_gallery_opacity(prev_img, 1);
			var next_img = vars_img_list[vars_current_image];
			next_img.style.zIndex=2;
			fr_counter = 0;
		}
	} 
	
	this.js_gallery_rotate_next = function () {
		action_on_change();
		vars_prev_current_image = vars_current_image;
 		if (vars_current_image < vars_img_amount-1) {
			vars_current_image++;
		} else {
 			vars_current_image=0;
		}
		this.js_gallery_replace();
		setTimeout(function(){thisObj.js_gallery_rotate_next();}, config_time_to_wait);
	}
	
	this.js_gallery_replace = function () {
		for(var i=0; i<vars_img_amount; i++) {
			vars_img_list[i].style.zIndex=0;
		}
		var prev_img = vars_img_list[vars_prev_current_image];
		var next_img = vars_img_list[vars_current_image];
	
		prev_img.style.zIndex=2;
		next_img.style.zIndex=1;
 		next_img.style.display='block';
		this.js_gallery_opacity(prev_img, 1);
		this.js_gallery_effect();
	}
 
	this.js_gallery_opacity = function (img_canvas_some, up_img_opacity) {
		img_canvas_some.style.opacity = up_img_opacity;
		img_canvas_some.style.filter = "alpha(opacity="+Math.round(up_img_opacity*100)+")";
	}
}