/* ====================================================================
 Function   :「メインビジュアル制御スクリプト」
 Programmer : Etoh Yusuke[INCS Engineering Inc.]
 Version    : 0.1.0
 New        : 2011/09/02
 Update     : ----/--/--
-----------------------------------------------------------------------
 Revision   : 0.1.1 2011/09/05 Etoh Yusuke
            : 1. 画像にマウスオーバーした際にカーソルアイコンを変更
            : 2. クリックした際のイベント処理を追加
-----------------------------------------------------------------------
 Copyright (C) 2011 INCS Engineering Inc. All Rights Reserved.
==================================================================== */
// --------------------------------------------------------------------
// 共通変数
// --------------------------------------------------------------------
var AUTO_PLAY_TIMES = 10;           // 自動再生回数を設定(0は無制限)
var AUTO_PLAY_INTERVAL = 2500;      // 自動再生インターバル(1Sec. = 1000)
var AUTO_FADEIN_PARAM = 300;        // 画像フェードインパラメータ
var MANU_FADEIN_PARAM = 50;         // マウスオーバー時のフェードインパラメータ
var AUTO_ANIMATE_PARAM = 350;       // アニメーションパラメータ
var MANU_ANIMATE_PARAM = 300;       // アニメーションパラメータ
var CL_ON = 1.0;                    // 透明度なし
var CL_HARF = 0.7;                  // 透明度半分
var CL_OFF = 0.0;                   // 透明度あり(可視できない)
var TX_ON = 1.0;                    // テキスト透明度なし
var TX_OFF = 0.0;                   // テキスト透明度あり(可視できない)
var DARK_COLOR = "#000000";         // ダーク系カラー
var WHITE_COLOR = "#f4f4f4";        // ホワイト系カラー
var CUT_IMAGE = "cutImage";         // HTML要素ID(カット画像)
var BOX_IMAGE = "boxImage";         // HTML要素ID(テキストボックス背景画像)
var BOX_TITLE = "boxTitle";         // HTML要素ID(テキストボックス内タイトル)
var BOX_MESSAGE = "boxMessage";     // HTML要素ID(テキストボックス内メッセージ)
var JUMP_URL1 = "./././product/technology.html#tec01"    // 遷移先URL1
var JUMP_URL2 = "./././product/technology.html#tec04"    // 遷移先URL2
var JUMP_URL3 = "./././product/technology.html#tec02" // 遷移先URL3
var JUMP_URL4 = "./././product/technology.html#tec03"  // 遷移先URL4
 
// テキストボックスに表示する文言(TITLE/MESSAGEで1セット)
// <BR>タグを使うことで、任意の位置で改行できる。
var M_TITLE1_JP = "デザイン";
var M_TITLE2_JP = "リバースエンジニアリング";
var M_TITLE3_JP = "設計";
var M_TITLE4_JP = "解析";
var M_MESSAGE1_JP = "Styling design";
var M_MESSAGE2_JP = "Reverse engineering";
var M_MESSAGE3_JP = "Design";
var M_MESSAGE4_JP = "Analysis";
 
// テキストボックスのタイトルとメッセージを配列に格納
var titles = new Array(M_TITLE1_JP, M_TITLE2_JP, M_TITLE3_JP, M_TITLE4_JP);
var messages = new Array(M_MESSAGE1_JP, M_MESSAGE2_JP, M_MESSAGE3_JP, M_MESSAGE4_JP);
 
var loopCount = 0;                  // 自動再生ループカウンタ
var autoPlayCount = 0;              // 自動再生回数カウンタ
var tid;                            // 自動再生INDEX(ループを止めるのに必要)
 
/*
 * スムーズな背景色変化させるスクリプト
 * 画像領域の外側に設けたdivタグ領域(imageSpace)内にマウスカーソルが
 * インした場合はダーク系に変移させ、アウトした場合はホワイト系に変移させる。
 */
