////////////////////////////////////////////////////////////////////////
///
////////////////////////////////////////////////////////////////////////
if ( typeof( IPG ) == 'undefined' ) IPG = {};
/**
 * DOGATCH EPGコンテナ用クラス。
 * 特化してますよ。ベタ定義とか。
 * 
 * 通信クラスの定義
 * スクロールクラスの定義
 * 連想配列化したXMLノードのHTML展開とかを実装します。
 * ノード展開のonCompleteでスライダーの再初期化をコールして、
 * 通信結果にそったEPGの描画＋イベントハンドリングを実装するぜ。
 * 
 * @param {Object} container
 */
IPG.EpgContainer = function( targetElement , isFullEPG , isLocal ){
    this.version = "0.1";
    this.fontSize="10px";
    
    try{
        this.epgElement = IPG.Utility.getElement( targetElement );
        if( !this.epgElement ) return;
        
        this.isFullEPG = isFullEPG;
        this.isLocal = isLocal;
        
        IPG.Utility.debugOut( 'IE['+Prototype.Browser.IE+'] Opera['+Prototype.Browser.Opera+'] WebKit['+Prototype.Browser.WebKit+'] Gecko['+Prototype.Browser.Gecko+'] MobileSafari['+Prototype.Browser.MobileSafari+']' , "debug" , "blue" );
        
        // Config.xmlへのURL
        if( this.isLocal ){
            this.configXMLpath = "xml/epg_config_local.xml";
        }else{
            this.configXMLpath = "/jsepg/xml/epg_config.xml";
        }
        
        // EPGスライダオブジェクト
        this.epgSlider;
        
        // 定数保持オブジェクト
        this.config = {};
        
        // EPG縮小[0]/拡大[1]表示フラグ
        this.config.resize_flg = 0;
        
        /** マスタデータのロード。通信で取得し、動的なHTML生成は行わないもの。 **/
        // Config.xml のロード。
        this.config.config_xml = new IPG.EpgConfig( this.configXMLpath );
        this.config.loading_image = new Image().src = this.config.config_xml.img_path.epg_loading;
        this.config.error_image = new Image().src = this.config.config_xml.img_path.epg_error;
        
        // 取得データの影響を受けない、EPGフレームの出力。
        // 以降のエラーは当該処理で出力されるエレメント内でレポートする。
        if( this.isFullEPG ) this.container = this.createFullEpgBase();
        else this.container = this.createTopEpgBase();
        this.document = this.container.ownerDocument || this.container.document;
        
        // サーバ日付の取得。過去番組の非表示時に判定基準値として用いる。
        // getServerDateコール時に内部でcookieが生成されるので、呼び出す順番はgetServerDate->getuserProperty。
        this.config.server_date = new IPG.ServerTimeManager().createData( this.config.config_xml.api_url.getServerTime );
        
        // クッキー情報を含む、画面表示用パラメタの取得。
        // クッキーで保持する、デフォルト地域、デフォルト表示順、デフォルトジャンルカラー、ブロードキャストタイプのオブジェクト化
        // 必要に応じてクッキーに保持しない選択可能項目の初期値の設定
        this.config.cookie = new IPG.UserPropertyManager().getUserProperty( this.config.config_xml.api_url.getUserProperty );
        
        // データ更新日付の取得 add by megane @ 2008/09/24
        this.config.last_modified_date = new IPG.LastModifiedTimeManager().createData( this.config.config_xml.api_url.getLastModified );
        
        if( !this.config.server_date || !this.config.cookie ){
            Element.setStyle( $( "epg_cloak" ) , "display: block;" );
            $( "cloak_img" ).src = this.config.error_image;
            return;
        }
        
        // クエリから表示日付の取得。
        if( this.isFullEPG ){
            var query = window.location.search.substring(1);
            var parms = query.split( '&' );
            for( var i=0; i < parms.length; i++ ){
                var pos = parms[i].indexOf( '=' );
                if( pos > 0 ){
                    var key = parms[i].substring(0,pos);
                    var val = parms[i].substring(pos+1);
                    if( key && key == "epg_date" ){
                        
                        // 取得日のvalidate
                        var date = IPG.Utility.isSIDate( val );
                        if( date == undefined ){
                            Element.setStyle( $( "epg_cloak" ) , "display: block;" );
                            $( "cloak_img" ).src = this.config.error_image;
                            return;
                        }
                        this.config.current_date = date;
                    }
                }
            }
        }

/** 取得したマスタデータ **/
IPG.Utility.debugOut( 'server time  !!! svd['+IPG.Utility.getSIDateFullStrFromMillisec(this.config.server_date.time)+'] crd['+this.config.current_date+']' );
IPG.Utility.debugOut( 'cookie data  !!! area['+this.config.cookie.area+'] sType['+this.config.cookie.sorttype+'] bcType['+this.config.cookie.bctype+']' );
if( this.config.cookie.genrecolor ){
    var colors = "";
    for( var i = 0 , len = this.config.cookie.genrecolor.length; i < len; i++ ){
        colors += i+"-["+this.config.cookie.genrecolor[i]+"] ";
    }
    IPG.Utility.debugOut( 'genre color  !!! '+colors );
}else{
    IPG.Utility.debugOut( 'genre color  !!! undefined' );
}
/************************/
        
        /** 動的なHTML生成を必要とする、情報取得処理のオブジェクト化。**/
        this.areaListManager = new IPG.AreaListManager( this.config , this.refresh.bind( this ) );
        
        this.genreListManager = new IPG.GenreListManager( this.config , this.refresh.bind( this ) );
        
        this.serviceListmanager = new IPG.ServiceListManager( this , this.config );
        
        if( !this.areaListManager || !this.genreListManager || !this.serviceListmanager ){
            Element.setStyle( $( "epg_cloak" ) , "display: block;" );
            $( "cloak_img" ).src = this.config.error_image;
            return;
        }
        
        // EPGイニシャライズ
        this.epgInitialize();
        
        // 定期更新インターバルのセット
        this.refreshMethod = this.refresh.bind( this );
        this.timerid = setInterval( this.refreshMethod , this.config.config_xml.epg_info.interval_minute*60*1000 );
    
    }catch( exp ){
        Element.setStyle( $( "epg_cloak" ) , "display: block;" );
        $( "cloak_img" ).src = this.config.error_image;
    }
};

IPG.EpgContainer.prototype.epgInitialize = function(){
    
    Element.setStyle( $( "epg_cloak" ) , "display: block;" );
    $( "cloak_img" ).src = this.config.loading_image;
    
    // コンテナに対して選択不可処理
    IPG.Utility.disableSelection( this.container );
    // コンテナ上での右クリックを禁止 → イベントからボタンタイプを取得し、コンテナ上での専用右クリックメニューを表示する様に改修予定。
    this.container.oncontextmenu  = function( evt ){ return false; };
    
    // HTML出力。
    if( this.isFullEPG ){
        this.drawFullEpgController();
        this.drawFullEpgFrame();
    }else{
        this.drawTopEpgController();
        this.drawTopEpgFrame();
    }
    
    // バルーン表示用イベントのバインド
    this.bindBodyFrameEvent( $( "epg_body_frame" ) );
    
    // サービス局リストの取得からHTML出力まで
    this.serviceListmanager.getServiceList();
    
    this.setEpgInfo();
    
    IPG.Utility.debugOut( '初回ロード終了' );
};

IPG.EpgContainer.prototype.createFullEpgBase = function(){
    if( !this.epgElement ) return;
    
    var d = this.epgElement.ownerDocument || this.epgElement.document;
    
    // デバッグ用ログアウトスペース
    if( this.isLocal ){
        this.epgElement.innerHTML += "<hr /><span>DEBUG</span><br /><div id=\"debug\" style=\"font-size: "+this.fontSize+"; border: 1px solid black; padding: 3px; overflow: scroll; width: 100%; height: 100px; filter: Alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1;\"></div>";
    }
    
    // formノードの作成
    var epg_form = d.createElement("form");
    this.epgElement.appendChild( epg_form );
    epg_form.unselectable = "on";
    Element.setStyle( epg_form , "margin-bottom: 0px;" );
    epg_form.onsubmit = function(){ return false; };
    
    // containerノードの作成
    var epg_container = d.createElement("div");
    epg_form.appendChild( epg_container );
    epg_container.unselectable = "on";
    epg_container.id = "epg_container";
    Element.setStyle( epg_container , "width: 991px; height: 577px; position: absolute; z-index: 1;" );
    
    var pgBalloonNode = d.createElement("div");
    window.document.getElementsByTagName("body")[0].appendChild( pgBalloonNode );
    pgBalloonNode.id = "pg_balloon";
    Element.setStyle( pgBalloonNode , "text-align: left; position: absolute; z-index: 2; display: none;" );
    
    var cloakNode = d.createElement("div");
    epg_form.appendChild( cloakNode );
    cloakNode.id = "epg_cloak";
    cloakNode.innerHTML = "<div style=\"width: 991px; height: 577px; background-color: white; filter: Alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7;\"></div>"
    Element.setStyle( cloakNode , "position: absolute; display: none; z-index: 3;" );
    Event.observe( cloakNode , "mousedown" , function(evt){ evt = IPG.Utility.fixEvent( evt , this ); Event.stop( evt ); return false; } );
    
    var whiteImage = d.createElement("img");
    cloakNode.appendChild( whiteImage );
    whiteImage.src = this.config.config_xml.img_path.white_full;
    Element.setStyle( whiteImage , "width: 968px; height: 420px; position: absolute; top: 119px; left: 12px;" );
    
    var cloakImage = d.createElement("img");
    cloakNode.appendChild( cloakImage );
    cloakImage.id = "cloak_img";
    Element.setStyle( cloakImage , "width: 240px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0px 0px -120px;" );
    
    return epg_container;
};

