/*
------------------
 
 ロイヤルカナン
 slider.js
 
------------------
*/

(function( $ ) {
    $.fn.slider = function(options) {
        //object
        var $this = this;
        var $main = $("#sliderMain")
        var $main_navi = $("#sliderNavi");
        var $thumb = $("#sliderThumbnail");
        var $thumb_ul = $thumb.children();
        var $thumb_li = $thumb_ul.children();
        var $thumb_navi = $("#sliderThumbnailNavi");
        //main
        var max_display_num = $main.children().length;
        var next_display = 0;
        var now_display = 0;
        var prev_display = 0;
        //thumb
        var thumb_window_width = $thumb.width();
        var thumb_window_height = $thumb.height();
        var thumb_li_width = $thumb_li.width();
        var thumb_li_height = $thumb_li.height() + parseInt($thumb_li.css("margin-bottom"));
        var thumb_all_width = thumb_li_width*max_display_num;
        var thumb_all_height = thumb_li_height*max_display_num;
        var thumb_display_num = 3;
        var now_pos = 0;
        var thumb_class_head = ".thum";
        //timer
        var t_autoPlay = false;//自動再生用タイマー
        var t_checkAuto = false;//自動再生スタート監視用タイマー

        //外部から設定変更可能
        var settings = {
            'startTime'      :   6000,//自動再生開始時間
            'wait'          :   3000,
            'fade'          :   600,
            'move'          :   "x"//x方向にスライドする場合：x, vertical,y方向にスライドする場合:y
        };

        //フェード
        var _fade = function () {
            $main.children().eq(next_display).fadeIn(settings.fade);
            $main.children().eq(prev_display).fadeOut(settings.fade);
        }

        //表示きりかえ
        var _draw = function () {
            clearTimeout(t_autoPlay);
            clearTimeout(t_checkAuto);
            _fade();
            $(thumb_class_head+(prev_display+1)).children().removeClass("on");
            $(thumb_class_head+(now_display+1)).children().addClass("on");
        }

        //各display値を更新
        var _update = function (option) {
            if (option == "next") {
                next_display = now_display+1;
                if (next_display >= max_display_num) next_display = 0;
            } else {
                next_display = now_display-1;
                if (next_display < 0) next_display = max_display_num-1;
            }
            prev_display = now_display;
            now_display = next_display;
        }

        //次のメイン画像を表示
        var _next = function () {
            _update("next");
            _draw();
            _thumb_next();
            t_checkAuto = setTimeout(_checkAuto, settings.startTime);
        }

        //前のメイン画像を表示
        var _prev = function () {
            _update("prev");
            _draw();
            _thumb_prev();
            t_checkAuto = setTimeout(_checkAuto, settings.startTime);
        }

        //サムネイルを次にスライド
        var _thumb_next = function () {
            if (settings.move == "x") {
                if (now_pos == -thumb_all_width) {
                    now_pos = 0;
                    $thumb_ul.css("left",now_pos+"px");
                }
                next_pos = now_pos - thumb_li_width;
                $thumb_ul.animate({left: next_pos+"px"},{duration: "normal", easing: "linear",
                    complete: function(){
                        now_pos = next_pos;
                    }
                });
                
            } else {
                if (now_pos == -thumb_all_height) {
                    now_pos = 0;
                    $thumb_ul.css("top",now_pos+"px");
                }
                next_pos = now_pos - thumb_li_height;
                $thumb_ul.animate({top: next_pos+"px"},{duration: "normal", easing: "linear",
                    complete: function(){
                        now_pos = next_pos;
                    }
                });
            }
        }

        //サムネイルを前にスライド
        var _thumb_prev = function () {
            if (settings.move == "x") {
                if (now_pos == 0) {
                    now_pos = -thumb_all_width;
                    $thumb_ul.css("left",now_pos+"px");
                }
                next_pos = now_pos + thumb_li_width;
                $thumb_ul.animate({left: next_pos+"px"},{duration: "normal", easing: "linear",
                    complete: function(){
                        now_pos = next_pos;
                    }
                });
                
            } else {
                if (now_pos == 0) {
                    now_pos = -thumb_all_height;
                    $thumb_ul.css("top",now_pos+"px");
                }
                next_pos = now_pos + thumb_li_height;
                $thumb_ul.animate({top: next_pos+"px"},{duration: "normal", easing: "linear",
                    complete: function(){
                        now_pos = next_pos;
                    }
                });
            }
        }

        //サムネイルをクリックしたらメイン画像を切り換え
        var _thumb = function (class_name) {
            var substr_num = thumb_class_head.length-1;
            var index = parseInt(class_name.substr(substr_num)) -1;
            
            if (index != now_display) {
                next_display = index
                prev_display = now_display;
                now_display = next_display;
                
                _draw();
                
                prev_display = next_display-1;
                if (prev_display < 0) prev_display = 5;
            }
            t_checkAuto = setTimeout(_checkAuto, settings.startTime);
        }

        //自動再生
        var _autoPlay = function() {
            _update("next");
            _draw();
            _thumb_next();
            t_autoPlay = setTimeout(_autoPlay, settings.wait);
        };

        //一定時間操作がなかった場合_autoPlayを実行
        var _checkAuto = function() {
            _autoPlay();
            t_checkAuto = setTimeout(_checkAuto, settings.startTime);
        };

        //初期設定
        var _init = function() {
            //set options
            if (options) {
                $.extend( settings, options );
            }
            //css
            $main.children().eq(next_display).css("display","block");
            if (settings.move == "x") {
                $thumb_ul.css("width",(max_display_num*thumb_li_width)*2+"px");
                now_pos = parseInt($thumb_ul.css("left"));
            } else {
                $thumb_ul.css("height",(max_display_num*thumb_li_height)*2+"px");
                now_pos = parseInt($thumb_ul.css("top"));
            }
            //bind
            $main_navi.children().eq(0).bind('click', function() {_prev();return false;});
            $main_navi.children().eq(1).bind('click', function() {_next();return false;});
            $thumb_navi.children().eq(0).bind('click', function() {_prev();return false;});
            $thumb_navi.children().eq(1).bind('click', function() {_next();return false;});
            $thumb_li.bind('click', function() {_thumb($(this).attr("class"));return false;});
            
            $thumb_li.clone(true).appendTo($thumb_ul);
            $(thumb_class_head+"1").children().addClass("on");
            //timer
            t_checkAuto = setTimeout(_checkAuto, settings.startTime);
        };
        _init();
    };
})( jQuery );