Main_2.js:完成版 ver 2.2.2

//------------------------------------------------------------
/*
 * ver 2.2.2
 * フォームからの別ページ移行時の動作
 * １）高さ調節
 * 2)ローディングイメージの表示
 * を実装
 * 
 *  ver  2.2.1
 * 修正
 * SlideController のsetFlickListenerメソッドを削除：FlickEventHandlerで別に管理しているため不要になった。
 * 
 * ver 2.2
 * submenu,footerのリンクを絶対パスに変更
 * それに伴う修正
 * 
 * ver 2.1.14
 * FlickEventHandlerを修正
 * touchmove時にある程度のx移動でメニュー開閉するように。
 * 
 * ver 2.1.13
 * formの送信先が違うドメインの場合の処理
 *1)高さ調節
 *2)文字化け ：対象のhtmlファイルのform enctype="shift_jis"を記述。
 *3)戻るボタン時の挙動(android firefoxで初期画面まで戻ってしまう)
 *4)データ送信時(submit時)におけるローディングレイヤーの表示を行うこと。
 * 
 * 初期導入ページがindex.html以外からのときのリンク処理
 * <base href=baseuri>をhead部に記述　-- line[900]
 * 
 *ver 2.1.12
 *last update 4/23
 *vino-formを対象ドメインからはずす（未スマホ対応：pcサイトのままiframe内に表示してしまうため）
 *Line[27]コメントアウト。targetDomainを空の配列に変更。
 * 
 *ver 2.1.11
 *last update 4/22
 *画面の向きを変更したときのコンテンツの高さ調節機能を実装  4/22
 *line[87]  iframeの更新時にstyle.height="auto" を追記
 *kamogashira
 */
//------------------------------------------------------------

