//preload images
jQuery.preloadImages = function(){
    for (var i = 0; i < arguments.length; i++) {
        switch (typeof arguments[i]) {
            case 'string':
                jQuery("<img>").attr("src", arguments[i]);
                break;
            case 'object':
                for (var j = 0; j < arguments[i].length; j++) {
                    jQuery("<img>").attr("src", arguments[i][j]);
                }
                break;
            default:
                break;
        }
    }
}

//## Page Infomation Class
function sfsPageInfo(){

    // key: controler name (site page id)
    // value: menulist index[1-], top page:0
    var _SFS_NAVI_IDX = {
        top: 0,
        company: 1,
        shop: 2
    };

    //menu index (top:0)   
    this.idxNavigation = function(){
        var url = $.trim(document.URL);
        url = url.replace(".html", "");
        url = url.replace(".php", "");
        var path_ary = url.split("/");
        var ctlname = path_ary[path_ary.length - 1];
        if (_SFS_NAVI_IDX[ctlname]) 
            return _SFS_NAVI_IDX[ctlname];
        return _SFS_NAVI_IDX["top"];
    }();
}

//## Top to bottom of the drawing to color 2
function sfsDrow2BgBody(border2Color, topColor, btmColor){

    //create background draw elements
    $("body").prepend('<div id="__bg_top"></div>');
    $('div[id^="__bg_"]').css({
        position: "absolute",
        top: "0px",
        left: "0px",
        width: "100%"
    });
    
    //get background draw size
    switch (typeof border2Color) {
        case 'number':
        case 'string':
            var bg_border = parseInt(border2Color);
            break;
        case 'object':
            var bg_border = border2Color.position().top + border2Color.parent().position().top;
            break;
        default:
            var bg_border = 0;
            break;
    }
    
    //draw background
    $('#__bg_top').css({
        height: bg_border + "px",
        backgroundColor: topColor
    });
    if (btmColor) {
        $('body').css({
            backgroundColor: btmColor
        });
    }
}

//## display head image
//   ★リソース類がon coding
function sfsDispHead(headElm, mskColor, blnAnime){

    //set header elements propaties
    $('<p id="__tlogo"></p>').prependTo('#head_image');
    $('<p id="__bgmsk"></p>').prependTo('#head_image');
    for (var i = 4; i > 0; i--) {
        $('<p id=\"' + '__image_grid' + i + '\"></p>').prependTo('#head_image');
    }
    
    var tlogo_height = parseInt(headElm.css("height"));
    var tlogo_width = parseInt(headElm.css("width")) * 0.445;
    var image_height = parseInt(headElm.css("height")) / 2;
    var image_width = parseInt(headElm.css("width")) * 0.23;
    var tlgdefpos_top = (parseInt(headElm.css("height")) - tlogo_height) / 2;
    var tlgdefpos_left = (parseInt(headElm.css("width")) - tlogo_width) / 2;
    
    headElm.find("p[id^='__tlogo']").css({
        width: tlogo_width + "px",
        height: tlogo_height + "px",
        position: "absolute",
        top: tlgdefpos_top + "px",
        left: tlgdefpos_left + "px"
    });
    headElm.find("p[id^='__bgmsk']").css({
        width: headElm.css("width"),
        height: headElm.css("height"),
        backgroundColor: mskColor,
        position: "absolute",
        top: "0px",
        left: "0px"
    });
    headElm.find("p").css({
        backgroundRepeat: "no-repeat"
    });
    $('#__tlogo').css({
        backgroundPosition: "50% 50%",
        backgroundImage: "url(./images/la/la12_90.gif)"
    });

    $('#__image_grid1').css({
        backgroundImage: "url(./images/sprite/headsprites_q60.jpg)",
        backgroundPosition: "98% 97%"
    });
    $('#__image_grid2').css({
        backgroundImage: "url(./images/sprite/headsprites_q60.jpg)",
        backgroundPosition: "71% 9%"
    });
    $('#__image_grid3').css({
        backgroundImage: "url(./images/sprite/headsprites_q60.jpg)",
        backgroundPosition: "71.5% 95%"
    });
    $('#__image_grid4').css({
        backgroundImage: "url(./images/sprite/headsprites_q60.jpg)",
        backgroundPosition: "97% 0%"
    });

    //fixed position of the images
    var imgrow1_toppos = 0;
    var imgrow2_toppos = headElm.css("height") - image_height;
    var imgcol1_leftpos = 0;
    var imgcol2_leftmvpt = parseInt(headElm.css("width")) - image_width;
    
    if (blnAnime) { //when animation
        //init animation
        var imgdefpos_top = (parseInt(headElm.css("height")) / 2) - (image_height / 2);
        var imgdefpos_left = (parseInt(headElm.css("width")) / 2) - (image_width / 2);
        headElm.find("p[id^='__image_grid']").css({
            width: "0px",
            height: "0px",
            position: "absolute",
            top: imgdefpos_top + "px",
            left: imgdefpos_left + "px"
        });
        headElm.find("p[id^='__bgmsk']").css({
            opacity: 0
        });
        $('#__tlogo').css({
            opacity: 0
        });
        //start animation
        $('#__tlogo').animate({
            opacity: 1.0
        }, 4000);
        $('#__bgmsk').animate({
            opacity: 0.4
        }, 3000);
        $('#__image_grid1').animate({
            top: "0px",
            left: "0px",
            height: image_height,
            width: image_width
        }, 500);
        $('#__image_grid2').animate({
            top: image_height + "px",
            left: "0px",
            height: image_height,
            width: image_width
        }, 800);
        $('#__image_grid3').animate({
            top: "0px",
            left: imgcol2_leftmvpt + "px",
            height: image_height,
            width: image_width
        }, 1200);
        $('#__image_grid4').animate({
            top: image_height + "px",
            left: imgcol2_leftmvpt + "px",
            height: image_height,
            width: image_width
        }, 1500);
    }
    else { //when staisis
        //set position
        $('#__tlogo').css({
            opacity: 1.0
        });
        $('#__bgmsk').css({
            opacity: 0.4
        });
        $('#__image_grid1').css({
            position: "absolute",
            top: "0px",
            left: "0px",
            height: image_height,
            width: image_width
        });
        $('#__image_grid2').css({
            position: "absolute",
            top: image_height + "px",
            left: "0px",
            height: image_height,
            width: image_width
        
        });
        $('#__image_grid3').css({
            position: "absolute",
            top: "0px",
            left: (parseInt(headElm.css("width")) - image_width) + "px",
            height: image_height,
            width: image_width
        });
        $('#__image_grid4').css({
            position: "absolute",
            top: image_height + "px",
            left: (parseInt(headElm.css("width")) - image_width) + "px",
            height: image_height,
            width: image_width
        });
    }
}

