(function($) {
    $.fn.myslide = function() {
        return this.each(function() {
            //get selector
            var $wrapper = $("> div", this).css("overflow", "hidden"), // get div under this
				$ulslider = $wrapper.find("> ul"),
				$listitems = $ulslider.find("> li").css("float", "left").css("width", "633px"),
				$single = $listitems.filter(":first"),

            //register variable 
				slideWidth = $single.outerWidth(), // width + padding
				totalSlides = $listitems.length,
				currentSlide = 1,
				pause = 5000,
				speed = 500,
				page;

            $ulslider.css("width", slideWidth * (totalSlides + 2));

            $listitems.filter(":first").before($listitems.filter(":last").clone().addClass("cloned")); // -1 ambil yang terakhir
            $listitems.filter(":last").after($listitems.filter(":first").clone().addClass("cloned"))

            $listitems = $ulslider.find("> li"); // recount li

            $wrapper.scrollLeft(slideWidth);

            function gotoSlide(page, dir) {
                var scrollWidth = slideWidth * dir;
                $wrapper.filter(":not(:animated)").animate({
                    "scrollLeft": '+=' + scrollWidth
                }, speed, function() {
                    // kalau sudah selesai di animate

                    if (page > totalSlides) {
                        $wrapper.scrollLeft(slideWidth * totalSlides * -1);
                        page = 1;
                    }
                    else if (page < 1) {
                        $wrapper.scrollLeft(slideWidth * totalSlides);
                    }
                    currentSlide = page;
                    if (currentSlide == 1) {
                        $(".slides-nav").find("> li").removeClass("on").filter(":first").addClass("on");
                    }
                    else {
                        $(".slides-nav").find("> li").removeClass("on").filter(":last").addClass("on");
                    }
                });

            }

            //bind function controller
            $(".slide-one").click(function() {
                gotoSlide(currentSlide - 1, -1);
                return false;
            });

            $(".slide-two").click(function() {
                gotoSlide(currentSlide + 1, 1);
                return false;
            });


            //automate + on mouse over
            $(this).bind('next', function() {
                $('.slide-one').click();
            });

            autoscroll = true;

            $wrapper.mouseover(function() {
                autoscroll = false;
            }).mouseout(function() {
                autoscroll = true;
            });

            setInterval(function() {
                if (autoscroll) {
                    gotoSlide(currentSlide + 1, 1);
                }
            }, pause);


        });
    };

})(jQuery)

$(document).ready(function() {
    $("#slideshow").myslide();
});