// ==UserScript==
// @name                图片浏览插件
// @description         针对全部带左右button的图片浏览的插件
// @created date        2009/8/18   16:16
// @created author      Tiger(tigershi0507@gmail.com)
// @version             4.0.1
// @version owner       Copyright (C) 2009-2010 keerr.com All rights reserved.
// ==/UserScript==

/*************************************************
verified time 	:	2009/8/18   16:20
verified author	:	Tiger
verified purpose:	添加函数参数，完成小图slide，大图显示的功能。其中的难点是要对点击左右button的判断值的修正
**************************************************/
/*************************************************
verified time 	:	2009/8/18   17:08
verified author	:	Tiger
verified purpose:	添加了鼠标mouseover在小图，大图切换的功能
**************************************************/
/*************************************************
verified time 	:	2009/10/29   13:10
verified author	:	Tiger
verified purpose:	修改了一些逻辑不做，以便适合楼盘户型的图片滚动
**************************************************/
/*************************************************
verified time 	:	2009/11/6   17:13
verified author	:	Tiger
verified purpose:	修改了click事件切换户型的一个bug（147行）
**************************************************/
var _choosed_Id;

(function($) {
    $.fn.picSlider = function(options) {
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            controlsShow: true,
            controlsBefore: '',
            controlsAfter: '',
            controlsFade: true,
            firstId: 'firstBtn',
            firstText: 'First',
            firstShow: false,
            lastId: 'lastBtn',
            lastText: 'Last',
            lastShow: false,
            vertical: false,
            speed: 888,
            auto: false,
            pause: 1000,
            continuous: false,
            numberOfOnce: 1,
            numberOfShow: 1,
            hoverShow: false,
            autoFocus: false
        };

        var options = $.extend({}, defaults, options);

        this.each(function() {
            var obj = $(this),
                FlagLoading = false,
                s = Math.ceil($("li", obj).length / options.numberOfOnce),
                $_itemObj = $("li", obj),
                item_left = parseInt($_itemObj.css("margin-left").replace("px", "")),
                item_right = parseInt($_itemObj.css("margin-right").replace("px", "")),
                item_top = parseInt($_itemObj.css("margin-top").replace("px", "")),
                item_bottom = parseInt($_itemObj.css("margin-bottom").replace("px", ""));

            var w = $("li", obj).outerWidth() + item_left + item_right,
                h = $("li", obj).outerHeight() + item_top + item_bottom;
            obj.width(w * options.numberOfShow);
            obj.height(h);
            obj.css("overflow", "hidden");

            var ts = s - 1,
                t = 0,
                IndexOfHoverLI = 0;
            $("ul", obj).css('width', $("li", obj).length * w);
            if (!options.vertical) { $("li", obj).css('float', 'left'); }
            if (options.controlsShow) {
                var html = options.controlsBefore;
                if (options.firstShow) { html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>'; }
                html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
                html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
                if (options.lastShow) { html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>'; }
                html += options.controlsAfter;
                $(obj).after(html);
            }

            $("#" + options.nextId).click(function() {
                if (!FlagLoading) {
                    FlagLoading = true;
                    animate("next", true);
                }
            });
            $("#" + options.prevId).click(function() {
                if (!FlagLoading) {
                    FlagLoading = true;
                    animate("prev", true);
                }

            });
            $("#" + options.firstId).click(function() {
                animate("first", true);
            });
            $("#" + options.lastId).click(function() {
                animate("last", true);
            });

            // 鼠标hover动作，加上样式
            if (options.hoverShow === true) {
                $("img", obj).hover(
                    function() {
                        IndexOfHoverLI = parseInt($("li", obj).index($(this).parent("li"), obj));
                        IndexOfGroup = Math.floor(IndexOfHoverLI / options.numberOfOnce);
                        if (!FlagLoading) {
                            t = IndexOfGroup;
                            animate("hover", false);
                        }
                    },
                    function() {
                        $(this).parents("li").css("border", "").removeClass("img_hover");
                    }
                );
            }

            /// <summary>
            /// click后切换主要内容
            /// </summary>
            /// <param name=""></param>
            /// <param name=""></param>
            $("li[id^='hx_list_']")
            .click(function() {
                var id = $(this).attr("id").split('_')[2];
                $(".click_on").removeClass("click_on");
                $(this).addClass("click_on");
                $(".hx_on").hide().removeClass("hx_off");
                $("#hx_desc_" + id).show().addClass("hx_on");
            })
            .css("cursor", "pointer");

            if (options.autoFocus) {
                var indexOfItem = parseInt($("li", obj).index($("#hx_list_" + _choosed_Id, obj))),
                    groupOfItem = Math.floor(indexOfItem / options.numberOfOnce);
                $("ul", obj).css("margin-left", groupOfItem * w * options.numberOfShow * -1 + "px");
                $("#hx_list_" + _choosed_Id).click();
            }

            function animate(dir, clicked) {
                var ot = t,
                    IndexOfImgToShow;
                switch (dir) {
                    case "next":
                        t = ((ot >= ts) ? (options.continuous ? 0 : ts) : t + 1);
                        IndexOfImgToShow = t * options.numberOfOnce;
                        break;
                    case "prev":
                        t = ((t <= 0) ? (options.continuous ? ts : 0) : t - 1);
                        IndexOfImgToShow = t * options.numberOfOnce;
                        break;
                    case "first":
                        t = 0;
                        break;
                    case "last":
                        t = ts;
                        break;
                    case "hover":
                        IndexOfImgToShow = IndexOfHoverLI;
                        break;
                    default:
                        break;
                }

                // 切换大图
                if ($.isFunction(options.togglePic) && options.hoverShow === true) {
                    options.togglePic(IndexOfImgToShow, obj);
                }

                var diff = Math.abs(ot - t);
                var speed = diff * options.speed;
                if (!options.vertical) {
                    if (diff !== 0) {
                        p = (options.numberOfOnce * t * w * -1);
                        $("ul", obj).animate({ marginLeft: p }, speed, function() {
                            FlagLoading = false;
                        });
                    }

                } else {
                    p = (options.numberOfOnce * t * h * -1);
                    $("ul", obj).animate({
                        marginTop: p
                    },
                    speed);
                }

                if (!options.continuous && options.controlsFade) {
                    if (t == ts) {
                        $("a", "#" + options.nextId).css("opacity", "0.3");
                        $("a", "#" + options.lastId).css("opacity", "0.3");
                        FlagLoading = false;
                    } else {
                        $("a", "#" + options.nextId).css("opacity", "1.0");
                        $("a", "#" + options.lastId).css("opacity", "1.0");				
                    }
                    if (t == 0) {
                        $("a", "#" + options.prevId).css("opacity", "0.3");
                        $("a", "#" + options.firstId).css("opacity", "0.3");
                        FlagLoading = false;
                    } else {
                        $("a", "#" + options.prevId).css("opacity", "1.0");
                        $("a", "#" + options.firstId).css("opacity", "1.0");
                    }
                }

                if (clicked) { clearTimeout(timeout); }
                if (options.auto && dir == "next" && !clicked) {

                    timeout = setTimeout(function() {
                        animate("next", false);
                    },
                    diff * options.speed + options.pause);
                }
            }
            var timeout;
            if (options.auto) {
                timeout = setTimeout(function() {
                    animate("next", false);
                },
                options.pause);
            }

            if (!options.continuous && options.controlsFade) {
                if ($("ul li", obj).size() !== 0) {
                    $("a", "#" + options.prevId).css("opacity", "0.3")
                    $("a", "#" + options.firstId).css("opacity", "0.3");
                } else {
                    $("a", "#" + options.prevId).hide();
                    $("a", "#" + options.firstId).hide();
                    $("a", "#" + options.nextId).hide();
                }
            }
        });
    };
})(jQuery);