//## display content
function sfsDispContent(contentElm){

    contentElm.find('h3').prepend('<img src=\"' + icon_h3 + '\" width="22" height="23"/>').append('<img src=\"' + icon_h3_r + '\" width="22" height="23"/>');
    contentElm.find('h4').prepend('<img src=\"' + icon_h4 + '\" width="15" height="15"/>').append('<img src=\"' + icon_h4_r + '\" width="15" height="15"/>');
    contentElm.find('h3 img').css({
        marginLeft: "25px",
        marginRight: "25px",
        verticalAlign: "-4px"
    })
    contentElm.find('h4 img').css({
        marginLeft: "10px",
        marginRight: "10px",
        verticalAlign: "-3px"
    })
}

/*-----------------------------------------------------*/

//for js参照resource read
var img_entrance_acv = "./icons/entrance5_acv.gif";
var img_entrance = "./icons/entrance5.gif";
var icon_h3 = './icons/sfs_h3.png';
var icon_h3_r = './icons/sfs_h3_r.png';
var icon_h4 = './icons/sfs_h4.png';
var icon_h4_r = './icons/sfs_h4_r.png';
$.preloadImages(img_entrance_acv, img_entrance, icon_h3, icon_h3_r, icon_h4, icon_h4_r);

//for メモリ浪費時などでanimate時、IE砂時計ちらつき
//   ★うまく対処されるか未確認
try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}

//on document ready
$(document).ready(function(){

    var hd_root = $('#head_image');
    
    //## draw background two colors
    var bc_top = "#FFFFCC";
    var bc_btm = "#BBD347";
    sfsDrow2BgBody($('div[id$="content_body"]'), bc_top, bc_btm);
    
    var page_info = new sfsPageInfo();
    //sfsDispHead(hd_root, bc_top, page_info.blnExtRef);
    
    if (page_info.idxNavigation) { // when not toppage
        
		//## set head images
		if(page_info.idxNavigation != 2) { // when not "shop"
			sfsDispHead(hd_root, bc_top, false);
		}
        
        //## set content style
        sfsDispContent($('#content_body'));
        
        //## select menu
        $('#menu li').addClass("nonselected");
        $('#menu li:eq(' + (page_info.idxNavigation) + ')').removeClass("nonselected");
        $('#menu li:eq(' + (page_info.idxNavigation) + ')').addClass("selected");
        
        //## set menu color
        //   IEでも以下設定を有効にするため、CSSではなくとりあえずここで行う
        //   ・<a>以外のhover
        //   ・opacity
        var select_style = {
            backgroundColor: "#DDE98A",
            opacity: "1"
        };
        var nonselect_style = {
            backgroundColor: "#BBD347",
            opacity: "0.7"
        };
        
        $('#menu li').filter(".selected").css(select_style);
        $('#menu li').filter(".nonselected").css(nonselect_style);
        
        var over_func = function(){
            $(this).css(select_style);
        };
        
        var out_func = function(){
            $(this).filter(".selected").css(select_style);
            $(this).filter(".nonselected").css(nonselect_style);
        };
        
        $('#menu li').hover(over_func, out_func);
        
    }
    else { // when toppage
        //## set head images
        sfsDispHead(hd_root, bc_top, true);
        
        //## set entrance image      
        $('#entrance a').css({
            backgroundRepeat: "no-repeat",
            backgroundPosition: "50% 50%",
            backgroundImage: "url(" + img_entrance + ")",
            width: "150px",
            textIndent: "-9999px"
        }).hover(function(){
            $(this).css({
                backgroundImage: "url(" + img_entrance_acv + ")"
            });
        }, function(){
            $(this).css({
                backgroundImage: "url(" + img_entrance + ")"
            });
        });
    }
});