/*jslint nomen: true*/
( function() {"use strict";
        var host = document.location.host;
        //host : "php.efolab.com"という形式。
        var protocol = document.location.protocol;
        //protocol : "http:"という形式
        var baseuri = protocol + "//" + host ;
        // baseuri : http://php.efolab.com/という形式。
        var path = document.location.pathname;
        console.log(path);
        var locationPath = path.substr(0,path.lastIndexOf("/"));
        console.log(locationPath);
        
        // var targetDomain = ["vino-form.com", "vino-form.efolab.com"];
        // 2014-4-23
        //  vino-formを対象ドメインからはずす（現段階でスマホ未対応のため。：pcサイトのままiframe内に表示してしまうことを回避して別サイトとして開く。）
        var targetDomain = [];

        var pagePath = baseuri + "EFOLAB/_server/_pages";
        //submenu , footerのa要素に付与しているclass名です。
        var menuClassName = "menu";

        //origin : "http://php.efolab.com"形式
        //var origin = document.location.origin;   //androidブラウザでは取得できないため利用停止。

        //コンテナ・要素類の定義
        var _outerContainer;
        var _pageContaner;
        var _subContainer;
        var _footerContainer;
        var _inquiryAssyContainer;
        var _mainContainer;
        var _contentsContainer;
        var _menuAnchor;
        var _iframe;
        var _topContainer;
        var _menuTicker;
        var _subMenuAssyContainer;
        /*
        * Class
        */
        //class定義
        var SlideController;
        var LoadingLayerController;
        var AutoFontSpan;
        var IframeController;
        var ContainerController;
        var LinkController;
        var MenuAnchorEventHandler;
        var FlickEventHandler;
        //instance定義
        var slideController;
        var loadingLayerController;
        var iframeController;
        var containerController;
        var subContainerLinkController;
        var footerContainerLinkController;
        var inquiryAssyContainerLinkController;
        var iframeLinkController;
        var menuAnchorEventHandler;
        var flickEventHandler;

        //------------------------------------------------------------------//
        //  IframeControler   start
        //
        //------------------------------------------------------------------//

        /**
         * @constructor
         */
        IframeController = function() {
            //初回アクセスか画面遷移かのカウンター
            this.loadingCounter=0;
        };
        IframeController.prototype = {
            initialSetting : function() {
                this.loadingCounter+=1;
                console.log(this.loadingCounter);
                if(this.loadingCounter===1){
                    //初回アクセス
                    //初期に（container.cssにて）hiddenにしてあるのをvisibleに
                    _iframe.style.visibility = "visible";
                }else{
                    //iframeの更新
                    //autoにしないとcontainerの高さが調節できない。
                    _iframe.style.height="auto";
                }
                //コンテナ全体の高さをセット
                containerController.setContainerHeight();

                //ローディングレイヤーを消します。
                loadingLayerController.off();

                //ifrmaeContainerについてコンテナの開閉時に行うメソッドを追加します。
                slideController.setOnOpenFunction(function() {
                    iframeLinkController.setDisable();
                });
                slideController.setOnCloseFunction(function() {
                    iframeLinkController.setEnable();
                });

                //00の位置へスクロールします。
                window.scrollTo(0, 0);

                //----------------------------------------------------------------
                //リンクコントローラをセット
                //----------------------------------------------------------------
                try {
                    //他ドメインのcontentDocumentにはアクセスできないためリンクコントローラのセットできない。
                    if (_iframe.contentDocument) {
                        iframeLinkController.set(_iframe.contentDocument.body);
                        
                        //--------------------------------------------------
                        //  form　管理  4/23
                        //  TODO:フォームの送信先が違うドメインの場合ノ処理
                        //--------------------------------------------------
                        var forms = _iframe.contentDocument.forms;
                        console.log("forms="+forms.length);
                        for(var i=0;i<forms.length;i++){
                            var action = forms[i].action;
                            console.log(forms[i].action);
                            
                            console.log(action.host);
                            console.log(action.host === host);
                            
                            console.log(action.indexOf(host));
                            if(action.indexOf(host)===-1){
                                //違うドメインへの送信
                                // forms[i].target="_blank";
                                // この送信先のhttps://business.form-mailer.jpは戻るボタンをhistory.back()で行うため、新規ウィンドウでは戻れなくなる
                                
                                forms[i].addEventListener('submit',function(){
                                    console.log("submit");
                                    //FIXME:ここでサイズを変更すると、resizeイベントが発生して元に戻してしまう。
                                    containerController.enable=false;
                                    //loadingLayerを表示
                                    loadingLayerController.on("送信中");
                                    _iframe.style.height="200px";
                                    _iframe.setAttribute("scroll","yes");
                                    window.scrollTo(0,0);
                                },false);
                            }
                        }
                        
                    }else{
                        //他のドメイン
                        console.log("ちがうドメインのためリンク管理不能");
                    }

                } catch(e) {
                    console.log(e.stack);
                }
            },
            /*
             * postMessageを受信
             */
            handleEvent : function(event) {
                console.log(event.type);
                var json = JSON.parse(event.data);
                console.log(json);
                if (json.iframeload) {
                    //iframeページのロード時
                    _iframe.style.height = json.iframeload.height + "px";

                    this.initialSetting();

                } else if (json.flick) {
                    //iframeのdocumentをフリックした時
                    console.log(json.flick);

                    slideController.slideMenu(json.flick);
                } else if (json.orientationchange) {
                    //縦横変更時
                    _iframe.style.height = json.orientationchange.height + "px";
                    containerController.setContainerHeight();
                } else if (json.resize) {
                    //縦横変更時
                    _iframe.style.height = json.resize.height + "px";
                    containerController.setContainerHeight();
                }
            }
        };
        /**
         *@constructor
         */
        ContainerController = function() {
            this.clientWidth = undefined;
            
            //form対策[1]
            this.enable = true;
            var self=this;
            _iframe.addEventListener('load', function(event) {
                console.log("iframe load");
                console.log(event.type);
                self.enable = true;
                loadingLayerController.off();
            }, false); 

        };
        ContainerController.prototype = {
            initialSetting : function() {
                

                //初期の画面幅
                this.screenWigth = window.screen.width;

                //------------------------------------------
                //  スクロール時にsubmenuを固定する
                //  2014/4/12
                //  position:fixedを使用するとandroid 2.3標準ブラウザでは動作 が不安定。
                //  また、user-scalable=no をセットしなくてはならない。
                //  よって現状は実装しない。コメントアウトする。
                //------------------------------------------
                
                /*
                
                document.addEventListener('scroll', function() {
                    if ( (_subMenuAssyContainer.getBoundingClientRect().bottom - window.screen.height) <= 0) {
                        _subMenuAssyContainer.style.position = "fixed";
                        _subMenuAssyContainer.style.bottom = "0px";
                    }
                    if (_subContainer.getBoundingClientRect().top >= 0) {
                        _subMenuAssyContainer.style.position = "initial";
                        _subMenuAssyContainer.style.bottom = "initial";
                    }
                }, false);
                */

                //全体のフォント調節をセットします。（iframe内のフォント調節はiframe.jsで実行しています。）
                var elms = document.body.getElementsByTagName('span');
                for (var i = 0; i < elms.length; i++) {
                    if (elms[i].getAttribute('size')) {
                        new AutoFontSpan(elms[i], elms[i].getAttribute('size'));
                    }
                }
                //footerContainerのリンクについてコンテナの開閉時に行うメソッドを追加します。
                slideController.setOnOpenFunction(function() {
                    footerContainerLinkController.setDisable();
                });
                slideController.setOnCloseFunction(function() {
                    footerContainerLinkController.setEnable();
                });
                //----------------------------------------------------------------
                //リンクコントローラをセット
                //----------------------------------------------------------------
                subContainerLinkController.set(_subContainer);
                footerContainerLinkController.set(_footerContainer);
                inquiryAssyContainerLinkController.set(_inquiryAssyContainer);

                //フリックコントローラをセット
                // slideController.setFlickListener(_mainContainer);

                //_menuTickerを表示
                _menuTicker.style.visibility = "visible";
                _menuTicker.style.opacity = 1;
            },
            setContainerHeight : function() {
                //form対策[2]
                if(!this.enable){
                    console.log("高さ調節中止");
                    _iframe.style.height="auto";
                    _iframe.setAttribute("scrolling","auto");
                    return;
                }
                
                //初期化:clientHeightを取得できるように。
                _subContainer.style.height = 'auto';
                _mainContainer.style.height = 'auto';

                var subHeight = _subContainer.clientHeight;
                var mainHeight = _mainContainer.clientHeight;

                console.log("_subContainer.clientHeight=" + _subContainer.clientHeight);
                console.log("_mainContainer.clientHeight" + _mainContainer.clientHeight);

                //subContainer , mainContainer　の高さの長い方をcontenteContainerのheightに設定します。
                var currentHeight = (subHeight > mainHeight) ? subHeight : mainHeight;
                _contentsContainer.style.height = currentHeight + 'px';

                //親要素：contentsContainerにセットしたheightを強制的に継承するようにinheritを設定します。
                _subContainer.style.height = 'inherit';
                _mainContainer.style.height = 'inherit';
            },
            onOrientationChange : function() {
                if (window.screen.width === this.screenWigth) {
                    return;
                } else {
                    _iframe.style.height = "auto";
                    this.setContainerHeight();
                    this.screenWigth = window.screen.width;
                }
            },
            handleEvent : function(event) {
                console.log(event.type);
                if (event.type === "load") {
                    this.initialSetting();
                    this.setContainerHeight();
                }
                if (event.type === "orientationchange") {
                    this.onOrientationChange();
                }
                if (event.type === "resize") {
                    this.onOrientationChange();
                }
            }
        };
        /**
         * @constructor
         */
        MenuAnchorEventHandler = function(sourceAnchor) {
            this.sourceAnchor = sourceAnchor;
            this.initialize();
        };
        MenuAnchorEventHandler.prototype = {
            initialize : function() {

                if ("ontouchstart" in window) {
                    this.sourceAnchor.addEventListener('touchstart', this, false);
                    this.sourceAnchor.addEventListener('touchend', this, false);

                } else {
                    this.sourceAnchor.addEventListener('click', this, false);
                }
            },
            handleEvent : function(event) {
                //疑似要素のタッチの場合も補足するためにparentNodeも調査します。
                //menuタッチ時の処理
                switch(event.type) {
                    case "touchstart":
                        //--------------style set---------------------
                        this.sourceAnchor.style.backgroundColor = "rgb(255,248,248)";
                        //ティッカーを非表示にするためクラス名を削除します。
                        document.getElementById('menuTicker').style.display = "none";
                        break;

                    case "touchend":
                        //------------style--------------------------
                        this.sourceAnchor.style.backgroundColor = "white";
                        //スライドメニューを開閉します。
                        slideController.slideMenu();

                        break;
                }
            }
        };
        /**
         * @constructor
         */
        var FlickEventHandler = function(sourceContainer) {
            this.container = sourceContainer;

            this.initialize();
        };
        FlickEventHandler.prototype = {
            initialize : function() {
                this.container.addEventListener('touchstart', this, false);
                this.container.addEventListener('touchmove', this, false);

            },
            handleEvent : function(event) {
                console.log(event.type + "this.movedFlg=" + this.movedFlg);
                // var message = {};   //iframe用
                switch(event.type) {
                    case "touchstart":
                        this.movedFlg = false;
                        this.start = {
                            pageX : event.touches[0].pageX,
                            pageY : event.touches[0].pageY,
                            time : Number(new Date())
                        };
                        //onTouchMoveで利用するための初期化設定です。
                        this.isScrolling = undefined;
                        break;
                    case "touchmove":
                        console.log(this.movedFlg);
                        //movedFlgがtrueならなにもしない
                        if (this.movedFlg) {
                            return;
                        }
                        // タッチが１本のときだけ実行します。
                        if (event.touches.length > 1 || event.scale && event.scale !== 1) {
                            return;
                        }
                        this.deltaX = event.changedTouches[0].pageX - this.start.pageX;
                        this.deltaY = event.changedTouches[0].pageY - this.start.pageY;
                        this.deltaTime = Number(new Date()) - this.start.time;
                        //スクロールかどうかの判定です。スクロールイベントは連続して発生するため、onTouchStart-onTouchMove-onTouchEndの一連の動作の中で、最初に一度だけテストします。
                        if ( typeof this.isScrolling === 'undefined') {
                            this.isScrolling = !! (this.isScrolling || Math.abs(this.deltaX) < Math.abs(this.deltaY) );
                        }
                        if (this.isScrolling) {
                            return;
                        }
                        if (Math.abs(this.deltaX) > 50) {

                            if (this.deltaX < 0) {
                                //閉じる
                                slideController.slideMenu("close");
                            }
                            if (this.deltaX > 0) {
                                //開く
                                slideController.slideMenu("open");
                            }
                            this.movedFlg = true;
                        }
                        break;
                }
            }
        };
 
        /**
         * AutoFontSpan
         * @constructor
         */
        AutoFontSpan = function(target, size) {
            //sizeは1が普通サイズ
            this.target = target;
            this.size = size;

            var self = this;
            window.addEventListener('resize', function() {
                self.setSize.call(self);
            }, false);

            this.setSize();
        };
        AutoFontSpan.prototype = {
            BASE_RATIO : 1 / 360,

            setSize : function() {
                try {
                    this.target.style.fontSize = Math.round(this.getDocWidth() * this.BASE_RATIO * this.size * 100) + '%';
                } catch(e) {
                    alert(e);
                }
            },
            getDocWidth : function() {
                return document.documentElement.clientWidth;
            }
        };
        /**
         * LnkController
         * @constructor
         * @param container {Container}
         * @param callback {function}
         */
        var LinkController = function() {
            this.container = undefined;
            this.enable = true;
            this.serial = Number(new Date());
        };
        LinkController.prototype = {
            initialize : function() {

            },
            set : function(targetContainer) {
                this.container = targetContainer;

                var links = this.container.getElementsByTagName('a');
                for (var i = 0; i < links.length; i++) {
                    var link = links[i];
                    if ("ontouchstart" in window) {
                        //タッチイベントに対応しているとき
                        link.addEventListener('touchstart', this, false);
                        link.addEventListener('touchend', this, false);
                    } else {
                        link.addEventListener('click', this, false);
                    }
                }
            },
            setEnable : function() {
                this.enable = true;
            },
            setDisable : function() {
                this.enable = false;
            },
            /*
             * ページ遷移
             * アンカー要素のイベントを受け取り処理します。
             */
            handleEvent : function(event) {

                console.log("ページ遷移::event.type=" + event.type);
                console.log(this);
                //img要素を下位に持っているアンカー要素の場合にa要素を取得する関数。
                var getAnchor = function(target) {
                    var anchor = undefined;
                    if (target.href) {
                        anchor = target;
                    } else {
                        anchor = getAnchor(target.parentNode);
                    };
                    return anchor;
                };

                /*
                 * スクロール・スライド判定開始
                 * スクロールおよびスライド時にはタッチイベントとして認識させません。
                 */
                if (event.type === "touchstart") {
                    this.start = {
                        pageX : event.touches[0].pageX,
                        pageY : event.touches[0].pageY,
                        time : Number(new Date())
                    };
                }
                if (event.type === "touchend") {
                    //event touchendの時はtouches[0].pageY ではなく　changeTouches[0].pageYで取得します。
                    var deltaX = event.changedTouches[0].pageX - this.start.pageX;
                    var deltaY = event.changedTouches[0].pageY - this.start.pageY;
                    if (deltaY !== 0 || deltaX !== 0) {
                        console.log("scroll or flick");
                        //スクロールまたはスライドしているのでタッチイベント処理中止。
                        return;
                    }

                    console.log("スクロールでもflickでもない");

                    console.log("this.enable=" + this.enable);
                    if (!this.enable) {
                        //リンクイベントを動作させません。
                        console.log('link disable');
                        // slideController.closeSlide();
                        console.log(event.target);
                        console.log(event.target.parentNode);
                        event.preventDefault();
                        // event.stopPropagation();

                        return false;
                    }
                    /*
                    * スクロールではなく、タッチのとき
                    */
                    //スライドメニューを閉じます。
                    slideController.closeSlide();

                    var isTel = function(anchor) {
                        console.log("---protocol振り分け:anchor.protocol === 'tel: ---'" + (anchor.protocol === "tel:"));
                        console.log("anchor.protocol=" + anchor.protocol);

                        return anchor.protocol === "tel:";
                    };
                    var isMenuLink = function(anchor) {
                        console.log("---menuからのリンク判定 : anchor.className===menuClassName ---" + (anchor.className === menuClassName));
                        console.log("className=" + anchor.className);
                        console.log("menuClassName=" + menuClassName);

                        return anchor.className === menuClassName;
                    };
                    var isDomain = function(anchor) {
                        console.log("--- 内部サイトかどうかの判別：anchor.host === host ---" + (anchor.host === host));
                        console.log("anchor.host =" + anchor.host);
                        console.log("host=" + host);

                        return anchor.host === host;

                    };
                    var isTargetDomain = function(anchor) {
                        var isTarget = false;
                        for (var i = 0; i < targetDomain.length; i++) {
                            console.log("--- 対象の他ドメインかどうかの判別：anchor.host === targetDomain[" + i + "] ---" + (anchor.host === targetDomain[i]));
                            console.log("anchor.host =" + anchor.host);
                            console.log("targetDomain[" + i + "]=" + targetDomain[i]);
                            if (anchor.host === targetDomain[i]) {
                                isTarget = true;
                            }
                        }
                        return isTarget;
                    };

                    /*
                    * 内部サイトか、対象の他ドメインか、対象外の他ドメインかによって
                    * 処理を分岐します。
                    */
                     
                    //event.targetからアンカー要素を抽出します。
                    var anchor = getAnchor(event.target);

                    //style
                    anchor.style.color = "red";
                    // anchor.className = "checkMark";
                    console.log("----リンクの判別開始----");

                    if (isTel(anchor)) {
                        //電話プロトコルのとき。preventDefaultせずに通常動作させます。
                        return;
                    }

                    //preventDefault実行
                    event.preventDefault();

                    if (isDomain(anchor)) {
                        //内部サイトの場合
                        /*
                         * iframe内のリンクかどうかの判別を行います。
                         * submenu,fotterのmenuからのリンクの場合はanchor.className ="menu"です。
                         */

                        if (isMenuLink(anchor)) {
                            //submenu,footerからのリンクです。
                            //画面遷移します。
                            //console.log("内部サイト：menuからのリンク：遷移先=" + pagePath + anchor.pathname);
                            console.log("内部サイト：menuからのリンク：遷移先=" + anchor.href);
                            //pagePath:_server/_pages/ディレクトリのファイルを開きます。
                            // _iframe.src = pagePath + anchor.pathname;
                            //---------------------------------------------
                            //  絶対パスに変更したためhrefそのままに修正
                            //---------------------------------------------
                            _iframe.src=anchor.href;
                        } else {
                            //iframeからのリンクです。
                            //画面遷移します。
                            console.log("内部サイト：iframeからのリンク：遷移先=" + anchor.href);
                            _iframe.src = anchor.href;
                        }
                        //ifrrameの高さを初期化します。
                        _iframe.style.height = window.screen.height;
                        //読み込み中レイヤーを表示します。
                        loadingLayerController.on();

                    } else {
                        /*
                         * 他のドメインです。
                         * 対象の他ドメインか対象外の他ドメインかの判別を行います。
                         * あらかじめ記述してあるtargetDomain配列とリンク先のhost名が同一かどうかを調査します。
                         */

                        if (isTargetDomain(anchor)) {
                            //対象の他ドメインの場合
                            console.log("対象の他ドメイン");

                            //読み込み中レイヤーを表示します。
                            loadingLayerController.on();
                            //ifrrameの高さを初期化します。
                            _iframe.style.height = window.screen.height;

                            //画面遷移します。
                            var targetFile = anchor.getAttribute('href');
                            try {
                                _iframe.src = targetFile;

                            } catch(e) {
                                console.log(e.stack);
                            }

                        } else {
                            try {
                                //対象外の他ドメインの場合
                                console.log("対象外の他ドメイン:" + anchor.href);
                                //androidブラウザで動作しないため、同一のタブで開きます。
                                // window.open(anchor.href, '_blank');
                                location.href = anchor.href;

                            } catch(e) {
                                alert(e.stack);
                            }
                        }
                    }

                    //onclick属性があれば、それを実行します。
                    if (anchor.onclick) {
                        console.log('onclickの属性を実行しました。');
                        anchor.onclick();
                    }
                    //style 済みの色に変更。
                    anchor.style.color = "gray";
                    // anchor.className = "checkMark";
                }
            },
        };
        var LoadingLayerController = function(wrapperContainer) {
            this.wrapperContainer = wrapperContainer;
            this.layer = undefined;
            this.p=undefined;

            this.initialize();
        };
        LoadingLayerController.prototype = {
            initialize : function() {

                //iframeの上に新しいレイヤーをセットします。
                var layer = document.createElement('div');
                var innerDiv = document.createElement('div');
                var img = document.createElement('img');
                /*
                 * testPathに変更 4/27
                 */
                var testPath =(locationPath.indexOf("/test")!==-1)?"/test":"";
                img.src = baseuri +testPath+ "/EFOLAB/_script/img/loading.gif";
                var p = document.createElement('p');
                p.textContent = "読み込み中...";
                innerDiv.appendChild(img);
                innerDiv.appendChild(p);
                layer.appendChild(innerDiv);

                innerDiv.style.textAlign = "center";
                innerDiv.style.position = "fixed";
                innerDiv.style.width = "100%";
                innerDiv.style.top = (window.screen.height) / 2;
                layer.setAttribute("style", "position:absolute;z-index:30;width:100%;top:0px;");
                layer.style.backgroundColor = 'rgba(255,255,255,0.7)';
                var wrapperContainerHeight = this.wrapperContainer.style.height||window.screen.height;
                console.log(wrapperContainerHeight);
                layer.style.height = wrapperContainerHeight;
                layer.style.display = "none";

                this.wrapperContainer.appendChild(layer);
                this.layer = layer;
                this.p = p;
            },
            on : function(text) {
                //高さを再取得して表示
                var wrapperContainerHeight = this.wrapperContainer.style.height;
                this.layer.style.height = wrapperContainerHeight;
                this.layer.style.display = "block";
                if(text){
                    this.p.textContent=text+"...";
                }
            },
            off : function() {
                //隠す
                this.layer.style.display = "none";
            }
        };

        /**
         *@constructor
         * @param {DOMObject} slideContainer
         * @param {DOMObject} wrapperContainer
         */
        var SlideController = function(slideContainer, wrapperContainer) {
            //スライドさせるエレメントです。
            this.slideContainer = slideContainer;
            //スライドの座標基準となるコンテナエレメントです。
            this.wrapperContainer = wrapperContainer;
            this.wrapperContainer.width = undefined;
            //引数オプションのmaxSlideRatio:スライドさせる比率。初期値0.5であればcontainerの50％のスライドです。
            this.maxSlideRatio = 0.35;
            //上記のmaxSlideRatioをもとにしたスライドさせる最大左座標です。
            this.maxSlideLeftPercent = this.maxSlideRatio * 100 + '%';
            //閉じた状態の際の左座標です。初期値は0%：これはコンテナのposition:relative設定の連携座標です。
            this.minSlideLeftPercent = '0%';

            //menuAnchorです。this.setMenuListenerの引数targetでセットします。
            this.menuElement = undefined;
            this.onCloseFunctions = [];
            this.onOpenFunctions = [];

            this.initialize();
        };
        SlideController.prototype = {
            initialize : function() {

                //スタイル設定の初期値を与えます。閉じた座標位置であるminSlideLeftです。
                this.slideContainer.style.left = this.minSlideLeftPercent;
                //コンテナの幅をセットします。
                this.wrapperContainer.width = this.wrapperContainer.getBoundingClientRect().width;
            },
/*
            setFlickListener : function(target) {
                target.addEventListener('touchstart', this, false);
                target.addEventListener('touchend', this, false);
            },
            
            */
            setOnOpenFunction : function(func) {
                this.onOpenFunctions.push(func);
            },
            setOnCloseFunction : function(func) {
                this.onCloseFunctions.push(func);
            },
            /*
             * 与えられたpercent表記のテキストを数値にして返却します。
             */
            toNumberFromPercent : function(percentText) {
                try {
                    return parseFloat(percentText.split("%").join(""));

                } catch(e) {
                    console.log(percentText + e);
                }
            },
            /**
             * @param order {String}
             */
            slideMenu : function(order) {
                switch (order) {
                    //  from FlickEventHandler
                    case "open":
                        this.openSlide();
                        break;
                    case "close":
                        this.closeSlide();
                        break;
                    //  from MenuAnchorHandler
                    default:
                        if (this.slideContainer.style.left === this.minSlideLeftPercent) {
                            //開く
                            this.openSlide();
                        } else if (this.slideContainer.style.left === this.maxSlideLeftPercent) {
                            //閉じる
                            this.closeSlide();
                        }
                }
            },
            openSlide : function() {
                //スライドメニューを開きます。
                this.slideContainer.style.left = this.maxSlideLeftPercent;
                //open時の追加ファンクションを実行します。
                var funcs = this.onOpenFunctions;
                for (var i = 0; i < funcs.length; i++) {
                    console.log("onOpenFunctions=" + funcs[i]);
                    funcs[i]();
                }
            },
            closeSlide : function() {
                //スライドメニューを閉じます
                this.slideContainer.style.left = this.minSlideLeftPercent;
                //close時の追加ファンクションを実行します。
                var funcs = this.onCloseFunctions;
                for (var i = 0; i < funcs.length; i++) {
                    console.log("onCloseFunctions=" + funcs[i]);
                    funcs[i]();
                }
            }
        };

        function boot() {
            console.log('DOMContentLoaded');
            
            //
            //  DOM要素の取得部
            //
            _outerContainer = document.getElementById('outerContainer');
            _pageContaner = document.getElementById('pageContainer');
            _subContainer = document.getElementById('subContainer');
            _footerContainer = document.getElementById('footerContainer');
            _inquiryAssyContainer = document.getElementById('inquiryAssyContainer');
            _mainContainer = document.getElementById('mainContainer');
            _contentsContainer = document.getElementById('contentsContainer');
            _menuAnchor = document.getElementById('menuAnchor');
            _topContainer = document.getElementById('topContainer');
            _iframe = document.getElementById('iframe');
            _menuTicker = document.getElementById('menuTicker');
            _subMenuAssyContainer = document.getElementById('subMenuAssyContainer');
            //
            //  インスタンス生成部
            //

            //-------------------------------------------
            //  ContainerController インスタンス生成
            //-------------------------------------------
            containerController = new ContainerController();

            //-------------------------------------------
            //  IframaController インスタンス生成
            //-------------------------------------------
            iframeController = new IframeController();

            //-------------------------------------------
            //  SlideController インスタンス生成
            //-------------------------------------------
            slideController = new SlideController(_mainContainer, _contentsContainer);

            //--------------------------------------------
            //  LinkController インスタンス生成
            //--------------------------------------------
            subContainerLinkController = new LinkController();
            footerContainerLinkController = new LinkController();
            inquiryAssyContainerLinkController = new LinkController();
            iframeLinkController = new LinkController();

            //-------------------------------------------
            //  LoadingLayerController インスタンス生成
            //-------------------------------------------
            loadingLayerController = new LoadingLayerController(_contentsContainer);

            //-------------------------------------------
            //  MenuAnchorEventHandler インスタンス生成
            //-------------------------------------------
            menuAnchorEventHandler = new MenuAnchorEventHandler(_menuAnchor);

            //-------------------------------------------
            //  FlickEventHandler インスタンス生成
            //-------------------------------------------
            flickEventHandler = new FlickEventHandler(_mainContainer);

            //
            //  イベントリスナの登録部
            //

            //------------------------------------------
            //  containerController
            //------------------------------------------
            window.addEventListener('load', containerController, false);
            window.addEventListener('orientationchange', containerController, false);
            window.addEventListener('resize', containerController, false);

            //------------------------------------------
            //  iframeController
            //  postMessage 受信時
            //------------------------------------------
            window.addEventListener('message', iframeController, false);

            //読み込み中の表示を出します。
            loadingLayerController.on();

        }
        //---------------------------------------------
        //headにbaseURIを記述します。
        //サブディレクトリからの流入の際に必要です。
        //---------------------------------------------
        var base = document.createElement("base");
        base.href=baseuri;
        document.head.appendChild(base);
        
        try {
            if (document.body) {
                boot();
            } else {
                document.addEventListener('DOMContentLoaded', boot, false);
            }

        } catch(e) {
            document.addEventListener('DOMContentLoaded', boot, false);
        }
    }());