IPG.EpgContainer.prototype.createTopEpgBase = function(){
    if( !this.epgElement ) return;
    
    var d = this.epgElement.ownerDocument || this.epgElement.document;
    
    // デバッグ用ログアウトスペース
    if( this.isLocal ){
        this.epgElement.innerHTML += "<hr /><span>DEBUG</span><br /><div id=\"debug\" style=\"font-size: "+this.fontSize+"; border: 1px solid black; padding: 3px; overflow: scroll; width: 100%; height: 100px;\"></div>";
    }
    
    // formノードの作成
    var epg_form = d.createElement("form");
    this.epgElement.appendChild( epg_form );
    epg_form.unselectable = "on";
    Element.setStyle( epg_form , "margin-bottom: 0px;" );
    epg_form.onsubmit = function(){ return false; };
    
    // containerノードの作成
    var epg_container = d.createElement("div");
    epg_form.appendChild( epg_container );
    epg_container.unselectable = "on";
    epg_container.id = "epg_container";
    Element.setStyle( epg_container , "width: 991px; height: 548px; position: absolute; z-index: 1;" );
    
    var pgBalloonNode = d.createElement("div");
    window.document.getElementsByTagName("body")[0].appendChild( pgBalloonNode );
    pgBalloonNode.id = "pg_balloon";
    Element.setStyle( pgBalloonNode , "text-align: left; position: absolute; z-index: 2; display: none;" );
    
    var cloakNode = d.createElement("div");
    epg_form.appendChild( cloakNode );
    cloakNode.id = "epg_cloak";
    cloakNode.innerHTML = "<div style=\"width: 991px; height: 548px; background-color: white; filter: Alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7;\"></div>"
    Element.setStyle( cloakNode , "position: absolute; display: none; z-index: 3;" );
    Event.observe( cloakNode , "mousedown" , function(evt){ evt = IPG.Utility.fixEvent( evt , this ); Event.stop( evt ); return false; } );
    
    var whiteImage = d.createElement("img");
    cloakNode.appendChild( whiteImage );
    whiteImage.src = this.config.config_xml.img_path.white_top;
    Element.setStyle( whiteImage , "width: 968px; height: 305px; position: absolute; top: 205px; left: 12px;" );
    
    var cloakImage = d.createElement("img");
    cloakNode.appendChild( cloakImage );
    cloakImage.id = "cloak_img";
    Element.setStyle( cloakImage , "width: 240px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0px 0px -120px;" );
    
    return epg_container;
};

IPG.EpgContainer.prototype.drawFullEpgController = function(){
    
    // コントローラの基底部分の出力
    // 各コントローラの出力は各々に実装する。
    var buf = "";
    var controllerNode = this.document.createElement("div");
    this.container.appendChild( controllerNode );
    controllerNode.id = "epg_controller";
    Element.setStyle( controllerNode , "background-color: white; width: 991px; height: 85px; position: relative; z-index: 1;" );
    
    this.epgController = new IPG.EpgController( controllerNode , this , this.config );
    
    // GGuide画像表示 position:absoluteでright:0px位置に配置
    var gguideNode = this.document.createElement("div");
    controllerNode.appendChild( gguideNode );
    Element.setStyle( gguideNode , "width: 133px; height: 27px; position: absolute; top: 0px; right: 0px; z-index: 1;" );
    
    var gguideImage = this.document.createElement("img");
    gguideNode.appendChild( gguideImage );
    gguideImage.src = this.config.config_xml.img_path.gguide_logo;
    
    // 日付選択
    this.epgController.createDateController();
    
    // 時間選択
    this.epgController.createTimeController();
    
    // 地域選択
    this.epgController.createAreaSelector( this.areaListManager );
    
    // 地デジ/BS
    this.epgController.createCategoryController();
    
    // 表示順切替
    this.epgController.createSortController();
    
    // ジャンルカラー選択
    this.epgController.createGenreColorController( this.genreListManager );
    
    // 拡大/縮小
    this.epgController.createResizeController();
    
};

IPG.EpgContainer.prototype.drawTopEpgController = function(){
    
    // コントローラの基底部分の出力
    // 各コントローラの出力は各々に実装する。
    var buf = "";
    var controllerNode = this.document.createElement("div");
    this.container.appendChild( controllerNode );
    controllerNode.id = "epg_controller";
    Element.setStyle( controllerNode , "background-color: white; width: 991px; height: 171px; position: relative; z-index: 1;" );
    
    // EPGタイトル画像表示
    var epgLogoNode1 = this.document.createElement("div");
    controllerNode.appendChild( epgLogoNode1 );
    Element.setStyle( epgLogoNode1 , "width: 112px; height: 19px; position: relative; margin: 15px 0px 0px 15px; float: left; z-index: 1;" );
    
    var logoImage1 = this.document.createElement("img");
    epgLogoNode1.appendChild( logoImage1 );
    logoImage1.src = this.config.config_xml.img_path.epg_title_logo1;
    
    var epgLogoNode2 = this.document.createElement("div");
    controllerNode.appendChild( epgLogoNode2 );
    Element.setStyle( epgLogoNode2 , "width: 65px; height: 15px; position: relative; margin: 18px 10px 0px 10px; float: left; z-index: 1;" );
    
    var logoImage2 = this.document.createElement("img");
    epgLogoNode2.appendChild( logoImage2 );
    logoImage2.src = this.config.config_xml.img_path.epg_title_logo2;
    
    this.epgController = new IPG.EpgController( controllerNode , this , this.config );
    
    // TOP日付選択
    this.epgController.createTopDateController();
    
    // 表示順切替
    this.epgController.createSortController( true );
    
    // GGuide画像表示 position:absoluteでright:0px位置に配置
    var gguideNode = this.document.createElement("div");
    controllerNode.appendChild( gguideNode );
    Element.setStyle( gguideNode , "width: 133px; height: 27px; position: relative; top: 0px; right: 0px; z-index: 1; float: right;" );
    
    var gguideImage = this.document.createElement("img");
    gguideNode.appendChild( gguideImage );
    gguideImage.src = this.config.config_xml.img_path.gguide_logo;
    
    // 画像表示用空スペース
    var blankNode = this.document.createElement("div");
    controllerNode.appendChild( blankNode );
    blankNode.id = "epg_blank";
    Element.setStyle( blankNode , "width: 991px; height:100px; position: relative; clear: left;" );
    
    //blankNode.innerHTML = "<img src=\"img/sample1.jpg\" style=\"position: absolute; top: 50%; left: 50%; margin: -45px 0px 0px -364px;\">"
    
    
    // 地デジ/BS
    this.epgController.createCategoryController();
    
    // TOP地域選択
    this.epgController.createTopAreaSelector( this.areaListManager );
};

