//==================================
// スライド
//==================================
jQuery.fn.slideGalleryBox = function(_option) {
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
    return this.each(function () {
        var $box = jQuery(this);
        var $option = _option;
        var $window_width = 0;
        var $prev_btn = jQuery('.menu_slide_left a',this);
        var $next_btn = jQuery('.menu_slide_right a',this);
        var $obj_box = jQuery('.main_area',this);
        var $obj_item = jQuery('li',$obj_box);
        var $width = $obj_item.outerWidth();
        var $height = $obj_item.outerHeight();
        var $visible = $option.visible;
        var $menu_box = jQuery('.menu_slide',this);
        var $menu_item = jQuery('li',$menu_box);
        var $menu_width = $menu_item.outerWidth();
        var $menu_visible = $option.menu_visible;
        var $max_num = $menu_item.length;
        //var $lists = jQuery('#gallery_icon_box');
        
        var pages = Math.ceil($menu_item.length / $menu_visible);
        var currentItem = -1;
        var currentPage = 0;
        var selectMenu = 0;
        var timer = null;
        var time = 5000;
        
        // 初期化
        init();
        // 画面サイズ変更設定
        resizeWindow();
        // 画面サイズ変更時
        jQuery(window).resize(function(){resizeWindow();});
        // メイン画像切り替え
        setCurrentItem(currentItem);
        
        function init(){
            // 表示するキーを設定
            $obj_item.each(function(){
                var $this = jQuery(this);
                $this.attr("rel",$this.index());
                centerImage($this.find("a"));
            });
            $menu_item.each(function(){
                var $this = jQuery(this);
                $this.attr("rel",$this.index());
                centerImage($this.find("a"));
            });
            // メインエリア
            $obj_item.filter(':first').before($obj_item.slice(- $visible).clone().attr("rel","").addClass('cloned'));
            $obj_item.filter(':last').after($obj_item.slice(0, $visible).clone().attr("rel","").addClass('cloned'));
            $obj_item = jQuery('li',$obj_box);
            
            // メニューのダミー作成
            /*if (($menu_item.length % $menu_visible) != 0) {
                $menu_item.filter(':last').after(repeat('<li class="item" style="background:none;" />', $menu_visible - ($menu_item.length % $menu_visible)));
                $menu_item = jQuery('li',$menu_box);
            }*/
            var $menu_item_now = jQuery('li',$menu_box);
            var num = 0;
            // ダミー要素(前)
            num = $menu_visible;
            while($menu_item.length < num){
                $menu_item_now.filter(':first').before($menu_item.clone().addClass('cloned'));
                $menu_item_now = jQuery('li',$menu_box);
                num -= $menu_item.length;
            }
            $menu_item_now.filter(':first').before($menu_item.slice(- num).clone().addClass('cloned'));
            $menu_item_now = jQuery('li',$menu_box);
            
            // ダミー要素(後)
            num = $menu_visible + ($menu_item.length < $menu_visible ? $menu_visible - $menu_item.length : 0);
            while($menu_item.length < num){
                $menu_item_now.filter(':last').after($menu_item.clone().addClass('cloned'));
                $menu_item_now = jQuery('li',$menu_box);
                num -= $menu_item.length;
            }
            $menu_item_now.filter(':last').after($menu_item.slice(0, num).clone().addClass('cloned'));
            $menu_item_now = jQuery('li',$menu_box);
            $menu_item = jQuery('li',$menu_box);
            
            setCurrentPage($menu_visible);
            selectCurrentMenu(0);
            
            /*// 初期設定
            if($obj_item.length > $menu_visible){
            }else{
                $prev_btn.hide();
                $next_btn.hide();
            }*/
            // メニューの移動
            $prev_btn.click(function(){
                movePrevPage();
            });
            $next_btn.click(function(){
                moveNextPage();
            });
            // メニューマウスオーバー
            $menu_item.hover(function(){
                var $this = jQuery(this);
                // メニューを選択状態に変更
                selectCurrentMenu($this.attr("rel"));
            },function(){});
            
            $obj_item.hover(function(){ jQuery(this).find(".grayOverlay").fadeOut("normal"); },function(){ jQuery(this).find(".grayOverlay").fadeIn("normal"); });
        }
        // 前のページ
        function movePrevPage(){
            if(!$menu_box.data("move")){
                var w = $menu_width;
                selectMenu --;
                if(selectMenu < 0){
                    selectMenu = $menu_item.not(".cloned").length - 1;
                }
                // 選択メニューを設定
                selectCurrentMenu(selectMenu);
                // メニューをスライド
                currentPage --;
                if(currentPage < $menu_visible){
                    currentPage = $menu_visible + $menu_item.not(".cloned").length - 1;
                }
                
                $menu_box.animate(
                    {left: "+="+w + "px"},
                    'normal',
                    function(){
                        setCurrentPage(currentPage);
                        // 移動完了
                        $menu_box.data('move',false);
                    }
                );
                // 移動中
                $menu_box.data('move',true);
            }
        }
        // 次のページ
        function moveNextPage(){
            if(!$menu_box.data("move")){
                var w = $menu_width;
                selectMenu ++;
                if(selectMenu >= $menu_item.not(".cloned").length){
                    selectMenu = 0;
                }
                // 選択メニューを設定
                selectCurrentMenu(selectMenu);
                // メニューをスライド
                currentPage ++;
                if(currentPage >= ($menu_item.not(".cloned").length + $menu_visible)){
                    currentPage = $menu_visible;
                }
                
                $menu_box.animate(
                    {left: "-="+w + "px"},
                    'normal',
                    function(){
                        // メニューをスライド
                        setCurrentPage(currentPage);
                        // 移動完了
                        $menu_box.data('move',false);
                    }
                );
                // 移動中
                $menu_box.data('move',true);
            }
        }
        // ページ移動
        function setCurrentPage(id){
            currentPage = id;
            $menu_box.css({left:-($menu_width * currentPage)+'px'});
            if(timer){
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(moveNextPage,time);
        }
        // メニュー選択
        function selectCurrentMenu(id){
            selectMenu = id;
            var $select = $menu_item.filter("[rel="+id+"]");
            $menu_item.find(".active").remove();
            jQuery("a",$select).append('<span class="active"></span>');
            // メイン画面を変更
            setCurrentItem(id);
            
            if(timer){
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(moveNextPage,time);
        }
        // メイン画像切り替え
        function setCurrentItem(id){
            if(currentItem != id){
                var $select = $obj_item.filter("[rel="+id+"]");
                
                currentItem = id;
                setCurrentItemCenter();
                
                $obj_item.find(".active").remove();
                jQuery("a",$select).append('<span class="active"></span>');
                
                // 非選択画像
                $obj_item.find(".grayOverlay").remove();
                //$obj_item.not(":eq("+id+")").find("a").append('<span class="grayOverlay" />');
                $obj_item.not("[rel="+id+"]").find("a").append('<span class="grayOverlay" />');
                // fade処理
                $obj_box.find(".fadeOverlay").remove();
                $obj_box.append('<span class="fadeOverlay" />');
                $fadeOrverlay = $obj_box.find(".fadeOverlay");
                $fadeOrverlay.css({opacity: "0.6" }).height($height).width($width * $obj_item.length);
                $fadeOrverlay.show().fadeOut("slow");
            }
            
        }
        // 画面中央処理
        function setCurrentItemCenter(){
            var id = $obj_item.filter("[rel="+currentItem+"]").index();
            var x = 0;
            x = (-1 * Math.floor(($window_width - $width) / 2));
            x += $width * id;
            $obj_box.css({left:-x+"px"});
        }
        // 画面リサイズ
        function resizeWindow(){
            $window_width = jQuery(window).width();
            $box.width($window_width);
            setCurrentItemCenter();
        }
    });
};
function centerImage(image){
    var $this = image;
    var $image = jQuery('img',image);
    var _src = $image.attr('src');
    var _css = null;
    if($image.length > 0){
        // 背景あり
        if(($this.css('background-image') != "none")){
            $image.wrap('<div class="image_center_box"></div>');
            var $image_box = jQuery('.image_center_box',$this);
            var _w = parseInt(($this.width() - $image.width()) / 2);
            var _h = parseInt(($this.height() - $image.height()) / 2);
            _css = {
                'padding':'0px',
                'margin-left':_w+'px',
                'margin-top':_h+'px'
            };
            $image_box.css(_css);
        // 背景なし
        }else{
            _css = {
                'background-image':'url('+_src+')',
                'background-repeat':'no-repeat',
                'background-position':'center'
            };
            $this.css(_css);
            $image.remove();
        }
    }
};

jQuery(document).ready(function(){
	jQuery('#reco_tab li a').click(function(event){
		if(jQuery(this).hasClass('out') == false){
			jQuery('#reco_tab li a').removeClass('out');
			jQuery(this).addClass('out');
			jQuery('#reco_list .list_box_wa').hide();
	//		jQuery(jQuery(this).attr('href')).show();
			jQuery(jQuery(this).attr('href')).fadeIn(500);
		}
		return false;
	});
    var option = {
        visible : 2,
        menu_visible : 4,
        item_expr : "li",
        speed : 4500
    };
	jQuery('#main_slide').slideGalleryBox(option);
});