/**
 * ImageMovie.js
 *  
 *   
 *   copyright : 'DoEvery Corp., Ltd.',
 *   author    : 'Toyoichiroh Yamashita <futaroh@doevery.com>',
 *   
 *   再配布する場合は、ソースの改変をしないでください。
 *
 *   revision
 *    2008-03-11 IE7で動作しない不具合を解消
 */
var ImageMovie = {
	date       : '2008-03-11',
	version    : '0.5.1',
	imageWidth : 80,
	imageHeight: 60,
	speed: 1,
	direction:'left',  // 'up' || 'down' || 'right' || 'left'
	canvas:'',
	images: new Array,
	offset:0,
	swPosition:0,
	actionFlg:true,
	isDrag:false,
	dragX:0,
	_controller:'', // for internal use
	end: function() { }
}


ImageMovie.start = function (name,data) {

	// avoid error for IE
	if (!document.getElementById) {
		setTimeout("ImageMovie.start('"+name+"','"+data+"')",200);
		return;
	}

	// 描画領域の取得と設定
	space = document.getElementById(name);
	try {
		if (space.nodeName != 'DIV') {
			alert("only DIV element can use for ImageMovie");
			return;
		}
	} catch(e) {
		alert("can't find the div that has id='"+name+"'");
		return;
	}

	space.style.overflow='hidden';
	space.style.position='relative'; // おまじない for IE7
	this.canvas = document.createElement('div');
	this.canvas.style.position='relative';
	this.canvas.style.height=this.imageHeight;
	this.canvas.onmouseover=ImageMovie.mouseover;
	this.canvas.onmouseout=ImageMovie.mouseout;
	this.imageHeight = space.clientHeight;
	space.appendChild(this.canvas);

	// _controller (not 'canvas') use for internal
	this._controller = document.createElement('div');
	this._controller.style.height=this.imageHeight;
	space.appendChild(this._controller);


	this.canvas.width = 0;
	// load images
	var cnt=0;
	while (this.canvas.width-this.swPosition<space.clientWidth) {
		for (i=0;i<data.length;i++) {
			url = data[i][0];
			link= data[i][1];
			text= data[i][2];

			// create img element
			var img = new Image(this.imageWidth,this.imageHeight);
			img.src = url;
			img.width = this.imageWidth; // 上記で初期値を保持できないブラウザがある
			img.height= this.imageHeight;
			//img.onmouseover=function(){ImageMovie.mouseover(this);}
			//img.onmouseout =function(){ImageMovie.mouseout(this);}
			img.style.border='none';


			// 横幅優先でアスペクト比を保持
			//img.height *= imageWidth/img.width;
			//img.width=imageWidth;

			// 高さ優先でアスペクト比を保持
			img.width *= this.imageHeight/img.height;
			img.height=this.imageHeight;
			this.canvas.width += img.width;

			// link
			var anchor = document.createElement('a');
			anchor.href = link;
			anchor.title = text;
			anchor.appendChild(img)

			this.images.push(anchor);

		}
		// 幅設定
		if (cnt==0) this.swPosition = this.canvas.width;

		if (cnt++>100) break;
	}


	this.canvas.style.width=this.canvas.width +'px';

	// canvasの描画
	for (i=0; i<this.images.length;i++) {
		this.canvas.appendChild(this.images[i]);
	}

	// scroll start
	setInterval("ImageMovie.scroll()",80);


	// controller
	controller = document.createElement('div');
	controller.id='imageMoviePowered';
	controller.cnt=0;
	// x = parseInt(space.offsetLeft - 10); // 2009.01.16 comment out
	x=0;
	controller.style.position='relative';
	controller.style.top = '0px';
	controller.style.left= x+'px';
	controller.style.fontFamily="Times New Roman";
	controller.style.fontSize="22px";
	controller.style.color="#000000";
	controller.style.textAlign= 'center';
	controller.style.overflow= 'hidden';
	controller.style.padding= '0px';
	controller.style.margin= '0px';
	controller.style.width= space.clientWidth;
	controller.style.backgroundColor= '#ccccff';
	controller.onmouseover=this.canvas.onmouseover;
	controller.onmouseout=this.canvas.onmouseout;
	// for IE7
	if (navigator.userAgent.match(/MSIE 7/)) {
		//controller._offsetTop = this.imageHeight/2-22;
		controller._offsetTop = this.imageHeight-60;
		controller.style.top = controller._offsetTop+'px';
	} else {
		controller._offsetTop = 0;
	}

	html ='';
	html += '<span style="padding-left:1px">&nbsp;</span>';
	html += '<span style="background-color:#333333;color:#ffffff" onClick="ImageMovie.leftFast()">&lt;&lt;</span>';
	html += '<span style="padding-left:1px">&nbsp;</span>';
	html += '<span style="background-color:#333333;color:#ffffff;padding:8px" onClick="ImageMovie.left()">&lt;</span>';
	html += '<span style="padding-left:30px">&nbsp;</span>';
	html += '<span style="background-color:#333333;color:#ffffff;padding:8px" onClick="ImageMovie.right()">&gt;</span>';
	html += '<span style="padding-left:1px">&nbsp;</span>';
	html += '<span style="background-color:#333333;color:#ffffff" onClick="ImageMovie.rightFast()">&gt;&gt;</span>';
	html += '<span style="padding-left:30px">&nbsp;</span>';
	html += '<span style="font-size:12px" onClick="location.href=\'http://www.doevery.com\'">Powered by &nbsp;&nbsp;<b style="font:italic bold 150%/120% \'Times New Roman\'">DoEvery Corp., Ltd.</b></span>';
	controller.innerHTML=html;

	this.skelton(controller);
	this._controller.appendChild(controller);
}
ImageMovie.skelton = function(obj) {
	// IE
	if (navigator.userAgent.match(/MSIE (\d.\d)/)) {
		obj.style.filter='Alpha(opacity=80)';
	} else {
		obj.style.MozOpacity=0.8;
	}
}


