function AnimationStrips() {}

AnimationStrips.strips = {};

AnimationStrips.addStrip = function(params) {
	AnimationStrips.strips[params.id] = new AnimationStrip(params);
}

AnimationStrips.createStripAndHtml = function(params) {
	AnimationStrips.addStrip({id: params.id, frame_width: params.frame_width, frame_height: params.frame_height, img_width: params.img_width, img_height: params.img_height, frame_rate: params.frame_rate});
	
	var html = "";
	
	//animation strip container
	html += "<div id='div_asc_"+params.id+"' class='animationStripContainer' style='width: "+params.frame_width+"px; height: "+params.frame_height+"px;'>\n";
		//animation strip frames
		html += "<div id='div_asf_"+params.id+"' class='animationStripFrames'>\n";
			//animation strip image
			html += "<img id='img_asi_"+params.id+"' class='animationStripImg' src='"+params.img_url+"' width='"+params.img_width+"' height='"+params.img_height+"' border='0'>\n"; 
		html += "</div>\n";
	html += "</div>\n";
		
	return html;
}



function AnimationStrip(params) {
	this.id = params.id;
	this.frame_width = params.frame_width;
	this.frame_height = params.frame_height;
	this.img_width = params.img_width;
	this.img_height = params.img_height;
	this.frame_rate = params.frame_rate;
	
	this.direction = null;
	this.move_incr = 0;
	this.num_frames = 0;
	this.time_incr = 0
	
	this.playing = false;
	
	this.timeout = null;
	
	this.current_frame = 1;
	
	this.initialize();
}

AnimationStrip.prototype.initialize = function() {
	if (this.img_height == this.frame_height) { //horizontal strip
		this.direction = "left";
		this.move_incr = this.frame_width;
		this.num_frames = Math.floor(this.img_width / this.frame_width);
	
	} else { //vertical strip
		this.direction = "top";
		this.move_incr = this.frame_height;
		this.num_frames = Math.floor(this.img_height / this.frame_height);
	}
	
	this.time_incr = Math.floor(1000 / this.frame_rate);
}

AnimationStrip.prototype.clearTimeout = function() {
	clearTimeout(this.timeout);
	this.timeout = null;
}

AnimationStrip.prototype.start = function() {
	this.playing = true;
	this.playForward();
}

AnimationStrip.prototype.pause = function() {
	this.clearTimeout();
	this.playing = false;
}

AnimationStrip.prototype.stop = function() {
	this.clearTimeout();
	this.reset();
	this.playing = false;
}

AnimationStrip.prototype.reset = function() {
	if (this.direction == "left") {
		Utils.setStyleLeft("div_asf_"+this.id, 0);
	} else {
		Utils.setStyleTop("div_asf_"+this.id, 0);
	}
}

AnimationStrip.prototype.stepForward = function() {
	if (this.current_frame == this.num_frames) {
		this.current_frame = 1;
	} else {
		this.current_frame++;
	}
	var position = -1 * (this.current_frame - 1) * this.move_incr;
	if (this.direction == "left") {
		Utils.setStyleLeft("div_asf_"+this.id, position);
	} else {
		Utils.setStyleTop("div_asf_"+this.id, position);
	}
}

AnimationStrip.prototype.playForward = function() {
	this.stepForward();
	this.timeout = setTimeout("AnimationStrips.strips['"+this.id+"'].playForward();", this.time_incr);
}