var fadeout_opacity = 100;  // 子ウィンドウの不透明度初期値
var board_top_dif;         // マウスポインタと子ウィンドウのY座標の差分
var board_left_dif;        // マスポインタと子ウィンドウのX座標の差分
var fname = "";
var fmsg = "";
var ftitle = "";
var board;
var imgbox;
var bar;
var comment;
var n = 0;
var flashcontent;
var chk = false;//子ウィンドウが表示されているかどうか。
var clickok = true;
var close;// = document.getElementById('close');

function getBrowserInfo(filename, filemsg, filetitle){
	if(clickok == true){
		fname = "img/b_"+filename;
		fmsg = filemsg.replace(/#br#/g, "<br>");
		ftitle = filetitle;
		openChildWindow();
		return true;
	}
}

function openChildWindow() {
	clickok = false;
	if(n>=fadeout_opacity){
		chk = true;
		fadeout();
	}else{
		board.style.zIndex = 1;
		flashcontent.style.zIndex = -1;
	    board.style.visibility = 'visible';
	    if(document.getElementById('bigimg')){
	    	var bigimg = document.getElementById('bigimg');
	    	bigimg.parentNode.removeChild(bigimg);
	    }
	    var bigimg = document.createElement('img');
	    bigimg.id = 'bigimg';
	  	bigimg.src = fname;
		imgbox.appendChild(bigimg);
		document.getElementById('comment').innerHTML = fmsg;
		if(chk==false) fadein();
	}
}

// 子ウィンドウを閉じる
function closeChildWindow() {
	if(clickok != false) clickok = false;
	board.style.opacity = n / 100;
	board.style.mozOpacity = n / 100;
	board.style.filter = "alpha(opacity="+n+")";
	n -= 5;
	if(n >= 0){
		setTimeout("closeChildWindow()", 50);
	}else{
		n = 0;
		board.style.zIndex = -1;
		flashcontent.style.zIndex = 1;
		chk = false;
		clickok = true;
	}
}

var timerfadein;
function fadein(){
	if(clickok == false){
		board.style.opacity = n / 100;
		board.style.mozOpacity = n / 100;
		board.style.filter = "alpha(opacity="+n+")";
		n += 5;//	msg.innerHTML = "IN-> " + n;
		if(n<=fadeout_opacity){
			timerfadein = setTimeout("fadein()", 50);
		}else{
			clickok = true;
			n = 100;
			bar.style.opacity = n / 100;
			bar.style.mozOpacity = n / 100;
			bar.style.filter = "alpha(opacity="+n+")";
			comment.style.opacity = n / 100;
			comment.style.mozOpacity = n / 100;
			comment.style.filter = "alpha(opacity="+n+")";
			clearTimeout(timerfadein);
		}
	}
}

var timerfadeout;
function fadeout() {
	if(clickok == false){
		board.style.opacity = n / 100;
		board.style.mozOpacity = n / 100;
		board.style.filter = "alpha(opacity="+n+")";
		n -= 5;
		if(n >= 0){
			timerfadeout = setTimeout("fadeout()", 50);
		}else{
			n=0;
			board.style.zIndex = -1;
			flashcontent.style.zIndex = 1;
			chk = false;
			clearTimeout(timerfadeout);
			openChildWindow();
		}
	}
}

// ドラッグ開始
function dragStart(e) {
    // 子ウィンドウとマウスポインターの位置の差分を求める
    board_left_dif = e.clientX - parseInt(board.style.left);
    board_top_dif = e.clientY - parseInt(board.style.top);
    // イベントリスナーを"bar"にセット
    addListener(bar, 'mousemove', moveChildWindow, false);
    addListener(bar, 'mouseup', dragEnd, false);
    addListener(bar, 'mouseout', dragEnd, false);
    // イベントリスナーを"comment"にセット
    addListener(comment, 'mousemove', moveChildWindow, false);
    addListener(comment, 'mouseup', dragEnd, false);
    addListener(comment, 'mouseout', dragEnd, false);
}

// ドラッグ終了
function dragEnd(e) {
    // "bar"にセットされたイベントリスナーを解除
    removeListener(bar, 'mousemove', moveChildWindow, false);
    removeListener(bar, 'mouseup', dragEnd, false);
    removeListener(bar, 'mouseout', dragEnd, false);
	// "comment"にセットされたイベントリスナーを解除
    removeListener(comment, 'mousemove', moveChildWindow, false);
    removeListener(comment, 'mouseup', dragEnd, false);
    removeListener(comment, 'mouseout', dragEnd, false);
}

// ドラッグ中（子ウィンドウ移動）
function moveChildWindow(e) {
    board.style.left = (e.clientX - board_left_dif) + 'px';
    board.style.top = (e.clientY - board_top_dif) + 'px';
}

// イベントリスナー解除
function removeListener(elem, eventType, func, cap) {
    if(elem.removeEventListener) {
        elem.removeEventListener(eventType, func, cap);
    } else if(elem.detachEvent) {
        elem.detachEvent('on' + eventType, func);
    }
}

// イベントリスナー登録
function addListener(elem, eventType, func, cap) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, func, cap);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, func);
    } else {
        alert('ご利用のブラウザーはサポートされていません。');
        return false;
    }
}


// load時のイベントリスナーをセットする
function setListeners(e) {

    board = document.getElementById('board');
    
    board.style.top = '210px';
    board.style.left = '50px';
    
    imgbox = document.getElementById('imgbox');

    flashcontent = document.getElementById('flashcontent');
    
    bar = document.getElementById('bar');
    addListener(bar, 'mousedown', dragStart, false);
    
    comment = document.getElementById('comment');
    addListener(comment, 'mousedown', dragStart, false);

	close = document.getElementById('close');
    addListener(close, 'click', closeChildWindow, false);
    
}

// HTMLがロードされた際に、setListeners()関数を実行させる
addListener(window, 'load', setListeners, false);


function swapImage(btnObj, sURL){
	btnObj.src = sURL;
}