// scroll
ImageMovie.scroll = function () {
	if (this.actionFlg) {
		switch(this.direction) {
		case 'left':
			this.scrollLeft();
			break;

		case 'right':
			this.scrollRight();
			break;
		}
	}
}
ImageMovie.scrollLeft = function () {
	this.offset -= this.speed;
	this.canvas.style.left = (this.offset)+'px';

	if (- this.offset >= this.swPosition) {
		this.offset = 0;
	}
}
ImageMovie.scrollRight = function () {
	this.offset += this.speed;
	this.canvas.style.left = (this.offset)+'px';

	if ( this.offset >= 0) {
		this.offset = - this.swPosition;
	}
}

// controller emerge
ImageMovie.controllerEmerge= function () {
	obj = document.getElementById('imageMoviePowered');
	obj.cnt --;
	if (obj.cnt > -25) {
		obj.style.top = parseInt(obj.cnt+obj._offsetTop).toString()+'px';
		setTimeout("ImageMovie.controllerEmerge()",20);
	} else {
		if (!obj.disppearing) {
			obj.disppearing=true;
			setTimeout("ImageMovie.controllerDisappear()",4000);
		}
	}
}
// controller Disappear
ImageMovie.controllerDisappear = function () {
	obj = document.getElementById('imageMoviePowered');
	if (obj.cnt < -25) obj.cnt=-25;
	obj.cnt ++;
	if (obj.cnt < 2) {
		obj.style.top = parseInt(obj.cnt+obj._offsetTop).toString()+'px';
		setTimeout("ImageMovie.controllerDisappear()",20);
	} else {
		obj.disppearing=false;
	}
}

// mouseOver Action
ImageMovie.mouseover = function (img) {
	obj = document.getElementById('imageMoviePowered');
	if (obj.disppearing == true) return;
	ImageMovie.controllerEmerge();
}

// mouseOut Action
ImageMovie.mouseout = function () {
}

// DragStart Action
ImageMovie.mousedown = function () {
}

// DragEnd Action
ImageMovie.mouseup = function () {
}

// Drag Action
ImageMovie.mousemove = function () {
}


// Control Definition
ImageMovie.leftFast = function () {
	this.speed = 12;
	this.direction='left';
}
ImageMovie.left = function () {
	this.speed = 1;
	this.direction='left';
}
ImageMovie.right = function () {
	this.speed = 1;
	this.direction='right';
}
ImageMovie.rightFast = function () {
	this.speed = 12;
	this.direction='right';
}