(function ($) {

    intervalId = null;

    var slider = null;
    var sliderElems = null;
    var sliderImgs = null;

    var navcontroller = null;
    var navcontrols = null;

    var currentElemIndex = 0;

    //function
    var slideImg = function (options) {

        var currentElem = sliderElems.eq(currentElemIndex);
        var outerwidth = sliderImgs.eq(currentElemIndex).outerWidth();

        currentElemIndex++;
        currentElemIndex = currentElemIndex % sliderImgs.length; 


        var nextElem = sliderElems.eq(currentElemIndex);

        nextElem.css({ "left": outerwidth, "top": "0px" });

        currentElem.animate({ "left": "-=" + outerwidth }, options.transitionSpeed, "linear");
                
        if (options.enableNavControl) {
            setNavControlClassCurrent(navcontrols.eq(currentElemIndex));
        }

        nextElem.animate({ "left": "-=" + outerwidth }, options.transitionSpeed, "linear");
    }


    //function
    var jumpToImg = function (currentNavControl, options) {

        sliderElems.filter(":animated").each(
                    function (i, obj) {
                        $(obj).stop(true, true);
                    });


        //2. hide current element, 
        var currentElem = sliderElems.eq(currentElemIndex);
        var outerwidth = sliderImgs.eq(currentElemIndex).outerWidth();
        currentElem.stop(true, true).css({ "left": -outerwidth, "top": "0px" });


        currentElemIndex = $(currentNavControl).index();
        var nextElem = sliderElems.eq(currentElemIndex); 
        nextElem.css({ "left": 0, "top": "0px" });
        //nextimg.show();
    }

    //function
    var setNavControlClassCurrent = function setNavControlClassCurrent(obj) {

        $(obj).siblings().attr("class", "original").end().attr("class", "current");
    }

    //function
    $.fn.joslide = function (options) {

        var pictureframe = $(this);

        slider = $(this).find("#slider");

        navcontroller = $(this).find("#navcontrol");

        
        sliderElems = slider.children().css("top", -pictureframe.height());

        
        sliderImgs = slider.find("img");

        
        sliderElems.first().css({ "top": "0px" });

        var sliderWidth = 0;
        sliderImgs.each(function (i, obj) {

            sliderWidth += obj.width; 

            (i == 0) ? navcontroller.append($("<div class='current'/>")) : navcontroller.append($("<div class='original'/>"));

        });

        
        slider.css({ "width": sliderWidth + "px", "height": sliderElems.filter("img:first").outerHeight() });


        if (options.navControllerLocation.horizontalAlign == "center") {
            navcontroller.css("left", (pictureframe.outerWidth() - navcontroller.outerWidth()) / 2);
        }
        else if (options.navControllerLocation.horizontalAlign == "right") {
            navcontroller.css("right", 0);
        }


        //***
        intervalId = setInterval(function () { slideImg(options); }, options.displayTime);

        
        slider.find("a").hover(
                        function () {
                            clearInterval(intervalId);
                        },
                        function () {
                            intervalId = setInterval(function () { slideImg(options); }, options.displayTime);
                        }
                  ); //end hover


        
        if (options.enableNavControl) {
            navcontrols = $(this).find("#navcontrol div");
            navcontrols = $(this).find("#navcontrol div");
            navcontrols.click(function (event) {

                clearInterval(intervalId);

                jumpToImg(this, options);

                setNavControlClassCurrent(this);

                intervalId = setInterval(function () { slideImg(options); }, options.displayTime);

            }); //end click
        }
        else {
            navcontroller.hide();
        }

    }; //end fn.joslide

})(jQuery);