/**
 * zoom
 */
var zoom = function(id_name, options){
	
	if (! $(id_name)) {
		return false;
	}
	
	// zoom box用エレメントを追加
	var id = 'zoom_box';
	if (! $(id) ){
		var zoom_box = document.createElement('div');
		zoom_box.id = id;
		zoom_box.style.position = 'absolute';
		zoom_box.style.top = '0px';
		zoom_box.style.left = '0px';
		zoom_box.style.width = '0';
		zoom_box.style.height = '0';
		zoom_box.style.overflow = 'visible';
		zoom_box.style.lineHeight = 'normal';
		zoom_box.style.padding = '0px';
		document.body.appendChild(zoom_box);
	}
	
	this.id      = id;
	this.element = $(id_name);
	this.options = options;
	
	// 画像読み込み
	this._load_image_file();
	
	// イベントを登録
	this._register_events();
};

zoom.prototype = {
	
	// タイマー
	timer:null,
	
	// 画像先読み
	_load_image_file: function() {
		if (this.options.imagefile){
			img     = new Image();
			img.src = this.options.imagefile;
		}
	} ,
	
	// マウスオーバーイベントを登録
	_register_events: function(){
		Event.observe(this.element, "mouseover", this._start.bindAsEventListener(this), false);
	},
	
	// ズーム画像表示開始
	_start: function() {
		
		id           = this.id;
		templatefile = this.options.templatefile;
		imagefile    = this.options.imagefile;
		cssfile      = this.options.cssfile;
		x            = this.options.x;
		y            = this.options.y;
		relative_id  = this.options.relative_id;
		hash         = this.options;

		// デフォルト
		if (! x){ x=0; }
		if (! y){ y=0; }
		if (! templatefile) {
			templatefile = '/common/zoom/template01.html';
			cssfile = '/common/zoom/template01.css';
		}
		
		// 相対座標
		if (relative_id){
			relative_x = this._get_position($(relative_id)).x;
			relative_y = this._get_position($(relative_id)).y;
			x = x + relative_x;
			y = y + relative_y;
		}
		
		$(id).innerHTML = '';
	
		// CSSが指定されていたら
		if (cssfile && (! $(cssfile))){
			// CSSのリンクを追加
			var css  = document.createElement('link');
			css.rel  = 'stylesheet';
			css.href = cssfile;
			css.type = 'text/css';
			css.id = cssfile;
			document.getElementsByTagName('head')[0].appendChild(css);
		}
		
		// テンプレートファイルをロード
		new Ajax.Request(templatefile, {
			method     : 'get',
			onFailure  : function() {
				return false;
			},
			onSuccess  : this._view_template_ajax.bindAsEventListener(this),
			onComplete : function(httpObj){
			}
		});
		
	} ,
	// ajaxで取得したテンプレート
	_view_template_ajax: function(httpObj) {
		
		var text = httpObj.responseText;
		text = this._ajax_filter(text);
		
		this._view_template(text);
	} ,
	
	// ズーム画像を表示する
	_view_template: function(text) {
		
		var template = new Template(text);
		
		// スタイルシート
		hash.style='style="position:relative; top:'+y+'px; left:'+x+'px; z-index:1001; display:none; overflow:visible;padding: 0px"';
		$(id).innerHTML = template.evaluate(hash);
		
		// 表示
		this._show_zoom_image();
		
		// マウスアウトイベント監視スタート
		this._event_observe();
	},
	
	
	// ajax_filter
	_ajax_filter: function(t){
		// Safariの文字化け対策
		if(navigator.appVersion.indexOf( "KHTML" ) > -1){
			_ajax_filter = function(t){
				var esc = escape(t);
				return(esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t
			}
		}
		return t;
	},
	
	// positionを取得する
	_get_position: function(dom_obj){
		var	position = {x:dom_obj.offsetLeft, y:dom_obj.offsetTop};
		while(dom_obj = dom_obj.offsetParent){
			position.x += dom_obj.offsetLeft;
			position.y += dom_obj.offsetTop;
		};
		return position;
	},
	
	// ズーム画像を表示する
	_show_zoom_image: function(){
		this._hide_ie6_select();
		$('zoom_element').show();
		
		if (this.timer) {
			clearTimeout(this.timer);
		}
		
		// 5秒後に消す
		(function(target){
			target.timer = window.setTimeout(function(){target.timer = null; target._hide_zoom_image(false);}, 5000);
		})(this);
	},
	
	// マウスアウトイベントを登録
	_event_observe: function(){
		Event.observe( $('zoom_element'), 'mouseout', this._hide_zoom_image.bindAsEventListener(this), false);
	},
	
	// マウスアウトイベントを解除
	_event_stop_observe: function() {
		Event.stopObserving( $('zoom_element'), 'mouseout', this._hide_zoom_image.bindAsEventListener(this), false);
	},
	
	// マウスアウトのエリアをチェック
	_check_mouseout_area: function(event) {
		// 要素内のmouseoutだったら
		if ($(event.relatedTarget) && $(event.currentTarget)) {
			if (Element.childOf(event.relatedTarget, event.currentTarget)) {
				// 無視
				return false;
			}
		}
		return true;
	},
	
	// ズーム画像を消す
	_hide_zoom_image: function(event){
		
		if (event) {
			if (!this._check_mouseout_area(event)) {
				return false;
			}
		}
		this._event_stop_observe();
		
		$('zoom_element').hide();
	},
	
	// ie6のセレクトボックスを隠す
	_hide_ie6_select: function(){
	
		if (navigator.userAgent.indexOf('MSIE 6.',0) == -1){ return; }
		else{
			var elements = document.getElementsByTagName('select');
			for (var j = 0, len2 = elements.length; j < len2; j++) {
				elements[j].style.visibility = 'hidden';
			}
		}
	} ,
	// ie6のセレクトボックスの表示を戻す
	_show_ie6_select: function(){
	
		if (navigator.userAgent.indexOf('MSIE 6.',0) == -1){ return; }
		else{
			var elements = document.getElementsByTagName('select');
			for (var j = 0, len2 = elements.length; j < len2; j++) {
				elements[j].style.visibility = 'visible';
			}
		}
	}
}

/**
 * zoomオブジェクトをセット
 */
if(window['Prototype']) {
	Element.observe(window, 'load', function(){
		
		if ($('zoom_pmark'))
		{
			new zoom("zoom_pmark", {'imagefile':'/images/p-mark-l.gif', 
								'relative_id' : "zoom_pmark",
								'x' : -158,
								'y' : -175,
								'linkurl' : 'http://privacymark.jp/',
								'title' : 'プライバシーマーク'
								});
		}
		if ($('zoom_isms')) 
		{
			new zoom("zoom_isms", {'imagefile':'/images/isms-l.gif', 
								'relative_id' : "zoom_isms",
								'x' : -250,
								'y' : -200,
								'linkurl' : 'http://www.isms.jipdec.jp/isms.html',
								'title' : 'ISMS'
								});
		}
	}, false);
}