/**
 * imagebox.js
 * 
 * version:	3.0
 * date: 2009-12-22
 * Author: Fujiwara
 *
 */


var imageBox = {

	init: function(data){
		
		for (var i = 0, l =data.length; i < l; i++) {

			if(document.getElementById(data[i].parentBox)) {
				this.set(document.getElementById(data[i].parentBox), data[i]);
				
			} else {
				
				var _div = document.getElementsByTagName('div');
				
				for(var j = 0, m = _div.length; j < m; j++) {
					if(this.hasClassName(_div[j], data[i].parentBox)) this.set(_div[j], data[i]);	
				};
			};
		};
	},

	
	set: function(_div, data){
	
		var _img = _div.getElementsByTagName('img');
		
		for(var i = 0, l = _img.length; i < l; i++) {
			
			if(this.hasClassName(_img[i], data.image)){
				var _src = _img[i];
				var _dSrc = _src.src;
			};
		};
		
		
		var _tags = _div.getElementsByTagName('*');

		for(var j = 0, l = _tags.length; j < l; j++) {
						
			if(this.hasClassName(_tags[j], data.text)){
				var _text = _tags[j];
			};
		};
		
		
		for(var q = 0, l = _tags.length; q < l; q++) {
						
			if(this.hasClassName(_tags[q], data.thumbnail)){
				var _a = _tags[q].getElementsByTagName('a');
				
				for(var k = 0, l = _a.length; k < l; k++) {
					
					if(data.mouse == 'mouseover'){
						this.mouseoverEvent(_a, k, _src, _dSrc, _text, data);
						
					} else {
						this.mouseEvent(_a, k, _src, _text, data);
					}
				};
			};
		};
	},

	
	mouseEvent: function(_a, k, _src, _text, data){
		
		_a[k].onclick = function(){
			_src.src = this.href;
			if(data.data) _text.innerHTML = data.data[k];
			return false;
		};
	},
	
	
	mouseoverEvent: function(_a, k, _src, _dSrc, _text, data){
	
		_a[k].onmouseover = function(){
			
			var t = this.getElementsByTagName('img')[0];
			t.ext = t.src.substring(t.src.lastIndexOf('.'), t.src.length);
			
			_src.src = t.src.replace(t.ext, '_s' + t.ext);
			if(data.data) _text.innerHTML = data.data[k];
		};
		
		/*
		_a[k].onmouseout = function(){
			_src.src = _dSrc;
			if(data.data) _text.innerHTML = data.data[0];
		};
		*/

		_a[k].onclick = function(){
			return false;
		};
		
	},
	
	
	hasClassName: function(target, value) {
		var c = target.className.split(' ');
		var i = c.length;
		while(i--) {
			if (c[i] == value) {
				return true;
				break;
			}
		}
	}

};

window.onload = function() { imageBox.init(imageBox.box)};


imageBox.box = [
	{
		parentBox: 'aBox',
		image: 'iBox',
		thumbnail: 'iList',
		mouse: 'mouseover'
		
	}
];


/* 
:::::::::::::::::::::::::::::::::::::::::::::　example

:::::::::::::::::: html

<div id="parentBox">
<p><img src="1.gif" alt="sample" class="image" /></p>

<ul class="thumbnail">
<li><a href="1.gif"><img src="t1.gif" alt="sample1" /></li>
<li><a href="2.gif"><img src="t2.gif" alt="sample1" /></li>
<li><a href="3.gif"><img src="t3.gif" alt="sample1" /></li>
</ul>

<div class="text">
<p>ここのテキストが入れ替わります</p>
</div>
</div><!-- /parentBox -->



:::::::::::::::::: js

imageBox.box = [
	{
		parentBox: 'id or class', (textを使う場合はid)
		image: 'class,
		thumbnail: 'class',
		text: 'class',
		data: [
			   '<p><a href="">テスト1</a></p>',
			   '<p><a href="">テスト2</a></p>',
			   '<p><a href="">テスト3</a></p>'
			   ]
		
}

::: mouseoverの場合下記追加
mouse: 'mouseover' 


*/