//constructor
$JssorSlider$(sliderElementOrId[, options])
    //create slider instance with slider element id
    var jssor_slider_instance = new $JssorSlider$("jssor_1");
    
    //create slider instance with options
    var options = { $AutoPlay: 1 };
    var jssor_slider_instance = new $JssorSlider$("jssor_1", options);

    //create slider instance with slider element
    var jssor_slider_element = document.getElementById("jssor_1");
    var jssor_slider_instance = new $JssorSlider$(jssor_slider_element);

//methods
$Play()
    //start to play continuously, it equals to jssor_slider_instance.$AutoPlay(1);
    jssor_slider_instance.$Play();

$Pause()
    //stop playing automatically, it equals to jssor_slider_instance.$AutoPlay(0);
    jssor_slider_instance.$Pause();

$PlayTo(slideIndex[, slideDuration])
    //play slider to position 'slideIndex' within a period calculated base on 'slideDuration'
    jssor_slider_instance.$PlayTo(3);

$GoTo(slideIndex)
    //go to the specifed slide immediately with no play
    jssor_slider_instance.$GoTo(2);

$Next()
    //play to the next slide
    jssor_slider_instance.$Next();

$Prev()
    //play to the previous slide
    jssor_slider_instance.$Prev();

$ScaleWidth()
    //get scaled width the slider currently displays
    var width = jssor_slider_instance.$ScaleWidth();

$ScaleWidth(width)
    //scale the slider to new width and keep aspect ratio
    jssor_slider_instance.$ScaleWidth(width);

$ScaleHeight()
    //get scaled height the slider currently displays
    var height = jssor_slider_instance.$ScaleHeight();

$ScaleHeight(height)
    //scale the slider to new height and keep aspect ratio
    jssor_slider_instance.$ScaleHeight(height);

$ScaleSize(width, height)
    //scale the slider to exact size
    jssor_slider_instance.$ScaleHeight(width, height);

$OriginalWidth()
    //get original width of the slider
    var width = jssor_slider_instance.$OriginalWidth();

$OriginalHeight()
    //get original height of the slider
    var height = jssor_slider_instance.$OriginalHeight();

$SetSlideshowTransitions(transitions)
    //reset slideshow transitions for the slider
    jssor_slider_instance.$SetSlideshowTransitions(transitions);

$SetCaptionTransitions(transitions)
    //reset caption transitions for the slider
    jssor_slider_instance.$SetCaptionTransitions(transitions);

$SlidesCount()
    //get slides count of the slider
    var slidesCount = jssor_slider_instance.$SlidesCount();

$CurrentIndex()
    //get current slide index of the slider
    var slideIndex = jssor_slider_instance.$CurrentIndex();

$CurrentPosition()
    //get current position of the carousel
    var currentPosition = jssor_slider_instance.$CurrentPosition();
                            
$IsAutoPlaying()
    //obsolete, use $AutoPlay instead

$AutoPlay()
    //get auto play status of the slider
    var autoPlay = jssor_slider_instance.$AutoPlay();

$AutoPlay(value)
    //set auto play, values can be 0: no auto play, 1, continuously, 2: stop at last slide,
    //4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)                            
    jssor_slider_instance.$AutoPlay(1);                            
    jssor_slider_instance.$AutoPlay(4 + 8);

$IsDragging()
    //get drag status of the slider
    var isDragging = jssor_slider_instance.$IsDragging();

$IsSliding()
    //get left <--> right sliding status of the slider
    var isSliding = jssor_slider_instance.$IsSliding();

$IsMouseOver()
    //get mouse over status of the slider
    var isMouseOver = jssor_slider_instance.$IsMouseOver();

$LastDragSucceeded()
    //get last drag succeeded status, returns 0 if failed, returns drag offset if succeeded                            
    var isMouseOver = jssor_slider_instance.$IsMouseOver();