IPG.EpgContainer.prototype.drawFullEpgFrame = function(){
    
    var epgTitleNode = this.document.createElement("div");
    this.container.appendChild( epgTitleNode );
    epgTitleNode.id = "epg_title";
    Element.setStyle( epgTitleNode , "width: 991px; height: 34px; background-image: url("+this.config.config_xml.img_path.container_frame_top+"); position: relative;" );
    
    var containerFrameLeftNode = this.document.createElement("div");
    this.container.appendChild( containerFrameLeftNode );
    Element.setStyle( containerFrameLeftNode , "width: 11px; height: 420px; background-image: url("+this.config.config_xml.img_path.container_frame_left+"); position: relative; float: left; overflow: hidden;" );
    
    var containerFrameNode = this.document.createElement("div");
    this.container.appendChild( containerFrameNode );
    containerFrameNode.id = "container_frame";
    Element.setStyle( containerFrameNode , "width: 968px; height: 420px; position: relative; margin-left: 1px; float: left; overflow: hidden;" );
    
    var containerFrameRightNode = this.document.createElement("div");
    this.container.appendChild( containerFrameRightNode );
    Element.setStyle( containerFrameRightNode , "width: 11px; height: 420px; background-image: url("+this.config.config_xml.img_path.container_frame_right+"); position: relative; float: left; overflow: hidden;" );
    
    var epgHSBNode = this.document.createElement("div");
    containerFrameNode.appendChild( epgHSBNode );
    epgHSBNode.id = "horizontal_sb";
    Element.setStyle( epgHSBNode , "height: 12px; position: relative; overflow: hidden;" );
    
    var frameNode = this.document.createElement("div");
    containerFrameNode.appendChild( frameNode );
    frameNode.id = "epg_frame";
    Element.setStyle( frameNode , "width: 955px; height:408px; position: relative; overflow: hidden; float: left;" );
    
    var epgVSBNode = this.document.createElement("div");
    containerFrameNode.appendChild( epgVSBNode );
    epgVSBNode.id = "vertical_sb";
    Element.setStyle( epgVSBNode , "width: 12px; margin-left: 1px; position: relative; overflow: hidden; float: left;" );
    
    var pgDetailNode = this.document.createElement("div");
    frameNode.appendChild( pgDetailNode );
    pgDetailNode.id = "pg_detail";
    Element.setStyle( pgDetailNode , "position: absolute; z-index: 3; display: none;" );
    
    var epgHeaderFrameNode = this.document.createElement("div");
    frameNode.appendChild( epgHeaderFrameNode );
    epgHeaderFrameNode.id = "epg_header_frame";
    Element.setStyle( epgHeaderFrameNode , "width: 955px; height: 53px; background-color: rgb(156, 156, 156); position: absolute; display: block; z-index: 0; overflow: hidden;" );
    
    var epgHeaderNode = this.document.createElement("div");
    epgHeaderFrameNode.appendChild( epgHeaderNode );
    epgHeaderNode.id = "epg_header";
    Element.setStyle( epgHeaderNode , "height: 53px; position: absolute; display: block;" );
    
    var epgBodyFrameNode = this.document.createElement("div");
    frameNode.appendChild( epgBodyFrameNode );
    epgBodyFrameNode.id = "epg_body_frame";
    Element.setStyle( epgBodyFrameNode , "width: 955px; height: 355px; background-color: rgb(156, 156, 156); position: absolute; top: 53px; display: block; z-index: 0; cursor: pointer; overflow: hidden;" );
    
    var epgBodyNode = this.document.createElement("div");
    epgBodyFrameNode.appendChild( epgBodyNode );
    epgBodyNode.id = "epg_body";
    Element.setStyle( epgBodyNode , "position: absolute;" );
    
    var containerFrameBottomNode = this.document.createElement("div");
    this.container.appendChild( containerFrameBottomNode );
    Element.setStyle( containerFrameBottomNode , "width: 991px; height: 18px; position: relative; clear: both;" );
    
    var bottomImage = this.document.createElement("img");
    containerFrameBottomNode.appendChild( bottomImage );
    bottomImage.src = this.config.config_xml.img_path.container_frame_bottom;
    
    var epgFooterNode = this.document.createElement("div");
    this.container.appendChild( epgFooterNode );
    epgFooterNode.id = "epg_footer";
    Element.setStyle( epgFooterNode , "background-color: white; width: 991px; height: 18px; position: relative;" );
};

IPG.EpgContainer.prototype.drawTopEpgFrame = function(){
    
    var epgTitleNode = this.document.createElement("div");
    this.container.appendChild( epgTitleNode );
    epgTitleNode.id = "epg_title";
    Element.setStyle( epgTitleNode , "width: 991px; height: 34px; background-image: url("+this.config.config_xml.img_path.container_frame_top+"); position: relative;" );
    
    var containerFrameLeftNode = this.document.createElement("div");
    this.container.appendChild( containerFrameLeftNode );
    Element.setStyle( containerFrameLeftNode , "width: 11px; height: 305px; background-image: url("+this.config.config_xml.img_path.container_frame_left+"); position: relative; float: left; overflow: hidden;" );
    
    var containerFrameNode = this.document.createElement("div");
    this.container.appendChild( containerFrameNode );
    containerFrameNode.id = "container_frame";
    Element.setStyle( containerFrameNode , "width: 968px; height: 305px; margin-left: 1px; position: relative; float: left; overflow: hidden;" );
    
    var containerFrameRightNode = this.document.createElement("div");
    this.container.appendChild( containerFrameRightNode );
    Element.setStyle( containerFrameRightNode , "width: 11px; height: 305px; background-image: url("+this.config.config_xml.img_path.container_frame_right+"); position: relative; float: left; overflow: hidden;" );
    
    var epgHSBNode = this.document.createElement("div");
    containerFrameNode.appendChild( epgHSBNode );
    epgHSBNode.id = "horizontal_sb";
    Element.setStyle( epgHSBNode , "height: 12px; position: relative; overflow: hidden;" );
    
    var frameNode = this.document.createElement("div");
    containerFrameNode.appendChild( frameNode );
    frameNode.id = "epg_frame";
    Element.setStyle( frameNode , "background-color: white; width: 955px; height:293px; position: relative; overflow: hidden; float: left;" );
    
    var epgVSBNode = this.document.createElement("div");
    containerFrameNode.appendChild( epgVSBNode );
    Element.setStyle( epgVSBNode , "width: 12px; height: 293px; margin-left: 1px; background-color: rgb( 238, 233, 239 ); position: relative; float: left;" );
    
    var pgDetailNode = this.document.createElement("div");
    frameNode.appendChild( pgDetailNode );
    pgDetailNode.id = "pg_detail";
    Element.setStyle( pgDetailNode , "position: absolute; z-index: 3; display: none;" );
    
    var epgHeaderFrameNode = this.document.createElement("div");
    frameNode.appendChild( epgHeaderFrameNode );
    epgHeaderFrameNode.id = "epg_header_frame";
    Element.setStyle( epgHeaderFrameNode , "width: 955px; height: 53px; background-color: rgb(156, 156, 156); position: absolute; display: block; z-index: 0; overflow: hidden;" );
    
    var epgHeaderNode = this.document.createElement("div");
    epgHeaderFrameNode.appendChild( epgHeaderNode );
    epgHeaderNode.id = "epg_header";
    Element.setStyle( epgHeaderNode , "height: 53px; position: absolute; display: block;" );
    
    var epgBodyFrameNode = this.document.createElement("div");
    frameNode.appendChild( epgBodyFrameNode );
    epgBodyFrameNode.id = "epg_body_frame";
    Element.setStyle( epgBodyFrameNode , "width: 955px; height: 240px; background-color: rgb(156, 156, 156); position: absolute; top: 53px; display: block; z-index: 0; cursor: pointer; overflow: hidden;" );
    
    var epgBodyNode = this.document.createElement("div");
    epgBodyFrameNode.appendChild( epgBodyNode );
    epgBodyNode.id = "epg_body";
    Element.setStyle( epgBodyNode , "position: absolute;" );
    
    var containerFrameBottomNode = this.document.createElement("div");
    this.container.appendChild( containerFrameBottomNode );
    Element.setStyle( containerFrameBottomNode , "width: 991px; height: 18px; position: relative; clear: both;" );
    
    var bottomImage = this.document.createElement("img");
    containerFrameBottomNode.appendChild( bottomImage );
    bottomImage.src = this.config.config_xml.img_path.container_frame_bottom;
    
    var epgFooterNode = this.document.createElement("div");
    this.container.appendChild( epgFooterNode );
    epgFooterNode.id = "epg_footer";
    Element.setStyle( epgFooterNode , "background-color: white; width: 991px; height: 18px; position: relative;" );
};

IPG.EpgContainer.prototype.bindBodyFrameEvent = function( bodyFrameElement ){
    if( !bodyFrameElement ) return;
    // body_frame_elementのoffsetXYを取得
    
    var bodyFrameOffsetTop = bodyFrameElement.offsetTop;
    var bodyFrameOffsetLeft = bodyFrameElement.offsetLeft;
    var tmp_node = bodyFrameElement;
    while( tmp_node.offsetParent ){
        tmp_node = tmp_node.offsetParent;
        bodyFrameOffsetTop += tmp_node.offsetTop;
        bodyFrameOffsetLeft += tmp_node.offsetLeft;
    }
    var bodyFrameWidth = IPG.Utility.trimUnit( bodyFrameElement.style.width );
    var bodyFrameHeight = IPG.Utility.trimUnit( bodyFrameElement.style.height );
    var bodyFrameDelta = {
        min : { x : bodyFrameOffsetLeft , y : bodyFrameOffsetTop },
        max : { x : bodyFrameOffsetLeft+bodyFrameWidth , y:bodyFrameOffsetTop+bodyFrameHeight }
    };
    /**
    var containerOffsetTop = $( "epg_container" ).offsetTop;
    var containerOffsetLeft = $( "epg_container" ).offsetLeft;
    
    var containerFrameOffsetTop = $( "container_frame" ).offsetTop;
    var containerFrameOffsetLeft = $( "container_frame" ).offsetLeft;
    var epgFrameOffsetTop = $( "epg_frame" ).offsetTop;
    
    var bodyFrameOffsetTop = bodyFrameElement.offsetTop;
    var bodyFrameWidth = IPG.Utility.trimUnit( bodyFrameElement.style.width );
    var bodyFrameHeight = IPG.Utility.trimUnit( bodyFrameElement.style.height );
    // [+1]はDIVの子要素であるSPANのTOPが[1]になる為。
    var bodyFrameDelta = {
        min : { x : containerOffsetLeft+containerFrameOffsetLeft , y : containerOffsetTop+containerFrameOffsetTop+epgFrameOffsetTop+bodyFrameOffsetTop+1 },
        max : { x : containerOffsetLeft+containerFrameOffsetLeft+bodyFrameWidth , y:containerOffsetTop+containerFrameOffsetTop+epgFrameOffsetTop+bodyFrameOffsetTop+bodyFrameHeight+1 }
    };
    **/
    Event.observe( bodyFrameElement , "mousedown" , this.bodyFrameMouseDown.bind( this ) );
    Event.observe( bodyFrameElement , "mouseover" , this.bodyFrameMouseOver.bindAsEventListener( this , bodyFrameDelta ) );
    this.bodyFrameMouseUpMethod = this.bodyFrameMouseUp.bind( this );
    this.bodyFrameMouseMoveMethod = this.bodyFrameMouseMove.bindAsEventListener( this , bodyFrameDelta );
    
    Event.observe( $( "pg_detail" ) , "mouseover" , this.popupMouseOver.bind( this ) );
};