$(function() {
    autoInterval();
	
    // 画像1 マウスイベント
    $("#cutImage1,#boxImage1,#boxTitle1,#boxMessage1").mouseover(function(event) {
        if (!isSameTargetId(1, event)) {
            parameterSetting(MANU_FADEIN_PARAM, arrayFactory(CL_ON, CL_OFF, CL_OFF, CL_OFF));
            textBoxSetting(MANU_FADEIN_PARAM, arrayFactory(CL_HARF, CL_OFF, CL_OFF, CL_OFF), arrayFactory(TX_ON, TX_OFF, TX_OFF, TX_OFF));
            loopCount = 2;
        }
    });
    $("#cutImage1,#boxImage1,#boxTitle1,#boxMessage1").mouseout(function(event) {
        if (!isSameTargetId(1, event)) mouseOutCommon();
    });
    $("#cutImage1,#boxImage1,#boxTitle1,#boxMessage1").click(function(event) {
        location.href = JUMP_URL1;
    });
 
    // 画像2 マウスイベント
    $("#cutImage2,#boxImage2,#boxTitle2,#boxMessage2").mouseover(function(event) {
        if (!isSameTargetId(2, event)) {
            parameterSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_ON, CL_OFF, CL_OFF));
            textBoxSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_HARF, CL_OFF, CL_OFF), arrayFactory(TX_OFF, TX_ON, TX_OFF, TX_OFF));
            loopCount = 3;
        }
    });
    $("#cutImage2,#boxImage2,#boxTitle2,#boxMessage2").mouseout(function(event) {
        if (!isSameTargetId(2, event)) mouseOutCommon();
    });
    $("#cutImage2,#boxImage2,#boxTitle2,#boxMessage2").click(function(event) {
        location.href = JUMP_URL2;
    });
 
    // 画像3 マウスイベント
    $("#cutImage3,#boxImage3,#boxTitle3,#boxMessage3").mouseover(function(event) {
        if (!isSameTargetId(3, event)) {
            parameterSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_ON, CL_OFF));
            textBoxSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_HARF, CL_OFF), arrayFactory(TX_OFF, TX_OFF, TX_ON, TX_OFF));
            loopCount = 4;
        }
    });
    $("#cutImage3,#boxImage3,#boxTitle3,#boxMessage3").mouseout(function(event) {
        if (!isSameTargetId(3, event)) mouseOutCommon();
    });
    $("#cutImage3,#boxImage3,#boxTitle3,#boxMessage3").click(function(event) {
        location.href = JUMP_URL3;
    });
 
    // 画像4 マウスイベント
    $("#cutImage4,#boxImage4,#boxTitle4,#boxMessage4").mouseover(function(event) {
        if (!isSameTargetId(4, event)) {
            parameterSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_ON));
            textBoxSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_HARF), arrayFactory(TX_OFF, TX_OFF, TX_OFF, TX_ON));
            loopCount = 1;
        }
    });
    $("#cutImage4,#boxImage4,#boxTitle4,#boxMessage4").mouseout(function(event) {
        if (!isSameTargetId(4, event)) mouseOutCommon();
    });
    $("#cutImage4,#boxImage4,#boxTitle4,#boxMessage4").click(function(event) {
        location.href = JUMP_URL4;
    });
 
    // 基準画像(加工していない画像)
    $("#defaultImage").css({backgroundColor:WHITE_COLOR});
    $("#imageSpace").hover(function() {
        animateBackgroundColorSetting(DARK_COLOR, MANU_ANIMATE_PARAM)
        clearInterval(tid);
    },function() {
        animateBackgroundColorSetting(WHITE_COLOR, MANU_ANIMATE_PARAM)
        autoInterval();
    });
 
    /**
     * mouseoutイベント共通処理
     * イメージからフォーカスアウトした際に画像の表示状態をデフォルトに戻す
     */
    function mouseOutCommon() {
        autoPlayCount = 0;
        parameterSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_OFF));
        textBoxSetting(MANU_FADEIN_PARAM, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_OFF), arrayFactory(TX_OFF, TX_OFF, TX_OFF, TX_OFF));
    }
 
    /**
     * 自動再生処理
     * 自動再生回数を設定していた場合、画像からマウスカーソルをフォーカスアウトすると
     * 再生回数カウンタが0となり、自動再生が再び規定回数まで行われる。
     */
    function autoInterval() {
        tid = setInterval(function() {
            if (isAutoPlay(autoPlayCount)) {
                if (loopCount == 0) {
                    autoPlayCount++;
                    autoParameterSetting(true, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_OFF));
                } else if (loopCount == 1) {
                    autoParameterSetting(false, arrayFactory(CL_ON, CL_OFF, CL_OFF, CL_OFF));
                } else if (loopCount == 2) {
                    autoParameterSetting(false, arrayFactory(CL_OFF, CL_ON, CL_OFF, CL_OFF));
                } else if (loopCount == 3) {
                    autoParameterSetting(false, arrayFactory(CL_OFF, CL_OFF, CL_ON, CL_OFF));
                } else if (loopCount == 4) {
                    autoParameterSetting(false, arrayFactory(CL_OFF, CL_OFF, CL_OFF, CL_ON));
                } else {
                    loopCount = 0;
                }
            } else {
                clearInterval(tid);
            }
        }, AUTO_PLAY_INTERVAL);
    }
 
    /**
     * 自動再生の継続判定
     * 自動再生回数に0が設定されていた場合は無限ループとなります。
     * @param counter 自動再生回数
     * @return 自動再生を継続すると判断した場合はtrueを返す
     */
    function isAutoPlay(counter) {
        if (AUTO_PLAY_TIMES == 0) {
            autoPlayCount = 0;
            return true;
        } else if (counter <= AUTO_PLAY_TIMES) {
            return true;
        } else {
            return false;
        }
    }
 
    /**
     * ブラウザがIEかをチェック
     * @return IEの場合はtrueを返す
     */
    function isBrowserIe() {
        var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf("msie") != -1)
            return true;
 
        return false;
    }
 
    /**
     * マウスカーソルの移動が同じDIV範囲内かチェック
     * @param locate カットした画像の位置ID(1～4)
     * @param eventObj イベントオブジェクト
     * @return 同じDIV内と判断した場合はtrueを返す
     */
    function isSameTargetId(locate, eventObj) {
        // IE or 以外で分岐
        try {
            if (isBrowserIe())
                return isSameTargetId4Ie(locate, eventObj);
            else
                return isSameTargetId4NotIe(locate, eventObj);
        } catch (e) {
            return false;
        }
    }
 
    /**
     * IEのDIV範囲内チェック
     * @param locate カットした画像の位置ID(1～4)
     * @param eventObj イベントオブジェクト
     * @return 同じDIV内と判断した場合はtrueを返す
     */
    function isSameTargetId4Ie(locate, eventObj) {
        var evToId = eventObj.toElement.id;
        var evFmId = eventObj.fromElement.id;
        var image = CUT_IMAGE + locate;
        var boxi = BOX_IMAGE + locate;
        var boxt = BOX_TITLE + locate;
        var boxm = BOX_MESSAGE + locate;
 
        // 現在のマウスカーソルが範囲外の場合はfalse
        if (evToId != image && evToId != boxi && evToId != boxt && evToId != boxm)
            return false;
 
        if (evFmId == image || evFmId == boxi || evFmId == boxt || evFmId == boxm)
            return true;
 
        return false;
    }
 
    /**
     * IE以外のDIV範囲内チェック
     * @param locate カットした画像の位置ID(1～4)
     * @param eventObj イベントオブジェクト
     * @return 同じDIV内と判断した場合はtrueを返す
     */
    function isSameTargetId4NotIe(locate, eventObj) {
        var evId = eventObj.relatedTarget.id;
        var image = CUT_IMAGE + locate;
        var boxi = BOX_IMAGE + locate;
        var boxt = BOX_TITLE + locate;
        var boxm = BOX_MESSAGE + locate;
 
        if (evId == image || evId == boxi || evId == boxt || evId == boxm)
            return true;
 
        return false;
    }
 
    /**
     * 自動再生用のアニメーションパラメータを設定する共通関数
     * @param bg: 背景色設定判定フラグ(true:Dark系 / false:White系)
     * @params 透明度配列
     */
    function autoParameterSetting(bg, params) {
        if (bg)
            animateBackgroundColorSetting(WHITE_COLOR, AUTO_ANIMATE_PARAM)
        else
            animateBackgroundColorSetting(DARK_COLOR, AUTO_ANIMATE_PARAM)
        parameterSetting(AUTO_FADEIN_PARAM, params);
        loopCount++;
    }
 
    /**
     * アニメーションパラメータを設定する共通関数
     * @param fp: フェードインパラメータ(数値が大きいほど滑らかになるが反応が鈍くなる)
     * @params 透明度配列
     */
    function parameterSetting(fp, params) {
        imageSetting("#cutImage", fp, params);
    }
 
    /**
     * テキストボックス設定
     * @param fp フェードインパラメータ
     * @param cParams 透明度設定配列
     * @param tParams 透明度設定配列
     */
    function textBoxSetting(fp, cParams, tParams) {
        imageSetting("#boxImage", fp, cParams);
        boxContentSetting("#boxTitle", fp, tParams, titles);
        boxContentSetting("#boxMessage", fp, tParams, messages);
    }
 
    /**
     * 配列オブジェクトをインスタンス化して取得
     * @param arg1 配列要素1
     * @param arg2 配列要素2
     * @param arg3 配列要素3
     * @param arg4 配列要素4
     * @return 配列オブジェクト
     */
    function arrayFactory(arg1, arg2, arg3, arg4) {
        return new Array(arg1, arg2, arg3, arg4);
    }
 
    /**
     * テキストボックス背景設定
     * @param element 処理対象とするID名
     * @param fp フェードインパラメータ
     * @param params 透明度設定配列
     */
    function imageSetting(element, fp, params) {
        for (var i = 0; i < params.length; i++)
            $(element + (i + 1)).fadeTo(fp, params[i]);
    }
 
    /**
     * テキストボックス背景設定
     * @param element 処理対象とするID名
     * @param fp フェードインパラメータ
     * @param tParams 透明度設定配列
     * @param mParams 文字列文言配列
     */
    function boxContentSetting(element, fp, tParams, mParams) {
        for (var i = 0; i < tParams.length; i++) {
            $(element + (i + 1)).fadeTo(fp, tParams[i])
            if (tParams[i] == 1) {
                $(element + (i + 1)).html(mParams[i]);
            }
        }
        
        /** v 0.1.2 ゴースト文字表示対応の既存コードコメント化
        for (var i = 0; i < tParams.length; i++)
            $(element + (i + 1)).fadeTo(fp, tParams[i]).html(mParams[i]);
        */
    }
 
    /**
     * 非選択状態の画像をダーク化するための背景色アニメーション
     * @param color 背景色(通常はBlack or White)
     * @param fp フェードインパラーメータ
     */
    function animateBackgroundColorSetting(color, fp) {
        $("#defaultImage").stop().animate({backgroundColor:color}, fp);
    }
});