$AppendSlides(slidesHtml[, slideIndex])
    //append slides dynamically

    var slidesHtml = '<div><img data-u="image" src="url" /></div>';
    slidesHtml += '<div><img data-u="image" src="url" /></div>';

    //append slides after current slide
    jssor_slider_instance.$AppendSlides(slidesHtml);

    //append slides before current slide
    var currentIndex = jssor_slider_instance.$CurrentIndex();
    jssor_slider_instance.$AppendSlides(slidesHtml, currentIndex);

    //append slides before the first slide
    jssor_slider_instance.$AppendSlides(slidesHtml, 0);

    //append slides after the last slide
    var slidesCount = jssor_slider_instance.$SlidesCount();
    jssor_slider_instance.$AppendSlides(slidesHtml, slidesCount);
                            
$RemoveSlides(slideIndices)
    //remove an array of slides

    //remove current slide
    var currentIndex = jssor_slider_instance.$CurrentIndex();
    var slideIndices = [currentIndex];
    jssor_slider_instance.$RemoveSlides(slideIndices);

    //remove the first and the third slide                            
    var slideIndices = [0, 2];
    jssor_slider_instance.$RemoveSlides(slideIndices);

$ReloadSlides(slidesHtml)
    //remove all slides and reload new slides
    var slidesHtml = '<div><img data-u="image" src="url" /></div>';
    slidesHtml += '<div><img data-u="image" src="url" /></div>';
    jssor_slider_instance.$ReloadSlides(slidesHtml);
                            
$Destroy()
    //destroy jssor slider instance and remove all html inside the slider element                            
    jssor_slider_instance.$Destroy();

    //release memory
    jssor_slider_instance = null;

$Elmt
    //get the html dom element of the slider
    var sliderElement = jssor_slider_instance.$Elmt;
                            

$EVT_CLICK            function(slideIndex[, event])
$EVT_DRAG_START       function(position[, virtualPosition, event])
$EVT_DRAG_END         function(position, startPosition[, virtualPosition, virtualStartPosition, event])
$EVT_SWIPE_START      function(position[, virtualPosition])
$EVT_SWIPE_END        function(position[, virtualPosition])
$EVT_LOAD_START       function(slideIndex)
$EVT_LOAD_END         function(slideIndex)                            
$EVT_FREEZE           function()                            
$EVT_MOUSE_ENTER      function()                            
$EVT_MOUSE_LEAVE      function()
$EVT_POSITION_CHANGE  function(position, fromPosition[, virtualPosition, virtualFromPosition])
$EVT_PARK             function(slideIndex, fromIndex)
$EVT_PROGRESS_CHANGE  function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
$EVT_STATE_CHANGE     function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
$EVT_SLIDESHOW_START  function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
$EVT_SLIDESHOW_END    function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])

$JssorSlider$.$EVT_CLICK
    function SliderClickEventHandler(slideIndex, event)
    {
        //slideIndex: the index of slide which is clicked
        //event: native event fired by browser
    }                            
    jssor_slider_instance.$On($JssorSlider$.$EVT_CLICK, SliderClickEventHandler);

$JssorSlider$.$EVT_DRAG_START
    function SliderDragStartEventHandler(position, virtualPosition, event)
    {
        //position: real position of the carousel
        //virtualPosition: virtual position of the carousel
        //event: native event fired by browser
    }                            
    jssor_slider_instance.$On($JssorSlider$.$EVT_DRAG_START, SliderDragStartEventHandler);

$JssorSlider$.$EVT_DRAG_END
    function SliderDragEndEvenetHandler(position, virtualPosition, startPosition, virtualStartPosition, event)
    {
        //position: real position of the carousel
        //startPosition: real position that drag starts at
        //virtualPosition: virtual position of the carousel
        //virtualStartPosition; virtual position that drag starts at
        //event: native event fired by browser
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_DRAG_END, SliderDragEndEvenetHandler);

$JssorSlider$.$EVT_SWIPE_START
    function SliderSwipeStartEventHandler(position, virtualPosition)
    {
        //position: real position of the carousel
        //virtualPosition: virtual position of the carousel
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_SWIPE_START, SliderSwipeStartEventHandler);

$JssorSlider$.$EVT_SWIPE_END
    function SliderSwipeEndEventHandler(position, virtualPosition)
    {
        //position: real position of the carousel
        //virtualPosition: virtual position of the carousel
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_SWIPE_END, SliderSwipeEndEventHandler);