IPG.EpgContainer.prototype.popupMouseOver = function( evt ){
    evt = IPG.Utility.fixEvent( evt , this );
    //IPG.Utility.debugOut( '[mouseover@popup]' , "debug" , "blue" );
    
    Event.stopObserving( this.document , "mousemove" , this.bodyFrameMouseMoveMethod );
    // バルーン表示されてたら消す。
    var balloon = $( "pg_balloon" );
    if( !balloon ){
        Event.stop( evt );
        return false;
    }
    var balloon_style = balloon.style;
    var orgColor = balloon.getAttribute("target_org_color");
    var target_id = balloon.getAttribute( "target_id" );
    if( orgColor && target_id ) $( target_id ).firstChild.style.color = orgColor;
    balloon.removeAttribute( "target_id" );
    balloon.removeAttribute( "target_org_color" );
    if( balloon_style.display == "block" ) balloon_style.display = "none";
};

IPG.EpgContainer.prototype.popupMouseDown = function( evt ){
	evt = IPG.Utility.fixEvent( evt , this );
    // 左クリック以外は処理しない。
    if( evt.which != 1 ){
		Event.stop( evt );
		evt.preventDefault();
		return false;
	}
	//IPG.Utility.debugOut( '[mousedown@popup]' , "debug" , "blue" );
	Event.stopObserving( $( "popup_close" ) , "mousedown" , this.popupMouseDown );
	var detail = $( "pg_detail" );
	var detail_style = detail.style;
	detail.removeAttribute( "target_id" );
	if( detail_style.display == "block" ) detail_style.display = "none";
	//Event.stop( evt );
    evt.preventDefault();
	return false;
};

