/**
 * area要素にマウスイベントを追加する
 * @param	container:* - id名 || ELEMENT_NODE || undefined
 * @param	usemapId:String - map要素のid
 * @param	image:Array - スワップする画像のサイトルートからのパス（area要素の順番）
 * @return	{Void}
 */
Kaas.imageMapover = function(container, usemapId, images) {
	
	var c = Kaas.$(container);
	var target, tsrc;
	var map = document.getElementById(usemapId);
	var img = c.getElementsByTagName('img');
	for (var j = 0, k = img.length; j < k; j++) {
		if (img[j].getAttribute('usemap') == '#' + usemapId) {
			target = img[j];
			tsrc   = img[j].getAttribute('src');
			break;
		}
	}
	
	var area = c.getElementsByTagName('area');
	var _root = Kaas.root();
	for (var i = 0, l = images.length; i < l; i++) {
		var a = area[i];
		a.index = i;
		
		var _preloader = new Image();
		_preloader.src = _root + images[i];
		
		a.onmouseover = function() {
			target.src = _root + images[this.index];
		};
		a.onmouseout = function() {
			target.src = tsrc;
		};
	}
	
};

Kaas.ready(function() {
	Kaas.imageMapover('col-a', 'imagemapC', [
		'concept/img/imagemap01.jpg',
		'concept/img/imagemap02.jpg',
		'concept/img/imagemap03.jpg',
		'concept/img/imagemap04.jpg'
	]);
});