/*
 * image crossFader and control moveTo sequence
 * auther:ikezaki
 * <ikezaki@impv.co.jp>
 * depend jquery
 */

var imageSeq = function (parent,bunbo,bunshi) {
	this.loaded    = 0;
	this.parent    = parent;
	this.nodes     = new Array();
	this.prepares  = new Array();
	//this.current   = 0;
	this.tid = null;
	this.playing=true;
	this.index     = 0;
	if(bunbo) {
		this.bunbo = $("#"+bunbo);
	}
	if(bunshi) {
		this.bunshi = $("#"+bunshi);
	}

	this.add = function (data) {
		this.prepares.push(data);
		/*
		var seqs  = new Array();
		var date  = parseInt((new Date)/1000);
		var image = document.createElement("img");
		$(image).css({
			"position" : "absolute",
			"left"  : data.startx,
			"top"   : data.starty,
			"opacity"     : 0,
			"-moz-opacity": 0,
			"filter"      : "alpha(opacity=0)"
		});
		$(image).attr("src",data.src+"?"+date);

		/*
		for(var i in data.seqs) {
			var seq = {
					"x" : data.seqs[i].x,
					"y" : data.seqs[i].y,
					"duration" : data.seqs[i].duration
			};
			seqs.push(seq);
		}*/

		//this.parent.appendChild(image);
		/*
		this.nodes.push(new imageNode(
				data.startx,
				data.starty,
				data.duration,
				image,
				seqs,
				this,
				this.nodes.length
		));*/
	}
	
	this.load  = function () {
		for(var i = 0 ; i < this.prepares.length;i++) {
			var data = this.prepares[i];
			var seqs  = new Array();
			var date  = parseInt((new Date)/1000);
			var image = document.createElement("img");
			$(image).css({
				"position" : "absolute",
				"left"  : data.startx,
				"top"   : data.starty,
				"opacity"     : 0,
				"-moz-opacity": 0,
				"filter"      : "alpha(opacity=0)"
			});
			var _this = this;
			
			$(image).get(0).onload = function() {
				++_this.loaded;
				var percent = Math.floor(_this.loaded / _this.prepares.length * 100);
				//console.log(percent);
				$("#progress").html(percent+"%");
				$("#progressbar").css({width:String(720 * (percent / 100))+"px"});
				if(percent >= 100) {
					$('#body,#imgCntl').fadeIn(1500);
					$('#content').show('');
					$("#progressbar").remove();
					$("#progress").remove();
					_this.start(0);
				}
			}
			$(image).attr("src",data.src+"?"+date);
	
			
			for(var i in data.seqs) {
				var seq = {
						"x" : data.seqs[i].x,
						"y" : data.seqs[i].y,
						"duration" : data.seqs[i].duration
				};
				seqs.push(seq);
			}
	
			//this.parent.appendChild(image);
			
			this.nodes.push(new imageNode(
					data.startx,
					data.starty,
					data.duration,
					image,
					seqs,
					this,
					this.nodes.length
			));			
		}
	}

	this.start = function () {

		if(this.bunshi) {

			var r = cnum_sep(this.index+1);
			var ten = document.createElement("img");
			var one = document.createElement("img");
			ten.src = "images/"+r.ten+".gif";
			one.src = "images/"+r.one+".gif";

			//this.bunshi.html(cnum(this.index+1));
			this.bunshi.empty();
			this.bunshi.append(ten).append(one);

		}
		if(this.bunbo) {
			//console.log(this.nodes.length);
			var r = cnum_sep(this.nodes.length);
			//console.log(r);
			var ten = document.createElement("img");
			var one = document.createElement("img");
			ten.src = "images/"+r.ten+".gif";
			one.src = "images/"+r.one+".gif";
			this.bunbo.empty();
			this.bunbo.append(ten).append(one);

			//this.bunbo.html(cnum(this.nodes.length));
		}
		var _this = this;
		var obj = this.nodes[this.index];
		this.parent.appendChild(obj.image);
		$(obj.image).fadeTo(1500,1);

		obj.move(0);

		//this.tid = setTimeout(this.next,obj.duration);

		if(this.playing){
			this.tid = setTimeout(function(){

				if(_this.tid) {
					clearTimeout(_this.tid);
				}

				//$(obj.image).fadeTo("slow",0,function(){
					obj.init();
				//});
				++_this.index;
				if(_this.index > _this.nodes.length-1 ) {
					_this.index = 0;
				}
				_this.start(_this.index);

			},obj.duration);
		}


	}

	this.next = function () {

		var before = this.nodes[this.index];

		++this.index;
		if(this.index > this.nodes.length-1 ) {
			this.index = 0;
		}
		var after = this.nodes[this.index];

		if(this.tid) {
			clearTimeout(this.tid);
		}

		before.init();

		this.start(this.index);
	}

	this.prev = function () {

		var before = this.nodes[this.index];

		--this.index;
		if(this.index < 0 ) {
			this.index = this.nodes.length-1;
		}
		var after = this.nodes[this.index];

		if(this.tid) {
			clearTimeout(this.tid);
		}

		before.init();

		this.start(this.index);
	}
	this.pause = function() {
		this.playing=false;
		clearTimeout(this.tid);
	}

	this.play  = function() {
		this.playing=true;
		this.start();
	}
}

var imageNode = function(startx,starty,duration,image,seqs,parent,me) {
	this.duration = duration;
	this.startx = startx;
	this.starty  = starty;
	this.image = image; 
	this.seqs  = seqs;
	this.parent = parent;
	this.me = me;
	this.is_init = true;
	this.move = function (index) {
		//console.log(index);
		var _this = this;
		if(seqs[index]) {
			$(this.image).animate({
				"left" : this.seqs[index].x,
				"top"  : this.seqs[index].y
			},
			this.seqs[index].duration,
			"swing",
			function () {
				if(_this.seqs.length == ++index) {
					//_this.move(0);
				} else {
					if(parent.index == me) {
						_this.move(index);
					}
				}
			});
		}
		this.is_init=false;
	}
	this.init = function () {
		var _this = this;
		while($(this.image).queue().length) {
			$(this.image).stop();
		}

		$(this.image).fadeTo(1500,0,function(){
			_this.parent.parent.removeChild(_this.image);
			/*
			$(_this.image).css({
				"left"  : _this.startx,
				"top"   : _this.starty,
				"opacity"     : 0,
				"-moz-opacity": 0,
				"filter"      : "alpha(opacity=0)"
			});*/
			_this.is_init=true;
		});
	}
}

function cnum(num) {
	var ten = Math.floor(num / 10);
	var one = num - (ten * 10);
	return String(ten)+String(one);
}
function cnum_sep(num) {
	var ten = Math.floor(num / 10);
	var one = num - (ten * 10);
	return {"ten":ten,"one":one};
}