$JssorSlider$.$EVT_LOAD_START
    function SliderLoadStartEventHandler(slideIndex)
    {
        //fires before image load
        //slideIndex: the index of slide
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_LOAD_START, SliderLoadStartEventHandler);

$JssorSlider$.$EVT_LOAD_END
    function SliderLoadEndEventHandler(slideIndex)
    {
        //fires after image load
        //slideIndex: the index of slide
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_LOAD_END, SliderLoadEndEventHandler);

$JssorSlider$.$EVT_FREEZE
    function SliderFreezeEventHandler()
    {
        //fires on slider freeze
    }                            
    jssor_slider_instance.$On($JssorSlider$.$EVT_LOAD_END, SliderFreezeEventHandler);

$JssorSlider$.$EVT_MOUSE_ENTER
    function SliderMouseEnterEventHandler()
    {
        //fires on mouse enter
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_MOUSE_ENTER, SliderMouseEnterEventHandler);

$JssorSlider$.$EVT_MOUSE_LEAVE
    function SliderMouseLeaveEventHandler()
    {
        //fires on mouse leave
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_MOUSE_LEAVE, SliderMouseLeaveEventHandler);

$JssorSlider$.$EVT_POSITION_CHANGE
    function SliderPositionChangeEventHandler(position, fromPosition, virtualPosition, virtualFromPosition)
    {
        //continuously fires while carousel sliding
        //position: current position of the carousel
        //fromPosition: previous position of the carousel
        //virtualPosition: current virtual position of the carousel
        //virtualFromPosition: previous virtual position of the carousel
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_POSITION_CHANGE, SliderPositionChangeEventHandler);

$JssorSlider$.$EVT_PARK
    function SliderParkEventHandler(slideIndex, fromIndex)
    {
        //fires when carousel stopped sliding and slides park in correct position
        //slideIndex: the index of current slide
        //fromIndex: the index of previous slide
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_PARK, SliderParkEventHandler);

$JssorSlider$.$EVT_STATE_CHANGE
    function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd)
    {
        //given a slide parked, the life cycle of current slide is as below,
        progressBegin --> idleBegin --> idleEnd --> progressEnd
        //this event fires at any state of
        'progressBegin', 'idleBegin', 'idleEnd' and 'progressEnd'
        //slideIndex: the index of slide
        //progress: current time in the whole process
        //progressBegin: the begining of the whole process
            (generally, captions start to play in)
        //idleBegin: captions played in and become idle, will wait for a period
            which is specified by option '$Idle'
        //idleEnd: the waiting time is over, captions start to play out
        //progressEnd: the whole process is completed
        
        //tipical usage
        if(progress == progressEnd)
        {
            //the animation of current slide is completed
        }
        else if(progress == idleEnd)
        {
            //the idle period of current slide is over
        }
        else if(progress == idleBegin)
        {
            //current slide become idle
        }
        else if(progress == progressBegin)
        {
            //the animation of current slide is at the beginning
        }
        else if(progress < 0)
        {
            //the animation of current slide is aborted,
            //the progress value is negative only in this case
            var realProgress = -progress - 1;
        }
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_STATE_CHANGE, SliderStateChangeEventHandler);

$JssorSlider$.$EVT_PROGRESS_CHANGE
    function SliderProgressChangeEventHandler(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd)
    {
        //this event continuously fires within the process of current slide
        //tipical usage                            
        var progressString = Math.round(progress / progressEnd * 100) + "%";
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_PROGRESS_CHANGE, SliderProgressChangeEventHandler);

$JssorSlider$.$EVT_SLIDESHOW_START
    function SliderSlideshowStartEventHandler(slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd)
    {
        //within the whole process of a slide, there maybe slideshow to run
        //this event fires when slideshow begin
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_SLIDESHOW_START, SliderSlideshowStartEventHandler);

$JssorSlider$.$EVT_SLIDESHOW_END
    function SliderSlideshowEndtEventHandler(slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd)
    {
        //within the whole process of a slide, there maybe slideshow to run
        //this event fires when slideshow end
    }
    jssor_slider_instance.$On($JssorSlider$.$EVT_SLIDESHOW_END, SliderSlideshowEndtEventHandler);