// mouseup
// EPGがドラッグ中であれば、設定を解除してリターン。(一連の処理はmousedownからやり直す)
// mouseupしたのがmousedownしたのと同じ番組上でない場合も、設定を解除してリターン。
// 表示していい状況なら、描画済みのポップアップをアクティベート
IPG.EpgContainer.prototype.bodyFrameMouseUp = function( evt ){
	evt = IPG.Utility.fixEvent( evt , this );
    
    // 左クリック以外は処理しない。
    if( evt.which != 1 ){
		evt.preventDefault();
		return false;
	}
	var detail = $( "pg_detail" );
	var detail_style = detail.style;
	
	var distance = Math.sqrt( Math.pow( ( this.epgSlider.startPos.x - evt.pageX ) , 2 ) + Math.pow( ( this.epgSlider.startPos.y - evt.pageY ) , 2 ) );
	if( distance > 2 ){
		Event.stopObserving( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
		detail.removeAttribute( "target_id" );
		detail.removeAttribute( "url" );
		evt.preventDefault();
		return false;
	}
	
	if( !this.isFullEPG ){
		var url = detail.getAttribute( "url" );
		detail.removeAttribute( "target_id" );
		detail.removeAttribute( "url" );
		window.location.href = url;
		evt.preventDefault();
		return false;
	}
	//IPG.Utility.debugOut( '[mouseup@bodyFrame]' , "debug" , "blue" );
	var return_flg = false;
	var target_id = detail.getAttribute( "target_id" );
	var target = evt.srcElement;
	if( !target ){
		Event.stopObserving( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
		detail.removeAttribute( "target_id" );
		detail.removeAttribute( "url" );
		if( detail_style.display == "block" ) detail_style.display = "none";
		evt.preventDefault();
		return false;
	}
	while( !target.id ) target = target.parentNode;
	if( target_id != target.id ){
		Event.stopObserving( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
		detail.removeAttribute( "target_id" );
		detail.removeAttribute( "url" );
		if( detail_style.display == "block" ) detail_style.display = "none";
		evt.preventDefault();
		return false;
	}
	Event.observe( $( "popup_close" ) , "mousedown" , this.popupMouseDown );
	Event.stopObserving( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
	
	// 影の高さをコンテンツの高さに。
	if( !Prototype.Browser.IE || window.XMLHttpRequest ){
	    var popup_body = $( "popup_body" );
	    var popup_shadow = $( "popup_shadow" );
	    popup_shadow.style.height = popup_body.offsetHeight+"px";
	    popup_body.style.height = popup_body.offsetHeight+"px";
	}
	
	if( detail_style.visibility == "hidden" ) detail_style.visibility = "visible";
	
	detail.removeAttribute( "target_id" );
	detail.removeAttribute( "url" );
	
	evt.preventDefault();
	return false;
};

// mousedown
// mouseup時にポップアップを表示するかどうかのフラグ立て。
// ターゲットの取得＋ポップアップの描画（描画はするけど、表には出さない。)
IPG.EpgContainer.prototype.bodyFrameMouseDown = function( evt ){
	evt = IPG.Utility.fixEvent( evt , this );
    
    // 左クリック以外は処理しない。
    if( evt.which != 1 ){
		evt.preventDefault();
		return false;
    }
	
	//IPG.Utility.debugOut( '[mousedown@bodyFrame]' , "debug" , "blue" );
	Event.stopObserving( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
	var return_flg = false;
	var detail = $( "pg_detail" );
	var detail_style = detail.style;
	detail.innerHTML = "";
	
	var target_id = detail.getAttribute( "target_id" );
	var target = evt.srcElement;
	while( !target.id ) target = target.parentNode;
	if( target_id && target_id == target.id ){
		evt.preventDefault();
		return false;
	}
	var pgObj = undefined;
	if( target.id == "epg_body" || target.id.match( /^pg_frame_.+_top$/ ) || target.id.match( /^pg_frame_.+_last$/ ) ){
		return_flg = true;
	}else{
		var main_ch = target.id.split("_")[2];
		var pg_count = target.id.split("_")[3];
		pgObj = this.serviceListmanager.getProgramDetail( main_ch , pg_count );
		if( !pgObj ){
			return_flg = true;
		}
	}
	if( return_flg ){
		detail.removeAttribute( "target_id" );
		if( detail_style.display == "block" ) detail_style.display = "none";
		evt.preventDefault();
		return false;
	}
	detail.setAttribute( "target_id" , target.id );
	Event.observe( $( "epg_body_frame" ) , "mouseup" , this.bodyFrameMouseUpMethod );
	
	if( !this.isFullEPG ){
		detail.setAttribute( "url" , pgObj.pg_detail_url );
		evt.preventDefault();
		return false;
	}
	
	var closeicon = $( "popup_close" );
	if( closeicon ) Event.stopObserving( closeicon , "mousedown" , this.popupMouseDown );
	
	var genre_name = this.genreListManager.getMajorGenreName( pgObj.pg_major_genre );
	var html = "";
	html += "<div style=\"position: relative; z-index: 1;\">";
	html += "<div style=\"width: 486px; height: 11px; position: relative;\"><img src=\""+this.config.config_xml.img_path.popup_top+"\"></div>";
	html += "<div id=\"popup_body\" style=\"font-size: "+this.fontSize+"; width: 486px; background-image: url("+this.config.config_xml.img_path.popup_rep+"); position: relative;\">";
	html += "<div style=\"position: relative;\">";
	html += "<div style=\"border: 1px solid rgb( 156,156,156 ); width: 29px; height: 29px; margin: 8px 0px 0px 12px; position: relative; float:left;\"><img src=\""+pgObj.logo_image+"\" style=\"position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; border: none;\"></div>";
	html += "<div style=\"width: 412px; margin: 8px 0px 0px 8px; position: relative; float:left;\"><span style=\"color: #454545; font-weight: bold;\">"+IPG.Utility.getHHMMFromSIDateStr( pgObj.pg_startdate )+" "+((pgObj.pg_title)?pgObj.pg_title:"")+"</span></div>";
	html += "<div style=\"position: relative; clear:left;\"></div>";
	html += "<div style=\"margin: 8px 0px 0px 8px; position: relative;\">";
	html += "<span style=\"color: #0154b1;\">"+IPG.Utility.getYYYYMMDDHHMMFromSIDateStr( pgObj.pg_startdate )+"　～　"+IPG.Utility.getYYYYMMDDHHMMFromSIDateStr( pgObj.pg_enddate )+"</span>";
	html += "<span style=\"margin-left: 8px; color: #0154b1;\">（"+pgObj.station_name+"）［"+pgObj.three_digit+"］</span>";
	html += "</div>";
	html += "<div style=\"margin: 3px 0px 0px 8px; position: relative;\"><span style=\"color: #0154b1;\">"+((genre_name != undefined)?genre_name:"")+"</span></div>";
	if( pgObj.pg_synopsis != undefined ){
		html += "<div style=\"font-size: 1px; height: 1px; background-color: rgb(156,156,156); margin: 3px 8px 3px 8px; position: relative;\"></div>";
		html += "<div style=\"margin-left: 8px; position: relative;\"><img src=\""+this.config.config_xml.img_path.popup_synopsis+"\" style=\"border: none;\"></div>";
		html += "<div style=\"margin: 3px 8px 0px 8px; position: relative;\"><span style=\"color: #666666;\">"+pgObj.pg_synopsis+"</span></div>";
	}
	html += "<div style=\"font-size: 1px; height: 1px; background-color: rgb(156,156,156); margin: 3px 8px 3px 8px; position: relative;\"></div>";
	html += "<div style=\"width: 199px; height: 30px; position: relative; left: 50%; margin-left: -100px;\"><a href=\""+pgObj.pg_detail_url+"\"><img src=\""+this.config.config_xml.img_path.popup_to_detail+"\" style=\"border: none;\"></a></div>";
	html += "</div>";
	html += "</div>";
	html += "<div style=\"width: 486px; height: 4px; position: relative;\"><img src=\""+this.config.config_xml.img_path.popup_btm+"\"></div>";
	html += "<div id=\"popup_close\" style=\"width: 17px; height: 17px; cursor: pointer; position: absolute; top: 6px; left: "+(486-17-6)+"px;\"><img src=\""+this.config.config_xml.img_path.popup_close+"\" style=\"border: none;\"></div>";
	html += "</div>";
	if( !Prototype.Browser.IE || window.XMLHttpRequest ){
	    html += "<div style=\"position: absolute; top: 0px; left: 0px; z-index: 0;\">";
	    html += "<div style=\"width: 500px; height: 11px; position: relative;\"><img src=\""+this.config.config_xml.img_path.popup_top_shadow+"\"></div>";
	    html += "<div id=\"popup_shadow\" style=\"width: 500px; background-image: url("+this.config.config_xml.img_path.popup_rep_shadow+"); position: relative;\"></div>";
	    html += "<div style=\"width: 500px; height: 15px; position: relative;\"><img src=\""+this.config.config_xml.img_path.popup_btm_shadow+"\"></div>";
	    html += "</div>";
	}
	
	detail.innerHTML = html;
	detail_style.visibility = "hidden";
	if( detail_style.display == "none" ){
		detail_style.display = "block";
	}
	
	var detail_width = Math.round( detail.offsetWidth / 2 );
	var detail_height = Math.round( detail.offsetHeight / 2 );
	var detail_style = detail.style;
	detail_style.position = "absolute";
	detail_style.top = "50%";
	detail_style.left = "50%";
	detail_style.marginTop = "-"+detail_height+"px";
	detail_style.marginLeft = "-"+detail_width+"px";
	
    evt.preventDefault();
	return false;
};

IPG.EpgContainer.prototype.bodyFrameMouseOver = function( evt , delta ){
	evt = IPG.Utility.fixEvent( evt , this );
	if( this.epgSlider.active ){
		Event.stop( evt );
		return false;
	}
	var return_flg = false;
	var balloon = $( "pg_balloon" );
	var balloon_style = balloon.style;
	var orgColor = balloon.getAttribute("target_org_color");
	var target_id = balloon.getAttribute( "target_id" );
	var target = evt.srcElement;
	while( !target.id ) target = target.parentNode;
	if( target_id && target_id == target.id ){
		Event.stop( evt );
		return false;
	}
	var pgObj = undefined;
	if( target.id == "epg_body" || target.id == "pg_detail" || target.id.match( /^pg_frame_.+_top$/ ) || target.id.match( /^pg_frame_.+_last$/ ) ){
		return_flg = true;
	}else{
		var main_ch = target.id.split("_")[2];
		var pg_count = target.id.split("_")[3];
		pgObj = this.serviceListmanager.getProgramDetail( main_ch , pg_count );
		if( !pgObj ){
			return_flg = true;
		}
	}
	if( IPG.Utility.trimUnit( target.style.height ) > 30 ) return_flg = true;
	if( return_flg ){
		Event.stopObserving( this.document , "mousemove" , this.bodyFrameMouseMoveMethod );
		if( orgColor ) $( target_id ).firstChild.style.color = orgColor;
		balloon.removeAttribute( "target_id" );
		balloon.removeAttribute( "target_org_color" );
		if( balloon_style.display == "block" ) balloon_style.display = "none";
		Event.stop( evt );
		return false;
	}
	if( orgColor ) $( target_id ).firstChild.style.color = orgColor;
	balloon.setAttribute( "target_id" , target.id );
	balloon.setAttribute( "target_org_color" , target.firstChild.style.color );
	target.firstChild.style.color = "red";
	var genre_name = this.genreListManager.getMajorGenreName( pgObj.pg_major_genre );
	
	var html = "";
	html += "<div style=\"position: relative; z-index: 1;\">";
	html += "<div style=\"width: 255px; height: 6px; position: relative;\"><img src=\""+this.config.config_xml.img_path.balloon_top+"\"></div>";
	html += "<div id=\"balloon_body\" style=\"width: 255px; background-image: url("+this.config.config_xml.img_path.balloon_rep+"); position: relative;\">";
	html += "<div style=\"width: 198px; padding-left: 8px; position: relative; left: 0px; float:left;\"><span style=\"color: #454545; font-weight: bold; font-size: "+this.fontSize+";\">"+IPG.Utility.getHHMMFromSIDateStr( pgObj.pg_startdate )+" "+((pgObj.pg_title)?pgObj.pg_title:"")+"</span></div>";
	html += "<div style=\"border: 1px solid rgb( 156,156,156 ); width: 29px; height: 29px; margin-right: 8px; position: relative; float: right;\"><img src=\""+pgObj.logo_image+"\" style=\"position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px;\"></div>";
	html += "<div style=\"position: relative; clear: both;\"></div>";
	html += "<div style=\"width: 240px; margin-left: 8px; margin-top: 3px; position: relative;\">";
	html += "<span style=\"color: #0154b1; font-size: "+this.fontSize+";\">"+IPG.Utility.getHHMMFromSIDateStr( pgObj.pg_startdate )+"～"+IPG.Utility.getHHMMFromSIDateStr( pgObj.pg_enddate )+"</span>";
	html += "<span style=\"color: #0154b1; font-size: "+this.fontSize+";\">（"+pgObj.station_name+"）［"+pgObj.three_digit+"］</span>";
	html += "</div>";
	html += "<div style=\"width: 240px; margin-left: 8px; position: relative;\"><span style=\"color: #0154b1; font-size: "+this.fontSize+";\">"+((genre_name != undefined)?genre_name:"")+"</span></div>";
	html += "</div>";
	html += "<div style=\"width: 255px; height: 7px; position: relative;\"><img src=\""+this.config.config_xml.img_path.balloon_btm+"\"></div>";
	html += "</div>";
	
	if( !Prototype.Browser.IE || window.XMLHttpRequest ){
		html += "<div style=\"position: absolute; top: 0px; left: 0px; z-index: 0;\">";
		html += "<div style=\"width: 264px; height: 6px;\"><img src=\""+this.config.config_xml.img_path.balloon_top_shadow+"\"></div>";
		html += "<div id=\"balloon_shadow\" style=\"width: 264px; background-image: url("+this.config.config_xml.img_path.balloon_rep_shadow+");\"></div>";
		html += "<div style=\"width: 264px; height: 12px;\"><img src=\""+this.config.config_xml.img_path.balloon_btm_shadow+"\"></div>";
		html += "</div>";
	}
	
	balloon.innerHTML = html;
	balloon_style.visibility = "hidden";
	if( balloon_style.display == "none" ){
		balloon_style.display = "block";
	}
	
	if( !Prototype.Browser.IE || window.XMLHttpRequest ){
		// 影の高さをコンテンツの高さに。
		var balloon_body = $( "balloon_body" );
		var balloon_shadow = $( "balloon_shadow" );
		balloon_shadow.style.height = balloon_body.offsetHeight+"px";
		balloon_body.style.height = balloon_body.offsetHeight+"px";
	}
	
	var balloon_width = balloon.offsetWidth;
	var balloon_height = balloon.offsetHeight;
	if( ( evt.pageX+15+balloon_width ) > delta.max.x ){
		balloon_style.left = (evt.pageX-(balloon_width+5))+"px";
	}else{
		balloon_style.left = (evt.pageX+15)+"px";
	}
	if( ( evt.pageY+5+balloon_height ) > delta.max.y ){
		balloon_style.top = (evt.pageY-(balloon_height+5))+"px";
	}else{
		balloon_style.top = (evt.pageY+5)+"px";
	}
	/**
	balloon_style.left = (evt.pageX+15)+"px";
	balloon_style.top = (evt.pageY+5)+"px";
	**/
	if( balloon_style.visibility == "hidden" ) balloon_style.visibility = "visible";
	Event.observe( this.document , "mousemove" , this.bodyFrameMouseMoveMethod );
	Event.stop( evt );
	return false;
};

IPG.EpgContainer.prototype.bodyFrameMouseMove = function( evt , delta ){
	evt = IPG.Utility.fixEvent( evt , this );
	var balloon = $( "pg_balloon" );
	var balloon_style = balloon.style;
	var orgColor = balloon.getAttribute("target_org_color");
	var target_id = balloon.getAttribute( "target_id" );
	if( balloon_style.display != "block" ){
		Event.stop( evt );
		return false;
	}
	
	if( evt.pageX < delta.min.x || evt.pageX > delta.max.x || evt.pageY < delta.min.y || evt.pageY > delta.max.y ){
		Event.stopObserving( this.document , "mousemove" , this.bodyFrameMouseMoveMethod );
		$( balloon.getAttribute("target_id") ).firstChild.style.color = balloon.getAttribute("target_org_color");
		balloon.removeAttribute( "target_id" );
		balloon.removeAttribute( "target_org_color" );
		if( balloon_style.display == "block" ) balloon_style.display = "none";
		Event.stop( evt );
		return false;
	}
	var balloon_width = balloon.offsetWidth;
	var balloon_height = balloon.offsetHeight;
	if( ( evt.pageX+15+balloon_width ) > delta.max.x ){
		balloon_style.left = (evt.pageX-(balloon_width+5))+"px";
	}else{
		balloon_style.left = (evt.pageX+15)+"px";
	}
	if( ( evt.pageY+5+balloon_height ) > delta.max.y ){
		balloon_style.top = (evt.pageY-(balloon_height+5))+"px";
	}else{
		balloon_style.top = (evt.pageY+5)+"px";
	}
	/**
	balloon_style.left = (evt.pageX+15)+"px";
	balloon_style.top = (evt.pageY+5)+"px";
	**/
	Event.stop( evt );
	return false;
};

IPG.EpgContainer.prototype.programLoadComplete = function(){
    try{
        // EPGスライダの生成。
        if( this.epgSlider ) this.epgSlider.rebindEvents();
        if( this.isFullEPG ) this.epgSlider = this.initFullEpgSlider();
        else this.epgSlider = this.initTopEpgSlider();
        
        // スクロールバーの生成
        // リフレッシュ時にはイベントのリムーブと再描画（表示サイズから、スライダの位置補正まで。）
        this.initScrollBar();
        
        // EPGコンテンツの描画位置補正
        if( this.config.cookie.bctype == "BSD" ) this.epgSlider.bsdDefaultMove();
        else this.epgSlider.drawSlider();
        
        //IPG.Utility.debugOut( '[programLoadComplete DONE]' , "debug" , "blue" );
    }catch( exp ){
        $( "epg_cloak" ).style.display = "block";
        $( "cloak_img" ).src = this.config.error_image;
        return false;
    }
    return true;
};

IPG.EpgContainer.prototype.initFullEpgSlider = function(){
    
    var slider = new IPG.Slider( "epg_frame" , "epg_body_frame" );
    if( !slider ) return undefined;
    
    var content_w = IPG.Utility.trimUnit( $( "epg_body" ).style.width );
    var content_h = IPG.Utility.trimUnit( $( "epg_body" ).style.height );
    slider.setScrollSize( content_w , content_h );
    
    slider.scrollXAxisElements = [ IPG.Utility.getElement( "epg_header_frame" ) , IPG.Utility.getElement( "epg_body_frame" ) ];
    slider.scrollYAxisElements = [ IPG.Utility.getElement( "epg_body_frame" ) ];
    
	/**
    slider.pointer_path = {};
    if( Prototype.Browser.IE ){
        slider.pointer_path.open = this.config.config_xml.img_path.cursor_open_ie;
        slider.pointer_path.close = this.config.config_xml.img_path.cursor_close_ie;
    }else{
        slider.pointer_path.open = this.config.config_xml.img_path.cursor_open;
        slider.pointer_path.close = this.config.config_xml.img_path.cursor_close;
    }
    **/
    
    slider.bindEvents();
    
    return slider;
};

IPG.EpgContainer.prototype.initTopEpgSlider = function(){
    
    var slider = new IPG.Slider( "epg_frame" , "epg_body_frame" );
    if( !slider ) return undefined;
    
    var content_w = IPG.Utility.trimUnit( $( "epg_body" ).style.width );
    var content_h = IPG.Utility.trimUnit( $( "epg_body" ).style.height );
    slider.setScrollSize( content_w , content_h );
    
    slider.scrollXAxisElements = [ IPG.Utility.getElement( "epg_header_frame" ) , IPG.Utility.getElement( "epg_body_frame" ) ];
    slider.scrollYAxisElements = null;
    
	/**
    slider.pointer_path = {};
    if( Prototype.Browser.IE ){
        slider.pointer_path.open = this.config.config_xml.img_path.cursor_open_ie;
        slider.pointer_path.close = this.config.config_xml.img_path.cursor_close_ie;
    }else{
        slider.pointer_path.open = this.config.config_xml.img_path.cursor_open;
        slider.pointer_path.close = this.config.config_xml.img_path.cursor_close;
    }
    **/
    
    slider.bindEvents();
    
    return slider;
};

IPG.EpgContainer.prototype.initScrollBar = function(){
    
    if( !this.v_scrollbar ){
        this.v_scrollbar = this.createVerticalScrollBar();
        if( this.v_scrollbar ){
            this.makeScrollBarHTML( this.v_scrollbar );
            this.v_scrollbar.bindEvents();
            this.epgSlider.scrollYAxisScrollBar = this.v_scrollbar;
        }
    }else{
        this.v_scrollbar.rebindEvents();
        this.v_scrollbar = this.createVerticalScrollBar();
        if( this.v_scrollbar ){
            this.remakeScrollBarFrameHTML( this.v_scrollbar );
            this.v_scrollbar.bindEvents();
            this.epgSlider.scrollYAxisScrollBar = this.v_scrollbar;
        }
    }
    
    if( !this.h_scrollbar ){
        this.h_scrollbar = this.createHorizontalScrollBar();
        if( this.h_scrollbar ){
            this.makeScrollBarHTML( this.h_scrollbar );
            this.h_scrollbar.bindEvents();
            this.epgSlider.scrollXAxisScrollBar = this.h_scrollbar;
        }
    }else{
        this.h_scrollbar.rebindEvents();
        this.h_scrollbar = this.createHorizontalScrollBar();
        if( this.h_scrollbar ){
            this.remakeScrollBarFrameHTML( this.h_scrollbar );
            this.h_scrollbar.bindEvents();
            this.epgSlider.scrollXAxisScrollBar = this.h_scrollbar;
        }
    }
};

IPG.EpgContainer.prototype.createVerticalScrollBar = function(){
    if( !this.epgSlider ) return undefined;
    var sb_config = this.config.config_xml.scrollbar_info.vertical;
    var vsb = new IPG.ScrollBar( "vertical_sb" );
    if( !vsb.scrollbarElement ) return null;
    vsb.direction.vertical_sb = true;
    vsb.contentSlider = this.epgSlider;
    
    var controllerNodes = vsb.controllerNodes;
    controllerNodes.sb_frame = "vsb_frame";
    controllerNodes.sb_content = "vsb_content";
    controllerNodes.sb_bg_top = "vsb_bg_top";
    controllerNodes.sb_bg_bottom = "vsb_bg_bottom";
    controllerNodes.moveup_node = "icon_up";
    controllerNodes.movedown_node = "icon_down";
    controllerNodes.slider_node = "vsb_slider";
    
    var content_h = IPG.Utility.trimUnit( $( "epg_body" ).style.height );
    var frame_h = IPG.Utility.trimUnit( vsb.contentSlider.frameElement.style.height );
    var scroll_frame_h = IPG.Utility.trimUnit( $( "epg_body_frame" ).style.height );
    
    // スクロールバー各ノードのサイズを算出。
    var detail = vsb.detail;
    detail.sb_width = sb_config.icon_size_w;
    detail.sb_height = frame_h;
    detail.icon_height = sb_config.icon_size_h;
    detail.icon_width = sb_config.icon_size_w;
    detail.slider_frame_width = sb_config.icon_size_w;
    detail.slider_frame_height = (  detail.sb_height - sb_config.icon_size_h * 2 );
    var frame_size_rate = ( ( scroll_frame_h / content_h ) > 1 ) ? 1 : ( scroll_frame_h / content_h );
    detail.slider_width = sb_config.icon_size_w;
    detail.slider_height = Math.round( frame_size_rate * detail.slider_frame_height );
    
    // 初期描画位置の取得
    var pos = vsb.sliderPos;
    pos.rate = ( ( detail.slider_frame_height - detail.slider_height ) / ( content_h - ( scroll_frame_h ) ) );
    pos.base = ( sb_config.base_move != undefined ) ? sb_config.base_move : 6;
    pos.moveLimit = pos.base * 6;
    pos.min = 0;
    pos.max = ( vsb.detail.sb_height - vsb.detail.icon_height*2 - vsb.detail.slider_height );
    pos.last = 0; // リフレッシュ時には前回位置を取得する必要が有るぜ。
    
    return vsb;
};

IPG.EpgContainer.prototype.createHorizontalScrollBar = function(){
    if( !this.epgSlider ) return undefined;
    var sb_config = this.config.config_xml.scrollbar_info.horizontal;
    var hsb = new IPG.ScrollBar( "horizontal_sb" );
    if( !hsb.scrollbarElement ) return null;
    hsb.direction.horizontal_sb = true;
    hsb.contentSlider = this.epgSlider;
    
    // スクロールバー各ノードのIDをベタに。
    var controllerNodes = hsb.controllerNodes;
    controllerNodes.sb_frame = "hsb_frame";
    controllerNodes.sb_content = "hsb_content";
    controllerNodes.sb_bg_left = "vsb_bg_left";
    controllerNodes.sb_bg_right = "vsb_bg_right";
    controllerNodes.moveleft_node = "icon_left";
    controllerNodes.moveright_node = "icon_right";
    controllerNodes.slider_node = "hsb_slider";
    
    var content_w = IPG.Utility.trimUnit( $( "epg_body" ).style.width );
    var frame_w = IPG.Utility.trimUnit( hsb.contentSlider.frameElement.style.width );
    var scroll_frame_w = frame_w;
    
    // スクロールバー各ノードのサイズを算出。
    var detail = hsb.detail;
    detail.sb_width = frame_w;
    detail.sb_height = sb_config.icon_size_h;
    detail.icon_height = sb_config.icon_size_h;
    detail.icon_width = sb_config.icon_size_w;
    detail.slider_frame_width = (  detail.sb_width - sb_config.icon_size_w * 2 );
    detail.slider_frame_height = sb_config.icon_size_h;
    var frame_size_rate = ( ( scroll_frame_w / content_w ) > 1 ) ? 1 : ( scroll_frame_w / content_w );
    detail.slider_width = Math.round( frame_size_rate * detail.slider_frame_width );
    detail.slider_height = sb_config.icon_size_h;
    
    // 初期描画位置の取得
    var pos = hsb.sliderPos;
    pos.rate = ( ( detail.slider_frame_width - detail.slider_width ) / ( content_w - scroll_frame_w ) );
    pos.base = ( sb_config.base_move != undefined ) ? sb_config.base_move : 6;
    pos.moveLimit = pos.base * 6;
    pos.min = 0;
    pos.max = ( hsb.detail.sb_width - hsb.detail.icon_width*2 - hsb.detail.slider_width );
    pos.last = 0; // リフレッシュ時には前回位置を取得する必要が有るぜ。
    
    return hsb;
};

IPG.EpgContainer.prototype.makeScrollBarHTML = function( scrollbar ){
    if( !scrollbar ) return;
    
    var sb_element = scrollbar.scrollbarElement;
    var sb_document = scrollbar.document;
    var controllerNodes = scrollbar.controllerNodes;
    var sbDetail = scrollbar.detail;
    var icon_w = sbDetail.icon_width;
    var icon_h = sbDetail.icon_height;
    var frame_w = sbDetail.slider_frame_width;
    var frame_h = sbDetail.slider_frame_height;
    var slider_w = sbDetail.slider_width;
    var slider_h = sbDetail.slider_height;
    
    Element.setStyle( scrollbar.scrollbarElement , "width: "+scrollbar.detail.sb_width+"px;" );
    Element.setStyle( scrollbar.scrollbarElement , "height: "+scrollbar.detail.sb_height+"px;" );
    
    if( scrollbar.direction.vertical_sb ){
        Element.setStyle( sb_element , "-moz-user-focus:normal; -moz-user-select:none; float:left;" );
        
        if( controllerNodes.moveup_node ){
            var elm = sb_document.createElement("div");
            sb_element.appendChild( elm );
            elm.id = controllerNodes.moveup_node;
            elm.unselectable = "on";
            Element.setStyle( elm , "width:"+icon_w+"px; height:"+icon_h+"px; background-color: white; background-image: url("+this.config.config_xml.img_path.scrollbar_up+"); -moz-user-select:none; overflow:hidden;  position: absolute; top: 0px;" );
            elm.appendChild( sb_document.createElement("div") );
        }
        if( controllerNodes.slider_node ){
            
            var sb_frame = sb_document.createElement("div");
            sb_element.appendChild( sb_frame );
            sb_frame.id = controllerNodes.sb_frame;
            sb_frame.unselectable = "on";
            Element.setStyle( sb_frame , "height:"+frame_h+"px; width:"+frame_w+"px; background-color: white; -moz-user-select: none; overflow: hidden;  position: absolute; top: "+icon_h+"px;" );
            sb_frame.innerHTML = 
                "<div id=\""+controllerNodes.sb_content+"\" style=\"height: "+(( frame_h - slider_h )*2+slider_h)+"px; -moz-user-select: none;  overflow: hidden; position: absolute;\" unselectable=\"on\">"+
                "<div id=\""+controllerNodes.sb_bg_top+"\" style=\"height: "+( frame_h - slider_h )+"px; width: "+frame_w+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.slider_node+"\" style=\"height:"+(slider_h-1)+"px; width:"+slider_w+"px; background-image: url("+this.config.config_xml.img_path.v_scrollbar_rep+");  border-bottom: 1px solid rgb( 187 , 154 , 59 ); -moz-user-select:none; overflow:hidden;  position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.sb_bg_bottom+"\" style=\"height: "+( frame_h - slider_h )+"px; width: "+frame_w+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div></div></div>";
            sb_frame.scrollTop = ( frame_h - slider_h );
        }
        if( controllerNodes.movedown_node ){
            var elm = sb_document.createElement("div");
            sb_element.appendChild( elm );
            elm.id = controllerNodes.movedown_node;
            elm.unselectable = "on";
            Element.setStyle( elm , "height:"+icon_h+"px; width:"+icon_w+"px; background-color: white; background-image: url("+this.config.config_xml.img_path.scrollbar_down+"); -moz-user-select:none; overflow:hidden;  position: absolute; bottom: 0px;" );
            elm.appendChild( sb_document.createElement("div") );
        }
        scrollbar.scrollbarElement.appendChild( scrollbar.document.createElement("div") );
    }else if( scrollbar.direction.horizontal_sb ){
        Element.setStyle( scrollbar.scrollbarElement , "-moz-user-focus:normal; -moz-user-select:none;" );
        
        if( controllerNodes.moveleft_node ){
            var elm = sb_document.createElement("div");
            sb_element.appendChild( elm );
            elm.id = controllerNodes.moveleft_node;
            elm.unselectable = "on";
            Element.setStyle( elm , "height:"+icon_h+"px; width:"+icon_w+"px; background-color: white; background-image: url("+this.config.config_xml.img_path.scrollbar_left+"); -moz-user-select:none; overflow:hidden; position:absolute; left: 0px; float: left;" );
            elm.appendChild( sb_document.createElement("div") );
        }
        if( controllerNodes.slider_node ){
            
            var sb_frame = sb_document.createElement("div");
            sb_element.appendChild( sb_frame );
            sb_frame.id = controllerNodes.sb_frame;
            sb_frame.unselectable = "on";
            Element.setStyle( sb_frame , "height:"+frame_h+"px; width:"+frame_w+"px; background-color: white; -moz-user-select: none; overflow: hidden;  position: absolute; left: "+icon_w+"px;" );
            sb_frame.innerHTML = 
                "<div id=\""+controllerNodes.sb_content+"\" style=\"width: "+(( frame_w - slider_w )*2+slider_w)+"px; -moz-user-select: none;  overflow: hidden; position: absolute;\" unselectable=\"on\">"+
                "<div id=\""+controllerNodes.sb_bg_left+"\" style=\"height: "+frame_h+"px; width: "+( frame_w - slider_w )+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.slider_node+"\" style=\"height:"+slider_h+"px; width:"+(slider_w-1)+"px; background-image: url("+this.config.config_xml.img_path.h_scrollbar_rep+");  border-right: 1px solid rgb( 187 , 154 , 59 ); -moz-user-select:none; overflow:hidden;  position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.sb_bg_right+"\" style=\"height: "+frame_h+"px; width: "+( frame_w - slider_w )+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div></div></div>";
            sb_frame.scrollLeft = ( frame_w - slider_w );
        }
        if( controllerNodes.moveright_node ){
            var elm = sb_document.createElement("div");
            sb_element.appendChild( elm );
            elm.id = controllerNodes.moveright_node;
            elm.unselectable = "on";
            Element.setStyle( elm , "width:"+icon_w+"px; height:"+icon_h+"px; background-color: white; background-image: url("+this.config.config_xml.img_path.scrollbar_right+");  -moz-user-select:none; overflow:hidden; position:absolute; right: 0px;float: left;" );
            elm.appendChild( sb_document.createElement("div") );
        }
        scrollbar.scrollbarElement.appendChild( scrollbar.document.createElement("div") );
    }
};

IPG.EpgContainer.prototype.remakeScrollBarFrameHTML = function( scrollbar ){
    if( !scrollbar ) return;
    
    var controllerNodes = scrollbar.controllerNodes;
    var sbDetail = scrollbar.detail;
    var icon_w = sbDetail.icon_width;
    var icon_h = sbDetail.icon_height;
    var frame_w = sbDetail.slider_frame_width;
    var frame_h = sbDetail.slider_frame_height;
    var slider_w = sbDetail.slider_width;
    var slider_h = sbDetail.slider_height;
    
    var frame_element = $( scrollbar.controllerNodes.sb_frame );
    if( frame_element ){
        // イベントのリムーブ
        // HTMLの削除
        frame_element.innerHTML = null;
        if( scrollbar.direction.vertical_sb ){
            frame_element.innerHTML = 
                "<div id=\""+controllerNodes.sb_content+"\" style=\"height: "+(( frame_h - slider_h )*2+slider_h)+"px; -moz-user-select: none;  overflow: hidden; position: absolute;\" unselectable=\"on\">"+
                "<div id=\""+controllerNodes.sb_bg_top+"\" style=\"height: "+( frame_h - slider_h )+"px; width: "+frame_w+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.slider_node+"\" style=\"height:"+(slider_h-1)+"px; width:"+slider_w+"px; background-image: url("+this.config.config_xml.img_path.v_scrollbar_rep+");  border-bottom: 1px solid rgb( 187 , 154 , 59 ); -moz-user-select:none; overflow:hidden;  position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.sb_bg_bottom+"\" style=\"height: "+( frame_h - slider_h )+"px; width: "+frame_w+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative;\" unselectable=\"on\"><div></div></div>"+
                "<div></div></div>";
            frame_element.scrollTop = ( frame_h - slider_h );
        }else if( scrollbar.direction.horizontal_sb ){
            frame_element.innerHTML = 
                "<div id=\""+controllerNodes.sb_content+"\" style=\"width: "+(( frame_w - slider_w )*2+slider_w)+"px; -moz-user-select: none;  overflow: hidden; position: absolute;\" unselectable=\"on\">"+
                "<div id=\""+controllerNodes.sb_bg_left+"\" style=\"height: "+frame_h+"px; width: "+( frame_w - slider_w )+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.slider_node+"\" style=\"height:"+slider_h+"px; width:"+(slider_w-1)+"px; background-image: url("+this.config.config_xml.img_path.h_scrollbar_rep+");  border-right: 1px solid rgb( 187 , 154 , 59 ); -moz-user-select:none; overflow:hidden;  position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div id=\""+controllerNodes.sb_bg_right+"\" style=\"height: "+frame_h+"px; width: "+( frame_w - slider_w )+"px; background-color: rgb( 238, 233, 239 ); -moz-user-select: none; position: relative; float: left;\" unselectable=\"on\"><div></div></div>"+
                "<div></div></div>";
            frame_element.scrollLeft = ( frame_w - slider_w );
        }
    }
};

IPG.EpgContainer.prototype.setEpgInfo = function(){
    var cookie = this.config.cookie;
    if( !cookie ) return;
    
    var titleNode = $( "epg_title" );
    var areaName = this.areaListManager.getAreaName( cookie.area );
    var serverDateStr = ( this.config.current_date ) ? this.config.current_date.replace(/-/g , "/") : "";
    if( titleNode && areaName && serverDateStr ){
        var html = "";
        html += "<span style=\"position: absolute; top: 5px; left: 12px; color: #723217; font-size: 12pt; font-weight: bold;\">";
        html += (( cookie.bctype == "OTD" ) ? "地上デジタル　" : "BSデジタル　" );
        html += (( areaName && cookie.bctype == "OTD" ) ? "（"+areaName+"）　" : "" );
        html += (( serverDateStr ) ? serverDateStr+"　" : "" );
        html += "の番組表"
        html += "</span>";
        titleNode.innerHTML = html;
    }
    
    var footerNode = $( "epg_footer" );
    
    // 最終更新時刻の表示 add by megane @ 2008/09/24
    // APIから日時を取得し、加工して表示。
    
    //var today_str = $( "epg_date_controll_0" ).getAttribute( "value" );
    var today_str = this.config.last_modified_date.str;
    
    if( footerNode && today_str ){
        var html = "";
        html += "<span style=\"position: absolute; top: 3px; left: 10px; color: #999999; font-size: 8pt;\">";
        html += "ご利用の番組表は、テレビ局が行う番組編成とは異なる場合があります。"
        html += "</span>";
        html += "<span style=\"position: absolute; top: 3px; left: 800px; color: #999999; font-size: 8pt;\">";
        //html += "最終更新日時："+today_str.replace( /\-/g , "/" )+" 06:00:00";
        html += "最終更新日時："+today_str;
        html += "</span>";
        footerNode.innerHTML = html;
    }
};

/****
 * サービスリストのコールから、
 * 画面の再描画、イベントの張りなおしとかをする関数のテスト版
 * 5分スパンでインターバル。でも、インターバルからのコール時に処理する内容と、
 * ユーザの操作時に処理する内容が違うかも。
 ****/
IPG.EpgContainer.prototype.refresh = function(){
    
    // インターバルタイマのクリア
    if( this.timerid ){
        clearInterval( this.timerid );
        this.timerid = setInterval( this.refreshMethod , this.config.config_xml.epg_info.interval_minute*60*1000 );
    }
    
    // バルーン表示されてたら消す。
    var balloon = $( "pg_balloon" );
    if( balloon ){
        balloon.removeAttribute( "target_id" );
        balloon.removeAttribute( "target_org_color" );
        var balloon_style = balloon.style;
        if( balloon_style.display == "block" ) balloon_style.display = "none";
    }
    // ポップアップ表示されてたら消す。
    var pg_detail = $( "pg_detail" );
    if( pg_detail ){
        pg_detail.removeAttribute( "target_id" );
        var detail_style = pg_detail.style;
        if( detail_style.display == "block" ) detail_style.display = "none";
    }
    // カラーセレクタ表示されてたら消す
    var selector = $("epg_genrecolor_selector");
    var palette = $("epg_genrecolor_palette");
    if( selector ){
        selector.style.display = "none";
        selector.style.visibility = "hidden";
    }
    if( palette ) palette.style.display = "none";
    
    var refreshFunc;
    if( this.isFullEPG ) refreshFunc = this.refreshFullEpg;
    else refreshFunc = this.refreshTopEpg;
    
    $( "epg_cloak" ).style.display = "block";
    $( "cloak_img" ).src = this.config.loading_image;
    
    setTimeout( refreshFunc.bind( this ) , 1 );
};

IPG.EpgContainer.prototype.refreshFullEpg = function(){
    
    // クッキーに書き込む。
    var cookie_manager = new IPG.UserPropertyManager();
    cookie_manager.setUserProperty( this.config.config_xml.api_url.setUserProperty , this.config.cookie );
    
    // サーバタイムの取り直し。
    this.config.server_date = new IPG.ServerTimeManager().createData( this.config.config_xml.api_url.getServerTime );
    
    // データ更新日付の取り直し add by megane @ 2008/09/24
    this.config.last_modified_date = new IPG.LastModifiedTimeManager().createData( this.config.config_xml.api_url.getLastModified );
    
IPG.Utility.debugOut( 'refresh fullsize epg' );
IPG.Utility.debugOut( 'server time  !!! svd['+IPG.Utility.getSIDateFullStrFromMillisec(this.config.server_date.time)+'] crd['+this.config.current_date+']' );
IPG.Utility.debugOut( 'cookie data  !!! area['+this.config.cookie.area+'] sType['+this.config.cookie.sorttype+'] bcType['+this.config.cookie.bctype+']' );
if( this.config.cookie.genrecolor ){
    var colors = "";
    for( var i = 0 , len = this.config.cookie.genrecolor.length; i < len; i++ ){
        colors += i+"-["+this.config.cookie.genrecolor[i]+"] ";
    }
    IPG.Utility.debugOut( 'genre color  !!! '+colors );
}else{
    IPG.Utility.debugOut( 'genre color  !!! undefined' );
}
    
    // 時間選択コントローラを新しいサーバタイムと比較
    this.epgController.bindTimeControllerEvent();
    
    // カレンダーのイベント再設定
    this.epgController.createDateController();
    
    // 地上波/BSセレクタのイベント再設定
    this.epgController.createCategoryController();
    
    // 地域プルダウンセレクタのイベント再設定
    this.epgController.createAreaSelector( this.areaListManager );
    
    // サービスリストの取得
    this.serviceListmanager.getServiceList();
    
    this.setEpgInfo();
};

IPG.EpgContainer.prototype.refreshTopEpg = function(){
    
    // クッキーに書き込む。
    var cookie_manager = new IPG.UserPropertyManager();
    cookie_manager.setUserProperty( this.config.config_xml.api_url.setUserProperty , this.config.cookie );
    
    // サーバタイムの取り直し。
    this.config.server_date = new IPG.ServerTimeManager().createData( this.config.config_xml.api_url.getServerTime );
    
    // データ更新日付の取り直し add by megane @ 2008/09/24
    this.config.last_modified_date = new IPG.LastModifiedTimeManager().createData( this.config.config_xml.api_url.getLastModified );
    
IPG.Utility.debugOut( 'refresh top epg' );
IPG.Utility.debugOut( 'server time  !!! svd['+IPG.Utility.getSIDateFullStrFromMillisec(this.config.server_date.time)+'] crd['+this.config.current_date+']' );
IPG.Utility.debugOut( 'cookie data  !!! area['+this.config.cookie.area+'] sType['+this.config.cookie.sorttype+'] bcType['+this.config.cookie.bctype+']' );
if( this.config.cookie.genrecolor ){
    var colors = "";
    for( var i = 0 , len = this.config.cookie.genrecolor.length; i < len; i++ ){
        colors += i+"-["+this.config.cookie.genrecolor[i]+"] ";
    }
    IPG.Utility.debugOut( 'genre color  !!! '+colors );
}else{
    IPG.Utility.debugOut( 'genre color  !!! undefined' );
}
    
    // カレンダーのイベント再設定
    this.epgController.createTopDateController();
    
    // 地デジ/BS
    this.epgController.createCategoryController();
    
    // 地域プルダウンセレクタのイベント再設定
    this.epgController.createTopAreaSelector( this.areaListManager );
    
    // サービスリストの取得
    this.serviceListmanager.getServiceList();
    
    this.setEpgInfo();
};