/// <reference path="jssor.js" />

/*
* jssor.slider 19.0
* http://www.jssor.com/
*
* licensed under the mit license:
* http://www.opensource.org/licenses/mit
* 
* terms of use - jssor.slider
* 
* copyright 2014 jssor
*
* permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "software"), to deal in the software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the software, and to
* permit persons to whom the software is furnished to do so, subject to
* the following conditions:
* 
* the above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the software.
* 
* the software is provided "as is", without warranty of any kind,
* express or implied, including but not limited to the warranties of
* merchantability, fitness for a particular purpose and
* noninfringement. in no event shall the authors or copyright holders be
* liable for any claim, damages or other liability, whether in an action
* of contract, tort or otherwise, arising from, out of or in connection
* with the software or the use or other dealings in the software.
*/

var $jssorslider$;
var $jssorslideshowformations$ = window.$jssorslideshowformations$ = {};
var $jssorslideshowrunner$;

new function () {
    //constants +++++++

    var column_increase = 0;
    var column_decrease = 1;
    var row_increase = 2;
    var row_decrease = 3;

    var direction_horizontal = 0x0003;
    var direction_vertical = 0x000c;

    var to_left = 0x0001;
    var to_right = 0x0002;
    var to_top = 0x0004;
    var to_bottom = 0x0008;

    var from_left = 0x0100;
    var from_top = 0x0200;
    var from_right = 0x0400;
    var from_bottom = 0x0800;

    var assembly_bottom_left = from_bottom + to_left;
    var assembly_bottom_right = from_bottom + to_right;
    var assembly_top_left = from_top + to_left;
    var assembly_top_right = from_top + to_right;
    var assembly_left_top = from_left + to_top;
    var assembly_left_bottom = from_left + to_bottom;
    var assembly_right_top = from_right + to_top;
    var assembly_right_bottom = from_right + to_bottom;

    //constants -------

    //formation definition +++++++
    function istoleft(roadvalue) {
        return (roadvalue & to_left) == to_left;
    }

    function istoright(roadvalue) {
        return (roadvalue & to_right) == to_right;
    }

    function istotop(roadvalue) {
        return (roadvalue & to_top) == to_top;
    }

    function istobottom(roadvalue) {
        return (roadvalue & to_bottom) == to_bottom;
    }

    function pushformationorder(arr, order, formationitem) {
        formationitem.push(order);
        arr[order] = arr[order] || [];
        arr[order].push(formationitem);
    }

    $jssorslideshowformations$.$formationstraight = function (transition) {
        var cols = transition.$cols;
        var rows = transition.$rows;
        var formationdirection = transition.$assembly;
        var count = transition.$count;
        var a = [];
        var i = 0;
        var col = 0;
        var r = 0;
        var cl = cols - 1;
        var rl = rows - 1;
        var il = count - 1;
        var cr;
        var order;
        for (r = 0; r < rows; r++) {
            for (col = 0; col < cols; col++) {
                cr = r + ',' + col;
                switch (formationdirection) {
                    case assembly_bottom_left:
                        order = il - (col * rows + (rl - r));
                        break;
                    case assembly_right_top:
                        order = il - (r * cols + (cl - col));
                        break;
                    case assembly_top_left:
                        order = il - (col * rows + r);
                    case assembly_left_top:
                        order = il - (r * cols + col);
                        break;
                    case assembly_bottom_right:
                        order = col * rows + r;
                        break;
                    case assembly_left_bottom:
                        order = r * cols + (cl - col);
                        break;
                    case assembly_top_right:
                        order = col * rows + (rl - r);
                        break;
                    default:
                        order = r * cols + col;
                        break; //assembly_right_bottom
                }
                pushformationorder(a, order, [r, col]);
            }
        }

        return a;
    };

    $jssorslideshowformations$.$formationswirl = function (transition) {
        var cols = transition.$cols;
        var rows = transition.$rows;
        var formationdirection = transition.$assembly;
        var count = transition.$count;
        var a = [];
        var hit = [];
        var i = 0;
        var col = 0;
        var r = 0;
        var cl = cols - 1;
        var rl = rows - 1;
        var il = count - 1;
        var cr;
        var courses;
        var course = 0;
        switch (formationdirection) {
            case assembly_bottom_left:
                col = cl;
                r = 0;
                courses = [row_increase, column_decrease, row_decrease, column_increase];
                break;
            case assembly_right_top:
                col = 0;
                r = rl;
                courses = [column_increase, row_decrease, column_decrease, row_increase];
                break;
            case assembly_top_left:
                col = cl;
                r = rl;
                courses = [row_decrease, column_decrease, row_increase, column_increase];
                break;
            case assembly_left_top:
                col = cl;
                r = rl;
                courses = [column_decrease, row_decrease, column_increase, row_increase];
                break;
            case assembly_bottom_right:
                col = 0;
                r = 0;
                courses = [row_increase, column_increase, row_decrease, column_decrease];
                break;
            case assembly_left_bottom:
                col = cl;
                r = 0;
                courses = [column_decrease, row_increase, column_increase, row_decrease];
                break;
            case assembly_top_right:
                col = 0;
                r = rl;
                courses = [row_decrease, column_increase, row_increase, column_decrease];
                break;
            default:
                col = 0;
                r = 0;
                courses = [column_increase, row_increase, column_decrease, row_decrease];
                break; //assembly_right_bottom
        }
        i = 0;
        while (i < count) {
            cr = r + ',' + col;
            if (col >= 0 && col < cols && r >= 0 && r < rows && !hit[cr]) {
                //a[cr] = i++;
                hit[cr] = true;
                pushformationorder(a, i++, [r, col]);
            }
            else {
                switch (courses[course++ % courses.length]) {
                    case column_increase:
                        col--;
                        break;
                    case row_increase:
                        r--;
                        break;
                    case column_decrease:
                        col++;
                        break;
                    case row_decrease:
                        r++;
                        break;
                }
            }

            switch (courses[course % courses.length]) {
                case column_increase:
                    col++;
                    break;
                case row_increase:
                    r++;
                    break;
                case column_decrease:
                    col--;
                    break;
                case row_decrease:
                    r--;
                    break;
            }
        }
        return a;
    };

    $jssorslideshowformations$.$formationzigzag = function (transition) {
        var cols = transition.$cols;
        var rows = transition.$rows;
        var formationdirection = transition.$assembly;
        var count = transition.$count;
        var a = [];
        var i = 0;
        var col = 0;
        var r = 0;
        var cl = cols - 1;
        var rl = rows - 1;
        var il = count - 1;
        var cr;
        var courses;
        var course = 0;
        switch (formationdirection) {
            case assembly_bottom_left:
                col = cl;
                r = 0;
                courses = [row_increase, column_decrease, row_decrease, column_decrease];
                break;
            case assembly_right_top:
                col = 0;
                r = rl;
                courses = [column_increase, row_decrease, column_decrease, row_decrease];
                break;
            case assembly_top_left:
                col = cl;
                r = rl;
                courses = [row_decrease, column_decrease, row_increase, column_decrease];
                break;
            case assembly_left_top:
                col = cl;
                r = rl;
                courses = [column_decrease, row_decrease, column_increase, row_decrease];
                break;
            case assembly_bottom_right:
                col = 0;
                r = 0;
                courses = [row_increase, column_increase, row_decrease, column_increase];
                break;
            case assembly_left_bottom:
                col = cl;
                r = 0;
                courses = [column_decrease, row_increase, column_increase, row_increase];
                break;
            case assembly_top_right:
                col = 0;
                r = rl;
                courses = [row_decrease, column_increase, row_increase, column_increase];
                break;
            default:
                col = 0;
                r = 0;
                courses = [column_increase, row_increase, column_decrease, row_increase];
                break; //assembly_right_bottom
        }
        i = 0;
        while (i < count) {
            cr = r + ',' + col;
            if (col >= 0 && col < cols && r >= 0 && r < rows && typeof (a[cr]) == 'undefined') {
                pushformationorder(a, i++, [r, col]);
                //a[cr] = i++;
                switch (courses[course % courses.length]) {
                    case column_increase:
                        col++;
                        break;
                    case row_increase:
                        r++;
                        break;
                    case column_decrease:
                        col--;
                        break;
                    case row_decrease:
                        r--;
                        break;
                }
            }
            else {
                switch (courses[course++ % courses.length]) {
                    case column_increase:
                        col--;
                        break;
                    case row_increase:
                        r--;
                        break;
                    case column_decrease:
                        col++;
                        break;
                    case row_decrease:
                        r++;
                        break;
                }
                switch (courses[course++ % courses.length]) {
                    case column_increase:
                        col++;
                        break;
                    case row_increase:
                        r++;
                        break;
                    case column_decrease:
                        col--;
                        break;
                    case row_decrease:
                        r--;
                        break;
                }
            }
        }
        return a;
    };

    $jssorslideshowformations$.$formationstraightstairs = function (transition) {
        var cols = transition.$cols;
        var rows = transition.$rows;
        var formationdirection = transition.$assembly;
        var count = transition.$count;
        var a = [];
        var i = 0;
        var col = 0;
        var r = 0;
        var cl = cols - 1;
        var rl = rows - 1;
        var il = count - 1;
        var cr;
        switch (formationdirection) {
            case assembly_bottom_left:
            case assembly_top_right:
            case assembly_top_left:
            case assembly_bottom_right:
                var c = 0;
                var r = 0;
                break;
            case assembly_left_bottom:
            case assembly_right_top:
            case assembly_left_top:
            case assembly_right_bottom:
                var c = cl;
                var r = 0;
                break;
            default:
                formationdirection = assembly_right_bottom;
                var c = cl;
                var r = 0;
                break;
        }
        col = c;
        r = r;
        while (i < count) {
            cr = r + ',' + col;
            if (istotop(formationdirection) || istoright(formationdirection)) {
                pushformationorder(a, il - i++, [r, col]);
                //a[cr] = il - i++;
            }
            else {
                pushformationorder(a, i++, [r, col]);
                //a[cr] = i++;
            }
            switch (formationdirection) {
                case assembly_bottom_left:
                case assembly_top_right:
                    col--;
                    r++;
                    break;
                case assembly_top_left:
                case assembly_bottom_right:
                    col++;
                    r--;
                    break;
                case assembly_left_bottom:
                case assembly_right_top:
                    col--;
                    r--;
                    break;
                case assembly_right_bottom:
                case assembly_left_top:
                default:
                    col++;
                    r++;
                    break;
            }
            if (col < 0 || r < 0 || col > cl || r > rl) {
                switch (formationdirection) {
                    case assembly_bottom_left:
                    case assembly_top_right:
                        c++;
                        break;
                    case assembly_left_bottom:
                    case assembly_right_top:
                    case assembly_top_left:
                    case assembly_bottom_right:
                        r++;
                        break;
                    case assembly_right_bottom:
                    case assembly_left_top:
                    default:
                        c--;
                        break;
                }
                if (c < 0 || r < 0 || c > cl || r > rl) {
                    switch (formationdirection) {
                        case assembly_bottom_left:
                        case assembly_top_right:
                            c = cl;
                            r++;
                            break;
                        case assembly_top_left:
                        case assembly_bottom_right:
                            r = rl;
                            c++;
                            break;
                        case assembly_left_bottom:
                        case assembly_right_top: r = rl; c--;
                            break;
                        case assembly_right_bottom:
                        case assembly_left_top:
                        default:
                            c = 0;
                            r++;
                            break;
                    }
                    if (r > rl)
                        r = rl;
                    else if (r < 0)
                        r = 0;
                    else if (c > cl)
                        c = cl;
                    else if (c < 0)
                        c = 0;
                }
                r = r;
                col = c;
            }
        }
        return a;
    };

    $jssorslideshowformations$.$formationsquare = function (transition) {
        var cols = transition.$cols || 1;
        var rows = transition.$rows || 1;
        var arr = [];
        var i = 0;
        var col;
        var r;
        var dc;
        var dr;
        var cr;
        dc = cols < rows ? (rows - cols) / 2 : 0;
        dr = cols > rows ? (cols - rows) / 2 : 0;
        cr = math.round(math.max(cols / 2, rows / 2)) + 1;
        for (col = 0; col < cols; col++) {
            for (r = 0; r < rows; r++)
                pushformationorder(arr, cr - math.min(col + 1 + dc, r + 1 + dr, cols - col + dc, rows - r + dr), [r, col]);
        }
        return arr;
    };

    $jssorslideshowformations$.$formationrectangle = function (transition) {
        var cols = transition.$cols || 1;
        var rows = transition.$rows || 1;
        var arr = [];
        var i = 0;
        var col;
        var r;
        var cr;
        cr = math.round(math.min(cols / 2, rows / 2)) + 1;
        for (col = 0; col < cols; col++) {
            for (r = 0; r < rows; r++)
                pushformationorder(arr, cr - math.min(col + 1, r + 1, cols - col, rows - r), [r, col]);
        }
        return arr;
    };

    $jssorslideshowformations$.$formationrandom = function (transition) {
        var a = [];
        var r, col, i;
        for (r = 0; r < transition.$rows; r++) {
            for (col = 0; col < transition.$cols; col++)
                pushformationorder(a, math.ceil(100000 * math.random()) % 13, [r, col]);
        }

        return a;
    };

    $jssorslideshowformations$.$formationcircle = function (transition) {
        var cols = transition.$cols || 1;
        var rows = transition.$rows || 1;
        var arr = [];
        var i = 0;
        var col;
        var r;
        var hc = cols / 2 - 0.5;
        var hr = rows / 2 - 0.5;
        for (col = 0; col < cols; col++) {
            for (r = 0; r < rows; r++)
                pushformationorder(arr, math.round(math.sqrt(math.pow(col - hc, 2) + math.pow(r - hr, 2))), [r, col]);
        }
        return arr;
    };

    $jssorslideshowformations$.$formationcross = function (transition) {
        var cols = transition.$cols || 1;
        var rows = transition.$rows || 1;
        var arr = [];
        var i = 0;
        var col;
        var r;
        var hc = cols / 2 - 0.5;
        var hr = rows / 2 - 0.5;
        for (col = 0; col < cols; col++) {
            for (r = 0; r < rows; r++)
                pushformationorder(arr, math.round(math.min(math.abs(col - hc), math.abs(r - hr))), [r, col]);
        }
        return arr;
    };

    $jssorslideshowformations$.$formationrectanglecross = function (transition) {
        var cols = transition.$cols || 1;
        var rows = transition.$rows || 1;
        var arr = [];
        var i = 0;
        var col;
        var r;
        var hc = cols / 2 - 0.5;
        var hr = rows / 2 - 0.5;
        var cr = math.max(hc, hr) + 1;
        for (col = 0; col < cols; col++) {
            for (r = 0; r < rows; r++)
                pushformationorder(arr, math.round(cr - math.max(hc - math.abs(col - hc), hr - math.abs(r - hr))) - 1, [r, col]);
        }
        return arr;
    };

    function getformation(transition) {

        var formationinstance = transition.$formation(transition);

        return transition.$reverse ? formationinstance.reverse() : formationinstance;

    } //getformation

    //var _prototypetransitions = [];
    function ensuretransitioninstance(options, slideshowinterval) {

        var _slideshowtransition = {
            $interval: slideshowinterval,  //delay to play next frame
            $duration: 1, //duration to finish the entire transition
            $delay: 0,  //delay to assembly blocks
            $cols: 1,   //number of columns
            $rows: 1,   //number of rows
            $opacity: 0,   //fade block or not
            $zoom: 0,   //zoom block or not
            $clip: 0,   //clip block or not
            $move: false,   //move block or not
            $slideout: false,   //slide the previous slide out to display next slide instead
            //$flydirection: 0,   //specify fly transform with direction
            $reverse: false,    //reverse the assembly or not
            $formation: $jssorslideshowformations$.$formationrandom,    //shape that assembly blocks as
            $assembly: assembly_right_bottom,   //the way to assembly blocks
            $chessmode: { $column: 0, $row: 0 },    //chess move or fly direction
            $easing: $jssoreasing$.$easeswing,  //specify variation of speed during transition
            $round: {},
            $blocks: [],
            $during: {}
        };

        $jssor$.$extend(_slideshowtransition, options);

        _slideshowtransition.$count = _slideshowtransition.$cols * _slideshowtransition.$rows;
        if ($jssor$.$isfunction(_slideshowtransition.$easing))
            _slideshowtransition.$easing = { $default: _slideshowtransition.$easing };

        _slideshowtransition.$framescount = math.ceil(_slideshowtransition.$duration / _slideshowtransition.$interval);
        _slideshowtransition.$easinginstance = geteasing(_slideshowtransition);

        _slideshowtransition.$getblocks = function (width, height) {
            width /= _slideshowtransition.$cols;
            height /= _slideshowtransition.$rows;
            var wh = width + 'x' + height;
            if (!_slideshowtransition.$blocks[wh]) {
                _slideshowtransition.$blocks[wh] = { $width: width, $height: height };
                for (var col = 0; col < _slideshowtransition.$cols; col++) {
                    for (var r = 0; r < _slideshowtransition.$rows; r++)
                        _slideshowtransition.$blocks[wh][r + ',' + col] = { $top: r * height, $right: col * width + width, $bottom: r * height + height, $left: col * width };
                }
            }

            return _slideshowtransition.$blocks[wh];
        };

        if (_slideshowtransition.$brother) {
            _slideshowtransition.$brother = ensuretransitioninstance(_slideshowtransition.$brother, slideshowinterval);
            _slideshowtransition.$slideout = true;
        }

        return _slideshowtransition;
    }

    function geteasing(transition) {
        var easing = transition.$easing;
        if (!easing.$default)
            easing.$default = $jssoreasing$.$easeswing;

        var duration = transition.$framescount;

        var cache = easing.$cache;
        if (!cache) {
            var enumerator = $jssor$.$extend({}, transition.$easing, transition.$round);
            cache = easing.$cache = {};

            $jssor$.$each(enumerator, function (v, easingname) {
                var easingfunction = easing[easingname] || easing.$default;
                var round = transition.$round[easingname] || 1;

                if (!$jssor$.$isarray(easingfunction.$cache))
                    easingfunction.$cache = [];

                var easingfunctioncache = easingfunction.$cache[duration] = easingfunction.$cache[duration] || [];

                if (!easingfunctioncache[round]) {
                    easingfunctioncache[round] = [0];
                    for (var t = 1; t <= duration; t++) {
                        var tround = t / duration * round;
                        var troundfloor = math.floor(tround);
                        if (tround != troundfloor)
                            tround -= troundfloor;
                        easingfunctioncache[round][t] = easingfunction(tround);
                    }
                }

                cache[easingname] = easingfunctioncache;

            });
        }

        return cache;
    } //geteasing

    //formation definition -------

    function jssorslideshowplayer(slidecontainer, slideelement, slidetransition, begintime, slidecontainerwidth, slidecontainerheight) {
        var _self = this;

        var _block;
        var _startstylesarr = {};
        var _animationstylesarrs = {};
        var _animationblockitems = [];
        var _stylestart;
        var _styleend;
        var _styledif;
        var _chessmodecolumn = slidetransition.$chessmode.$column || 0;
        var _chessmoderow = slidetransition.$chessmode.$row || 0;

        var _blocks = slidetransition.$getblocks(slidecontainerwidth, slidecontainerheight);
        var _formationinstance = getformation(slidetransition);
        var _maxorder = _formationinstance.length - 1;
        var _period = slidetransition.$duration + slidetransition.$delay * _maxorder;
        var _endtime = begintime + _period;

        var _slideout = slidetransition.$slideout;
        var _isin;

        _endtime += $jssor$.$isbrowserchrome() ? 260 : 50;

        _self.$endtime = _endtime;

        _self.$showframe = function (time) {
            time -= begintime;

            var isin = time < _period;

            if (isin || _isin) {
                _isin = isin;

                if (!_slideout)
                    time = _period - time;

                var frameindex = math.ceil(time / slidetransition.$interval);

                $jssor$.$each(_animationstylesarrs, function (value, index) {

                    var itemframeindex = math.max(frameindex, value.$min);
                    itemframeindex = math.min(itemframeindex, value.length - 1);

                    if (value.$lastframeindex != itemframeindex) {
                        if (!value.$lastframeindex && !_slideout) {
                            $jssor$.$showelement(_animationblockitems[index]);
                        }
                        else if (itemframeindex == value.$max && _slideout) {
                            $jssor$.$hideelement(_animationblockitems[index]);
                        }
                        value.$lastframeindex = itemframeindex;
                        $jssor$.$setstylesex(_animationblockitems[index], value[itemframeindex]);
                    }
                });
            }
        };

        function disablehwa(elmt) {
            $jssor$.$disablehwa(elmt);

            var children = $jssor$.$children(elmt);

            $jssor$.$each(children, function (child) {
                disablehwa(child);
            });
        }

        //constructor
        {
            slideelement = $jssor$.$clonenode(slideelement);
            //$jssor$.$removeattribute(slideelement, "id");
            disablehwa(slideelement);
            if ($jssor$.$isbrowserie9earlier()) {
                var hasimage = !slideelement["no-image"];
                var slidechildelements = $jssor$.$findchildrenbytag(slideelement);
                $jssor$.$each(slidechildelements, function (slidechildelement) {
                    if (hasimage || slidechildelement["jssor-slider"])
                        $jssor$.$cssopacity(slidechildelement, $jssor$.$cssopacity(slidechildelement), true);
                });
            }

            $jssor$.$each(_formationinstance, function (formationitems, order) {
                $jssor$.$each(formationitems, function (formationitem) {
                    var row = formationitem[0];
                    var col = formationitem[1];
                    {
                        var columnrow = row + ',' + col;

                        var chesshorizontal = false;
                        var chessvertical = false;
                        var chessrotate = false;

                        if (_chessmodecolumn && col % 2) {
                            if ($jssordirection$.$ishorizontal(_chessmodecolumn)) {
                                chesshorizontal = !chesshorizontal;
                            }
                            if ($jssordirection$.$isvertical(_chessmodecolumn)) {
                                chessvertical = !chessvertical;
                            }

                            if (_chessmodecolumn & 16)
                                chessrotate = !chessrotate;
                        }

                        if (_chessmoderow && row % 2) {
                            if ($jssordirection$.$ishorizontal(_chessmoderow)) {
                                chesshorizontal = !chesshorizontal;
                            }
                            if ($jssordirection$.$isvertical(_chessmoderow)) {
                                chessvertical = !chessvertical;
                            }
                            if (_chessmoderow & 16)
                                chessrotate = !chessrotate;
                        }

                        slidetransition.$top = slidetransition.$top || (slidetransition.$clip & 4);
                        slidetransition.$bottom = slidetransition.$bottom || (slidetransition.$clip & 8);
                        slidetransition.$left = slidetransition.$left || (slidetransition.$clip & 1);
                        slidetransition.$right = slidetransition.$right || (slidetransition.$clip & 2);

                        var topbenchmark = chessvertical ? slidetransition.$bottom : slidetransition.$top;
                        var bottombenchmark = chessvertical ? slidetransition.$top : slidetransition.$bottom;
                        var leftbenchmark = chesshorizontal ? slidetransition.$right : slidetransition.$left;
                        var rightbenchmark = chesshorizontal ? slidetransition.$left : slidetransition.$right;

                        //$jssordebug$.$execute(function () {
                        //    topbenchmark = bottombenchmark = leftbenchmark = rightbenchmark = false;
                        //});

                        slidetransition.$clip = topbenchmark || bottombenchmark || leftbenchmark || rightbenchmark;

                        _styledif = {};
                        _styleend = { $top: 0, $left: 0, $opacity: 1, $width: slidecontainerwidth, $height: slidecontainerheight };
                        _stylestart = $jssor$.$extend({}, _styleend);
                        _block = $jssor$.$extend({}, _blocks[columnrow]);

                        if (slidetransition.$opacity) {
                            _styleend.$opacity = 2 - slidetransition.$opacity;
                        }

                        if (slidetransition.$zindex) {
                            _styleend.$zindex = slidetransition.$zindex;
                            _stylestart.$zindex = 0;
                        }

                        var allowclip = slidetransition.$cols * slidetransition.$rows > 1 || slidetransition.$clip;

                        if (slidetransition.$zoom || slidetransition.$rotate) {
                            var allowrotate = true;
                            if ($jssor$.$isbrowserie() && $jssor$.$browserengineversion() < 9) {
                                if (slidetransition.$cols * slidetransition.$rows > 1)
                                    allowrotate = false;
                                else
                                    allowclip = false;
                            }

                            if (allowrotate) {
                                _styleend.$zoom = slidetransition.$zoom ? slidetransition.$zoom - 1 : 1;
                                _stylestart.$zoom = 1;

                                if ($jssor$.$isbrowserie9earlier() || $jssor$.$isbrowseropera())
                                    _styleend.$zoom = math.min(_styleend.$zoom, 2);

                                var rotate = slidetransition.$rotate;

                                _styleend.$rotate = rotate * 360 * ((chessrotate) ? -1 : 1);
                                _stylestart.$rotate = 0;
                            }
                        }

                        if (allowclip) {
                            if (slidetransition.$clip) {
                                var clipscale = slidetransition.$scaleclip || 1;
                                var blockoffset = _block.$offset = {};
                                if (topbenchmark && bottombenchmark) {
                                    blockoffset.$top = _blocks.$height / 2 * clipscale;
                                    blockoffset.$bottom = -blockoffset.$top;
                                }
                                else if (topbenchmark) {
                                    blockoffset.$bottom = -_blocks.$height * clipscale;
                                }
                                else if (bottombenchmark) {
                                    blockoffset.$top = _blocks.$height * clipscale;
                                }

                                if (leftbenchmark && rightbenchmark) {
                                    blockoffset.$left = _blocks.$width / 2 * clipscale;
                                    blockoffset.$right = -blockoffset.$left;
                                }
                                else if (leftbenchmark) {
                                    blockoffset.$right = -_blocks.$width * clipscale;
                                }
                                else if (rightbenchmark) {
                                    blockoffset.$left = _blocks.$width * clipscale;
                                }
                            }

                            _styledif.$clip = _block;
                            _stylestart.$clip = _blocks[columnrow];
                        }

                        //fly
                        {
                            var chesshor = chesshorizontal ? 1 : -1;
                            var chessver = chessvertical ? 1 : -1;

                            if (slidetransition.x)
                                _styleend.$left += slidecontainerwidth * slidetransition.x * chesshor;

                            if (slidetransition.y)
                                _styleend.$top += slidecontainerheight * slidetransition.y * chessver;
                        }

                        $jssor$.$each(_styleend, function (propertyend, property) {
                            if ($jssor$.$isnumeric(propertyend)) {
                                if (propertyend != _stylestart[property]) {
                                    _styledif[property] = propertyend - _stylestart[property];
                                }
                            }
                        });

                        _startstylesarr[columnrow] = _slideout ? _stylestart : _styleend;

                        var animationstylesarr = [];
                        var virtualframecount = math.round(order * slidetransition.$delay / slidetransition.$interval);
                        _animationstylesarrs[columnrow] = new array(virtualframecount);
                        _animationstylesarrs[columnrow].$min = virtualframecount;

                        var framescount = slidetransition.$framescount;
                        for (var framen = 0; framen <= framescount; framen++) {
                            var styleframen = {};

                            $jssor$.$each(_styledif, function (propertydiff, property) {
                                var propertyeasings = slidetransition.$easinginstance[property] || slidetransition.$easinginstance.$default;
                                var propertyeasingarray = propertyeasings[slidetransition.$round[property] || 1];

                                var propertyduring = slidetransition.$during[property] || [0, 1];
                                var propertyframen = (framen / framescount - propertyduring[0]) / propertyduring[1] * framescount;
                                propertyframen = math.round(math.min(framescount, math.max(propertyframen, 0)));

                                var propertyeasingvalue = propertyeasingarray[propertyframen];

                                if ($jssor$.$isnumeric(propertydiff)) {
                                    styleframen[property] = _stylestart[property] + propertydiff * propertyeasingvalue;
                                }
                                else {
                                    var value = styleframen[property] = $jssor$.$extend({}, _stylestart[property]);
                                    value.$offset = [];
                                    $jssor$.$each(propertydiff.$offset, function (rectx, n) {
                                        var offsetvalue = rectx * propertyeasingvalue;
                                        value.$offset[n] = offsetvalue;
                                        value[n] += offsetvalue;
                                    });
                                }
                            });

                            if (_stylestart.$zoom) {
                                styleframen.$transform = { $rotate: styleframen.$rotate || 0, $scale: styleframen.$zoom, $originalwidth: slidecontainerwidth, $originalheight: slidecontainerheight };
                            }
                            if (styleframen.$clip && slidetransition.$move) {
                                var styleframenclipoffset = styleframen.$clip.$offset;
                                var offsety = (styleframenclipoffset.$top || 0) + (styleframenclipoffset.$bottom || 0);
                                var offsetx = (styleframenclipoffset.$left || 0) + (styleframenclipoffset.$right || 0);

                                styleframen.$left = (styleframen.$left || 0) + offsetx;
                                styleframen.$top = (styleframen.$top || 0) + offsety;
                                styleframen.$clip.$left -= offsetx;
                                styleframen.$clip.$right -= offsetx;
                                styleframen.$clip.$top -= offsety;
                                styleframen.$clip.$bottom -= offsety;
                            }

                            styleframen.$zindex = styleframen.$zindex || 1;

                            _animationstylesarrs[columnrow].push(styleframen);
                        }

                    } //for
                });
            });

            _formationinstance.reverse();
            $jssor$.$each(_formationinstance, function (formationitems) {
                $jssor$.$each(formationitems, function (formationitem) {
                    var row = formationitem[0];
                    var col = formationitem[1];

                    var columnrow = row + ',' + col;

                    var image = slideelement;
                    if (col || row)
                        image = $jssor$.$clonenode(slideelement);

                    $jssor$.$setstyles(image, _startstylesarr[columnrow]);
                    $jssor$.$cssoverflow(image, "hidden");

                    $jssor$.$cssposition(image, "absolute");
                    slidecontainer.$addclipelement(image);
                    _animationblockitems[columnrow] = image;
                    $jssor$.$showelement(image, !_slideout);
                });
            });
        }
    }

    //jssorslideshowrunner++++++++
    var _slideshowrunnercount = 1;
    $jssorslideshowrunner$ = window.$jssorslideshowrunner$ = function (slidecontainer, slidecontainerwidth, slidecontainerheight, slideshowoptions, handletoucheventonly) {

        var _selfslideshowrunner = this;

        //var _state = 0; //-1 fullfill, 0 clean, 1 initializing, 2 stay, 3 playing
        var _endtime;

        var _sliderframecount;

        var _slideshowplayerbelow;
        var _slideshowplayerabove;

        var _previtem;
        var _slideitem;

        var _transitionindex = 0;
        var _transitionsorder = slideshowoptions.$transitionsorder;

        var _slideshowtransition;

        var _slideshowperformance = 8;

        function slideshowprocessor() {
            var _selfslideshowprocessor = this;
            var _currenttime = 0;

            $jssoranimator$.call(_selfslideshowprocessor, 0, _endtime);

            _selfslideshowprocessor.$onpositionchange = function (oldposition, newposition) {
                if ((newposition - _currenttime) > _slideshowperformance) {
                    _currenttime = newposition;

                    _slideshowplayerabove && _slideshowplayerabove.$showframe(newposition);
                    _slideshowplayerbelow && _slideshowplayerbelow.$showframe(newposition);
                }
            };

            _selfslideshowprocessor.$transition = _slideshowtransition;
        }

        //member functions
        _selfslideshowrunner.$gettransition = function (slidecount) {
            var n = 0;

            var transitions = slideshowoptions.$transitions;

            var transitioncount = transitions.length;

            if (_transitionsorder) { /*sequence*/
                //if (transitioncount > slidecount && ($jssor$.$isbrowserchrome() || $jssor$.$isbrowsersafari() || $jssor$.$isbrowserfirefox())) {
                //    transitioncount -= transitioncount % slidecount;
                //}
                n = _transitionindex++ % transitioncount;
            }
            else { /*random*/
                n = math.floor(math.random() * transitioncount);
            }

            transitions[n] && (transitions[n].$index = n);

            return transitions[n];
        };

        _selfslideshowrunner.$initialize = function (slideindex, previndex, slideitem, previtem, slideshowtransition) {
            $jssordebug$.$execute(function () {
                if (_slideshowplayerbelow) {
                    $jssordebug$.$fail("slideshow runner has not been cleared.");
                }
            });

            _slideshowtransition = slideshowtransition;

            slideshowtransition = ensuretransitioninstance(slideshowtransition, _slideshowperformance);

            _slideitem = slideitem;
            _previtem = previtem;

            var prevslideelement = previtem.$item;
            var currentslideelement = slideitem.$item;
            prevslideelement["no-image"] = !previtem.$image;
            currentslideelement["no-image"] = !slideitem.$image;

            var slideelementabove = prevslideelement;
            var slideelementbelow = currentslideelement;

            var slidetransitionabove = slideshowtransition;
            var slidetransitionbelow = slideshowtransition.$brother || ensuretransitioninstance({}, _slideshowperformance);

            if (!slideshowtransition.$slideout) {
                slideelementabove = currentslideelement;
                slideelementbelow = prevslideelement;
            }

            var shift = slidetransitionbelow.$shift || 0;

            _slideshowplayerbelow = new jssorslideshowplayer(slidecontainer, slideelementbelow, slidetransitionbelow, math.max(shift - slidetransitionbelow.$interval, 0), slidecontainerwidth, slidecontainerheight);
            _slideshowplayerabove = new jssorslideshowplayer(slidecontainer, slideelementabove, slidetransitionabove, math.max(slidetransitionbelow.$interval - shift, 0), slidecontainerwidth, slidecontainerheight);

            _slideshowplayerbelow.$showframe(0);
            _slideshowplayerabove.$showframe(0);

            _endtime = math.max(_slideshowplayerbelow.$endtime, _slideshowplayerabove.$endtime);

            _selfslideshowrunner.$index = slideindex;
        };

        _selfslideshowrunner.$clear = function () {
            slidecontainer.$clear();
            _slideshowplayerbelow = null;
            _slideshowplayerabove = null;
        };

        _selfslideshowrunner.$getprocessor = function () {
            var slideshowprocessor = null;

            if (_slideshowplayerabove)
                slideshowprocessor = new slideshowprocessor();

            return slideshowprocessor;
        };

        //constructor
        {
            if ($jssor$.$isbrowserie9earlier() || $jssor$.$isbrowseropera() || (handletoucheventonly && $jssor$.$webkitversion() < 537)) {
                _slideshowperformance = 16;
            }

            $jssorobject$.call(_selfslideshowrunner);
            $jssoranimator$.call(_selfslideshowrunner, -10000000, 10000000);

            $jssordebug$.$livestamp(_selfslideshowrunner, "slideshow_runner_" + _slideshowrunnercount++);
        }
    };
    //jssorslideshowrunner--------

    //jssorslider
    function jssorslider(elmt, options) {
        var _selfslider = this;

        //private classes
        function conveyor() {
            var _selfconveyor = this;
            $jssoranimator$.call(_selfconveyor, -100000000, 200000000);

            _selfconveyor.$getcurrentslideinfo = function () {
                var positiondisplay = _selfconveyor.$getposition_display();
                var virtualindex = math.floor(positiondisplay);
                var slideindex = getrealindex(virtualindex);
                var slideposition = positiondisplay - math.floor(positiondisplay);

                return { $index: slideindex, $virtualindex: virtualindex, $position: slideposition };
            };

            _selfconveyor.$onpositionchange = function (oldposition, newposition) {

                var index = math.floor(newposition);
                if (index != newposition && newposition > oldposition)
                    index++;

                resetnavigator(index, true);

                _selfslider.$triggerevent(jssorslider.$evt_position_change, getrealindex(newposition), getrealindex(oldposition), newposition, oldposition);
            };
        }

        //carousel
        function carousel() {
            var _selfcarousel = this;

            $jssoranimator$.call(_selfcarousel, 0, 0, { $looplength: _slidecount });

            //carousel constructor
            {
                $jssor$.$each(_slideitems, function (slideitem) {
                    (_loop & 1) && slideitem.$setlooplength(_slidecount);
                    _selfcarousel.$chain(slideitem);
                    slideitem.$shift(_parkingposition / _steplength);
                });
            }
        }
        //carousel

        //slideshow
        function slideshow() {
            var _selfslideshow = this;
            var _wrapper = _slidecontainer.$elmt;

            $jssoranimator$.call(_selfslideshow, -1, 2, { $easing: $jssoreasing$.$easelinear, $setter: { $position: setposition }, $looplength: _slidecount }, _wrapper, { $position: 1 }, { $position: -1 });

            _selfslideshow.$wrapper = _wrapper;

            //slideshow constructor
            {
                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_slidecontainer.$elmt, "debug-id", "slide_container");
                });
            }
        }
        //slideshow

        //carouselplayer
        function carouselplayer(carousel, slideshow) {
            var _selfcarouselplayer = this;
            var _fromposition;
            var _toposition;
            var _duration;
            var _standby;
            var _standbyposition;

            $jssoranimator$.call(_selfcarouselplayer, -100000000, 200000000, { $intervalmax: 100 });

            _selfcarouselplayer.$onstart = function () {
                _issliding = true;
                _loadingticket = null;

                //evt_swipe_start
                _selfslider.$triggerevent(jssorslider.$evt_swipe_start, getrealindex(_conveyor.$getposition()), _conveyor.$getposition());
            };

            _selfcarouselplayer.$onstop = function () {

                _issliding = false;
                _standby = false;

                var currentslideinfo = _conveyor.$getcurrentslideinfo();

                //evt_swipe_end
                _selfslider.$triggerevent(jssorslider.$evt_swipe_end, getrealindex(_conveyor.$getposition()), _conveyor.$getposition());

                if (!currentslideinfo.$position) {
                    onpark(currentslideinfo.$virtualindex, _currentslideindex);
                }
            };

            _selfcarouselplayer.$onpositionchange = function (oldposition, newposition) {

                var toposition;

                if (_standby)
                    toposition = _standbyposition;
                else {
                    toposition = _toposition;

                    if (_duration) {
                        var interposition = newposition / _duration;
                        //if ($jssor$.$isbrowserchrome() || $jssor$.$isbrowserfirefox()) {
                        //    math.round(interposition * 8 / _duration) / 8 * _duration;

                        //    if ($jssor$.$browserversion() < 38)
                        //        interposition = parsefloat(interposition.tofixed(4));
                        //}
                        toposition = _options.$slideeasing(interposition) * (_toposition - _fromposition) + _fromposition;
                    }
                }

                _conveyor.$gotoposition(toposition);
            };

            _selfcarouselplayer.$playcarousel = function (fromposition, toposition, duration, callback) {
                $jssordebug$.$execute(function () {
                    if (_selfcarouselplayer.$isplaying())
                        $jssordebug$.$fail("the carousel is already playing.");
                });

                _fromposition = fromposition;
                _toposition = toposition;
                _duration = duration;

                _conveyor.$gotoposition(fromposition);
                _selfcarouselplayer.$gotoposition(0);

                _selfcarouselplayer.$playtoposition(duration, callback);
            };

            _selfcarouselplayer.$standby = function (standbyposition) {
                _standby = true;
                _standbyposition = standbyposition;
                _selfcarouselplayer.$play(standbyposition, null, true);
            };

            _selfcarouselplayer.$setstandbyposition = function (standbyposition) {
                _standbyposition = standbyposition;
            };

            _selfcarouselplayer.$movecarouselto = function (position) {
                _conveyor.$gotoposition(position);
            };

            //carouselplayer constructor
            {
                _conveyor = new conveyor();

                _conveyor.$combine(carousel);
                _conveyor.$combine(slideshow);
            }
        }
        //carouselplayer

        //slidecontainer
        function slidecontainer() {
            var _self = this;
            var elmt = createpanel();

            $jssor$.$csszindex(elmt, 0);
            $jssor$.$css(elmt, "pointerevents", "none");

            _self.$elmt = elmt;

            _self.$addclipelement = function (clipelement) {
                $jssor$.$appendchild(elmt, clipelement);
                $jssor$.$showelement(elmt);
            };

            _self.$clear = function () {
                $jssor$.$hideelement(elmt);
                $jssor$.$clearinnerhtml(elmt);
            };
        }
        //slidecontainer

        //slideitem
        function slideitem(slideelmt, slideindex) {

            var _selfslideitem = this;

            var _captionsliderin;
            var _captionsliderout;
            var _captionslidercurrent;
            var _iscaptionsliderplayingwhendragstart;

            var _wrapper;
            var _baseelement = slideelmt;

            var _loadingscreen;

            var _imageitem;
            var _imageelmts = [];
            var _linkitemorigin;
            var _linkitem;
            var _imageloading;
            var _imageloaded;
            var _imagelazyloading;
            var _contentrefreshed;

            var _processor;

            var _playerinstanceelement;
            var _playerinstance;

            var _sequencenumber;    //for debug only

            $jssoranimator$.call(_selfslideitem, -_displaypieces, _displaypieces + 1, { $slideitemanimator: true });

            function resetcaptionslider(fresh) {
                _captionsliderout && _captionsliderout.$revert();
                _captionsliderin && _captionsliderin.$revert();

                refreshcontent(slideelmt, fresh);
                _contentrefreshed = true;

                _captionsliderin = new _captionslideroptions.$class(slideelmt, _captionslideroptions, 1);
                $jssordebug$.$livestamp(_captionsliderin, "caption_slider_" + _captionslidercount + "_in");
                _captionsliderout = new _captionslideroptions.$class(slideelmt, _captionslideroptions);
                $jssordebug$.$livestamp(_captionsliderout, "caption_slider_" + _captionslidercount + "_out");

                $jssordebug$.$execute(function () {
                    _captionslidercount++;
                });

                _captionsliderout.$gotobegin();
                _captionsliderin.$gotobegin();
            }

            function ensurecaptionsliderversion() {
                if (_captionsliderin.$version < _captionslideroptions.$version) {
                    resetcaptionslider();
                }
            }

            //event handling begin
            function loadimagecompleteeventhandler(completecallback, loadingscreen, image) {
                if (!_imageloaded) {
                    _imageloaded = true;

                    if (_imageitem && image) {
                        var imagewidth = image.width;
                        var imageheight = image.height;
                        var fillwidth = imagewidth;
                        var fillheight = imageheight;

                        if (imagewidth && imageheight && _options.$fillmode) {

                            //0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
                            if (_options.$fillmode & 3 && (!(_options.$fillmode & 4) || imagewidth > _slidewidth || imageheight > _slideheight)) {
                                var fitheight = false;
                                var ratio = _slidewidth / _slideheight * imageheight / imagewidth;

                                if (_options.$fillmode & 1) {
                                    fitheight = (ratio > 1);
                                }
                                else if (_options.$fillmode & 2) {
                                    fitheight = (ratio < 1);
                                }
                                fillwidth = fitheight ? imagewidth * _slideheight / imageheight : _slidewidth;
                                fillheight = fitheight ? _slideheight : imageheight * _slidewidth / imagewidth;
                            }

                            $jssor$.$csswidth(_imageitem, fillwidth);
                            $jssor$.$cssheight(_imageitem, fillheight);
                            $jssor$.$csstop(_imageitem, (_slideheight - fillheight) / 2);
                            $jssor$.$cssleft(_imageitem, (_slidewidth - fillwidth) / 2);
                        }

                        $jssor$.$cssposition(_imageitem, "absolute");

                        _selfslider.$triggerevent(jssorslider.$evt_load_end, slideitem);
                    }
                }

                $jssor$.$hideelement(loadingscreen);
                completecallback && completecallback(_selfslideitem);
            }

            function loadslideshowimagecompleteeventhandler(nextindex, nextitem, slideshowtransition, loadingticket) {
                if (loadingticket == _loadingticket && _currentslideindex == slideindex && _autoplay) {
                    if (!_frozen) {
                        var nextrealindex = getrealindex(nextindex);
                        _slideshowrunner.$initialize(nextrealindex, slideindex, nextitem, _selfslideitem, slideshowtransition);
                        nextitem.$hidecontentforslideshow();
                        _slideshow.$locate(nextrealindex, 1);
                        _slideshow.$gotoposition(nextrealindex);
                        _carouselplayer.$playcarousel(nextindex, nextindex, 0);
                    }
                }
            }

            function slidereadyeventhandler(loadingticket) {
                if (loadingticket == _loadingticket && _currentslideindex == slideindex) {

                    if (!_processor) {
                        var slideshowprocessor = null;
                        if (_slideshowrunner) {
                            if (_slideshowrunner.$index == slideindex)
                                slideshowprocessor = _slideshowrunner.$getprocessor();
                            else
                                _slideshowrunner.$clear();
                        }

                        ensurecaptionsliderversion();

                        _processor = new processor(slideelmt, slideindex, slideshowprocessor, _selfslideitem.$getcaptionsliderin(), _selfslideitem.$getcaptionsliderout());
                        _processor.$setplayer(_playerinstance);
                    }

                    !_processor.$isplaying() && _processor.$replay();
                }
            }

            function parkeventhandler(currentindex, previousindex, manualactivate) {
                if (currentindex == slideindex) {

                    if (currentindex != previousindex)
                        _slideitems[previousindex] && _slideitems[previousindex].$parkout();
                    else
                        !manualactivate && _processor && _processor.$adjustidleonpark();

                    _playerinstance && _playerinstance.$enable();

                    //park in
                    var loadingticket = _loadingticket = $jssor$.$getnow();
                    _selfslideitem.$loadimage($jssor$.$createcallback(null, slidereadyeventhandler, loadingticket));
                }
                else {
                    var distance = math.abs(slideindex - currentindex);
                    var loadrange = _displaypieces + _options.$lazyloading;
                    if (!_imagelazyloading || distance <= loadrange || _slidecount - distance <= loadrange) {
                        _selfslideitem.$loadimage();
                    }
                }
            }

            function swipestarteventhandler() {
                if (_currentslideindex == slideindex && _processor) {
                    _processor.$stop();
                    _playerinstance && _playerinstance.$quit();
                    _playerinstance && _playerinstance.$disable();
                    _processor.$openslideshowpanel();
                }
            }

            function freezeeventhandler() {
                if (_currentslideindex == slideindex && _processor) {
                    _processor.$stop();
                }
            }

            function linkclickeventhandler(event) {
                if (_lastdragsucceded) {
                    $jssor$.$cancelevent(event);
                }
                else {
                    _selfslider.$triggerevent(jssorslider.$evt_click, slideindex, event);
                }
            }

            function playeravailableeventhandler() {
                _playerinstance = _playerinstanceelement.pinstance;
                _processor && _processor.$setplayer(_playerinstance);
            }

            _selfslideitem.$loadimage = function (completecallback, loadingscreen) {
                loadingscreen = loadingscreen || _loadingscreen;

                if (_imageelmts.length && !_imageloaded) {

                    $jssor$.$showelement(loadingscreen);

                    if (!_imageloading) {
                        _imageloading = true;
                        _selfslider.$triggerevent(jssorslider.$evt_load_start);

                        $jssor$.$each(_imageelmts, function (imageelmt) {

                            if (!imageelmt.src) {
                                imageelmt.src = $jssor$.$attributeex(imageelmt, "src2");
                                $jssor$.$cssdisplay(imageelmt, imageelmt["display-origin"]);
                            }
                        });
                    }
                    $jssor$.$loadimages(_imageelmts, _imageitem, $jssor$.$createcallback(null, loadimagecompleteeventhandler, completecallback, loadingscreen));
                }
                else {
                    loadimagecompleteeventhandler(completecallback, loadingscreen);
                }
            };

            _selfslideitem.$gofornextslide = function () {
                if (_slideshowrunner) {
                    var slideshowtransition = _slideshowrunner.$gettransition(_slidecount);

                    if (slideshowtransition) {
                        var loadingticket = _loadingticket = $jssor$.$getnow();

                        var nextindex = slideindex + _playreverse;
                        var nextitem = _slideitems[getrealindex(nextindex)];
                        return nextitem.$loadimage($jssor$.$createcallback(null, loadslideshowimagecompleteeventhandler, nextindex, nextitem, slideshowtransition, loadingticket), _loadingscreen);
                    }
                }

                playto(_currentslideindex + _options.$autoplaysteps * _playreverse);
            };

            _selfslideitem.$tryactivate = function () {
                parkeventhandler(slideindex, slideindex, true);
            };

            _selfslideitem.$parkout = function () {
                //park out
                _playerinstance && _playerinstance.$quit();
                _playerinstance && _playerinstance.$disable();
                _selfslideitem.$unhidecontentforslideshow();
                _processor && _processor.$abort();
                _processor = null;
                resetcaptionslider();
            };

            //for debug only
            _selfslideitem.$stampslideitemelements = function (stamp) {
                stamp = _sequencenumber + "_" + stamp;

                $jssordebug$.$execute(function () {
                    if (_imageitem)
                        $jssor$.$attribute(_imageitem, "debug-id", stamp + "_slide_item_image_id");

                    $jssor$.$attribute(slideelmt, "debug-id", stamp + "_slide_item_item_id");
                });

                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_wrapper, "debug-id", stamp + "_slide_item_wrapper_id");
                });

                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_loadingscreen, "debug-id", stamp + "_loading_container_id");
                });
            };

            _selfslideitem.$hidecontentforslideshow = function () {
                $jssor$.$hideelement(slideelmt);
            };

            _selfslideitem.$unhidecontentforslideshow = function () {
                $jssor$.$showelement(slideelmt);
            };

            _selfslideitem.$enableplayer = function () {
                _playerinstance && _playerinstance.$enable();
            };

            function refreshcontent(elmt, fresh, level) {
                if (elmt["jssor-slider"])
                    return;

                level = level || 0;

                if (!_contentrefreshed) {
                    if (elmt.tagname == "img") {
                        _imageelmts.push(elmt);

                        if (!elmt.src) {
                            _imagelazyloading = true;
                            elmt["display-origin"] = $jssor$.$cssdisplay(elmt);
                            $jssor$.$hideelement(elmt);
                        }
                    }
                    if ($jssor$.$isbrowserie9earlier()) {
                        $jssor$.$csszindex(elmt, ($jssor$.$csszindex(elmt) || 0) + 1);
                    }
                    if (_options.$hwa && $jssor$.$webkitversion()) {
                        if (!_istouchdevice || $jssor$.$webkitversion() < 534 || (!_slideshowenabled && !$jssor$.$isbrowserchrome())) {
                            $jssor$.$enablehwa(elmt);
                        }
                    }
                }

                var childelements = $jssor$.$children(elmt);

                $jssor$.$each(childelements, function (childelement, i) {

                    var uattribute = $jssor$.$attributeex(childelement, "u");
                    if (uattribute == "player" && !_playerinstanceelement) {
                        _playerinstanceelement = childelement;
                        if (_playerinstanceelement.pinstance) {
                            playeravailableeventhandler();
                        }
                        else {
                            $jssor$.$addevent(_playerinstanceelement, "dataavailable", playeravailableeventhandler);
                        }
                    }

                    if (uattribute == "caption") {
                        if (!$jssor$.$isbrowserie() && !fresh) {
                            var captionelement = $jssor$.$clonenode(childelement, false, true);
                            $jssor$.$insertbefore(elmt, captionelement, childelement);
                            $jssor$.$removechild(elmt, childelement);
                            childelement = captionelement;

                            fresh = true;
                        }
                    }
                    else if (!_contentrefreshed && !level && !_imageitem && $jssor$.$attributeex(childelement, "u") == "image") {
                        _imageitem = childelement;

                        if (_imageitem) {
                            if (_imageitem.tagname == "a") {
                                _linkitemorigin = _imageitem;
                                $jssor$.$setstyles(_linkitemorigin, _styledef);

                                _linkitem = $jssor$.$clonenode(_imageitem, true);
                                //cancel click event on <a> element when a drag of slide succeeded
                                $jssor$.$addevent(_linkitem, "click", linkclickeventhandler);

                                $jssor$.$setstyles(_linkitem, _styledef);
                                $jssor$.$cssdisplay(_linkitem, "block");
                                $jssor$.$cssopacity(_linkitem, 0);
                                $jssor$.$css(_linkitem, "backgroundcolor", "#000");

                                _imageitem = $jssor$.$findchildbytag(_imageitem, "img");

                                $jssordebug$.$execute(function () {
                                    if (!_imageitem) {
                                        $jssordebug$.$error("slide html code definition error, no 'img' found in a 'image with link' slide.\r\n" + elmt.outerhtml);
                                    }
                                });
                            }
                            _imageitem.border = 0;

                            $jssor$.$setstyles(_imageitem, _styledef);
                        }
                    }

                    refreshcontent(childelement, fresh, level + 1);
                });
            }

            _selfslideitem.$oninneroffsetchange = function (oldoffset, newoffset) {
                var slideposition = _displaypieces - newoffset;

                setposition(_wrapper, slideposition);

                //following lines are for future usage, not ready yet
                //if (!_isdragging || !_iscaptionsliderplayingwhendragstart) {
                //    var _dealwithparallax;
                //    if (iscurrentslideindex(slideindex)) {
                //        if (_captionslideroptions.$playoutmode == 2)
                //            _dealwithparallax = true;
                //    }
                //    else {
                //        if (!_captionslideroptions.$playinmode) {
                //            //playinmode: 0 none
                //            _captionsliderin.$gotoend();
                //        }
                //        //else if (_captionslideroptions.$playinmode == 1) {
                //        //    //playinmode: 1 chain
                //        //    _captionsliderin.$gotobegin();
                //        //}
                //        else if (_captionslideroptions.$playinmode == 2) {
                //            //playinmode: 2 parallel
                //            _dealwithparallax = true;
                //        }
                //    }

                //    if (_dealwithparallax) {
                //        _captionsliderin.$gotoposition((_captionsliderin.$getposition_outerend() - _captionsliderin.$getposition_outerbegin()) * math.abs(newoffset - 1) * .8 + _captionsliderin.$getposition_outerbegin());
                //    }
                //}
            };

            _selfslideitem.$getcaptionsliderin = function () {
                return _captionsliderin;
            };

            _selfslideitem.$getcaptionsliderout = function () {
                return _captionsliderout;
            };

            _selfslideitem.$index = slideindex;

            $jssorobject$.call(_selfslideitem);

            //slideitem constructor
            {

                var thumb = $jssor$.$findchild(slideelmt, "thumb", true);
                if (thumb) {
                    _selfslideitem.$thumb = $jssor$.$clonenode(thumb);
                    $jssor$.$removeattribute(thumb, "id");
                    $jssor$.$hideelement(thumb);
                }
                $jssor$.$showelement(slideelmt);

                _loadingscreen = $jssor$.$clonenode(_loadingcontainer);
                $jssor$.$csszindex(_loadingscreen, 1000);

                //cancel click event on <a> element when a drag of slide succeeded
                $jssor$.$addevent(slideelmt, "click", linkclickeventhandler);

                resetcaptionslider(true);

                _selfslideitem.$image = _imageitem;
                _selfslideitem.$link = _linkitem;

                _selfslideitem.$item = slideelmt;

                _selfslideitem.$wrapper = _wrapper = slideelmt;
                $jssor$.$appendchild(_wrapper, _loadingscreen);

                _selfslider.$on(203, parkeventhandler);
                _selfslider.$on(28, freezeeventhandler);
                _selfslider.$on(24, swipestarteventhandler);

                $jssordebug$.$execute(function () {
                    _sequencenumber = _slideitemcreatedcount++;
                });

                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_wrapper, "debug-id", "slide-" + slideindex);
                });
            }
        }
        //slideitem

        //processor
        function processor(slideelmt, slideindex, slideshowprocessor, captionsliderin, captionsliderout) {

            var _selfprocessor = this;

            var _progressbegin = 0;
            var _slideshowbegin = 0;
            var _slideshowend;
            var _captioninbegin;
            var _idlebegin;
            var _idleend;
            var _progressend;

            var _isslideshowrunning;
            var _isrollingback;

            var _playerinstance;
            var _isplayeronservice;

            var slideitem = _slideitems[slideindex];

            $jssoranimator$.call(_selfprocessor, 0, 0);

            function updatelink() {

                $jssor$.$clearchildren(_linkcontainer);

                if (_showlink && _isslideshowrunning && slideitem.$link) {
                    $jssor$.$appendchild(_linkcontainer, slideitem.$link);
                }

                $jssor$.$showelement(_linkcontainer, !_isslideshowrunning && slideitem.$image);
            }

            function processcompleteeventhandler() {

                if (_isrollingback) {
                    _isrollingback = false;
                    _selfslider.$triggerevent(jssorslider.$evt_rollback_end, slideindex, _idleend, _progressbegin, _idlebegin, _idleend, _progressend);
                    _selfprocessor.$gotoposition(_idlebegin);
                }

                _selfprocessor.$replay();
            }

            function playerswitcheventhandler(isonservice) {
                _isplayeronservice = isonservice;

                _selfprocessor.$stop();
                _selfprocessor.$replay();
            }

            _selfprocessor.$replay = function () {

                var currentposition = _selfprocessor.$getposition_display();

                if (!_isdragging && !_issliding && !_isplayeronservice && _currentslideindex == slideindex) {

                    if (!currentposition) {
                        if (_slideshowend && !_isslideshowrunning) {
                            _isslideshowrunning = true;

                            _selfprocessor.$openslideshowpanel(true);

                            _selfslider.$triggerevent(jssorslider.$evt_slideshow_start, slideindex, _progressbegin, _slideshowbegin, _slideshowend, _progressend);
                        }

                        updatelink();
                    }

                    var toposition;
                    var stateevent = jssorslider.$evt_state_change;

                    if (currentposition != _progressend) {
                        if (currentposition == _idleend) {
                            toposition = _progressend;
                        }
                        else if (currentposition == _idlebegin) {
                            toposition = _idleend;
                        }
                        else if (!currentposition) {
                            toposition = _idlebegin;
                        }
                        else if (currentposition > _idleend) {
                            _isrollingback = true;
                            toposition = _idleend;
                            stateevent = jssorslider.$evt_rollback_start;
                        }
                        else {
                            //continue from break (by drag or lock)
                            toposition = _selfprocessor.$getplaytoposition();
                        }
                    }

                    //$jssordebug$.$execute(function () {
                    //    if (currentposition == _progressend) {
                    //        debugger;
                    //    }
                    //});

                    _selfslider.$triggerevent(stateevent, slideindex, currentposition, _progressbegin, _idlebegin, _idleend, _progressend);

                    var allowautoplay = _autoplay && (!_hovertopause || _notonhover);

                    if (currentposition == _progressend) {
                        (_idleend != _progressend && !(_hovertopause & 12) || allowautoplay) && slideitem.$gofornextslide();
                    }
                    else if (allowautoplay || currentposition != _idleend) {
                        _selfprocessor.$playtoposition(toposition, processcompleteeventhandler);
                    }
                }
            };

            _selfprocessor.$adjustidleonpark = function () {
                if (_idleend == _progressend && _idleend == _selfprocessor.$getposition_display())
                    _selfprocessor.$gotoposition(_idlebegin);
            };

            _selfprocessor.$abort = function () {
                _slideshowrunner && _slideshowrunner.$index == slideindex && _slideshowrunner.$clear();

                var currentposition = _selfprocessor.$getposition_display();
                if (currentposition < _progressend) {
                    _selfslider.$triggerevent(jssorslider.$evt_state_change, slideindex, -currentposition -1, _progressbegin, _idlebegin, _idleend, _progressend);
                }
            };

            _selfprocessor.$openslideshowpanel = function (open) {
                if (slideshowprocessor) {
                    $jssor$.$cssoverflow(_slideshowpanel, open && slideshowprocessor.$transition.$outside ? "" : "hidden");
                }
            };

            _selfprocessor.$oninneroffsetchange = function (oldposition, newposition) {

                if (_isslideshowrunning && newposition >= _slideshowend) {
                    _isslideshowrunning = false;
                    updatelink();
                    slideitem.$unhidecontentforslideshow();
                    _slideshowrunner.$clear();

                    _selfslider.$triggerevent(jssorslider.$evt_slideshow_end, slideindex, _progressbegin, _slideshowbegin, _slideshowend, _progressend);
                }

                _selfslider.$triggerevent(jssorslider.$evt_progress_change, slideindex, newposition, _progressbegin, _idlebegin, _idleend, _progressend);
            };

            _selfprocessor.$setplayer = function (playerinstance) {
                if (playerinstance && !_playerinstance) {
                    _playerinstance = playerinstance;

                    playerinstance.$on($jssorplayer$.$evt_switch, playerswitcheventhandler);
                }
            };

            //processor constructor
            {
                if (slideshowprocessor) {
                    _selfprocessor.$chain(slideshowprocessor);
                }

                _slideshowend = _selfprocessor.$getposition_outerend();
                _captioninbegin = _selfprocessor.$getposition_outerend();
                _selfprocessor.$chain(captionsliderin);
                _idlebegin = captionsliderin.$getposition_outerend();
                _idleend = _idlebegin + ($jssor$.$parsefloat($jssor$.$attributeex(slideelmt, "idle")) || _options.$autoplayinterval);

                captionsliderout.$shift(_idleend);
                _selfprocessor.$combine(captionsliderout);
                _progressend = _selfprocessor.$getposition_outerend();
            }
        }
        //processor
        //private classes

        function setposition(elmt, position) {
            var orientation = _dragorientation > 0 ? _dragorientation : _playorientation;
            var x = _steplengthx * position * (orientation & 1);
            var y = _steplengthy * position * ((orientation >> 1) & 1);

            if ($jssor$.$isbrowserchrome() && $jssor$.$browserversion() < 38) {
                x = x.tofixed(3);
                y = y.tofixed(3);
            }
            else {
                x = math.round(x);
                y = math.round(y);
            }

            if ($jssor$.$isbrowserie() && $jssor$.$browserversion() >= 10 && $jssor$.$browserversion() < 11) {
                elmt.style.mstransform = "translate(" + x + "px, " + y + "px)";
            }
            else if ($jssor$.$isbrowserchrome() && $jssor$.$browserversion() >= 30 && $jssor$.$browserversion() < 34) {
                elmt.style.webkittransition = "transform 0s";
                elmt.style.webkittransform = "translate3d(" + x + "px, " + y + "px, 0px) perspective(2000px)";
            }
            else {
                $jssor$.$cssleft(elmt, x);
                $jssor$.$csstop(elmt, y);
            }
        }

        //event handling begin

        function onmousedown(event) {
            var tagname = $jssor$.$eventsrc(event).tagname;
            if (!_dragorientationregistered && tagname != "input" && tagname != "textarea" && tagname != "select" && registerdrag()) {
                ondragstart(event);
            }
        }

        function recordfreezepoint() {

            _carouselplaying_onfreeze = _issliding;
            _playtoposition_onfreeze = _carouselplayer.$getplaytoposition();
            _position_onfreeze = _conveyor.$getposition();

        }

        function freeze() {

            recordfreezepoint();

            if (_isdragging || !_notonhover && (_hovertopause & 12)) {
                _carouselplayer.$stop();

                _selfslider.$triggerevent(jssorslider.$evt_freeze);
            }

        }

        function unfreeze(bydrag) {

            bydrag && recordfreezepoint();

            if (!_isdragging && (_notonhover || !(_hovertopause & 12)) && !_carouselplayer.$isplaying()) {

                var currentposition = _conveyor.$getposition();
                var toposition = math.ceil(_position_onfreeze);

                if (bydrag && math.abs(_dragoffsettotal) >= _options.$mindragoffsettoslide) {
                    toposition = math.ceil(currentposition);
                    toposition += _dragindexadjust;
                }

                if (!(_loop & 1)) {
                    toposition = math.min(_slidecount - _displaypieces, math.max(toposition, 0));
                }

                var t = math.abs(toposition - currentposition);
                t = 1 - math.pow(1 - t, 5);

                if (!_lastdragsucceded && _carouselplaying_onfreeze) {
                    _carouselplayer.$continue(_playtoposition_onfreeze);
                }
                else if (currentposition == toposition) {
                    _currentslideitem.$enableplayer();
                    _currentslideitem.$tryactivate();
                }
                else {

                    _carouselplayer.$playcarousel(currentposition, toposition, t * _slideduration);
                }
            }
        }

        function ondragstart(event) {

            _isdragging = true;
            _draginvalid = false;
            _loadingticket = null;

            $jssor$.$addevent(document, _moveevent, ondragmove);

            _lasttimemovebydrag = $jssor$.$getnow() - 50;

            _lastdragsucceded = 0;
            freeze();

            if (!_carouselplaying_onfreeze)
                _dragorientation = 0;

            if (_handletoucheventonly) {
                var touchpoint = event.touches[0];
                _dragstartmousex = touchpoint.clientx;
                _dragstartmousey = touchpoint.clienty;
            }
            else {
                var mousepoint = $jssor$.$mouseposition(event);

                _dragstartmousex = mousepoint.x;
                _dragstartmousey = mousepoint.y;

                $jssor$.$cancelevent(event);
            }

            _dragoffsettotal = 0;
            _dragoffsetlasttime = 0;
            _dragindexadjust = 0;

            //trigger evt_dragstart
            _selfslider.$triggerevent(jssorslider.$evt_drag_start, getrealindex(_position_onfreeze), _position_onfreeze, event);
        }

        function ondragmove(event) {
            if (_isdragging && (!$jssor$.$isbrowserie9earlier() || event.button)) {
                var actionpoint;

                if (_handletoucheventonly) {
                    var touches = event.touches;
                    if (touches && touches.length > 0) {
                        actionpoint = { x: touches[0].clientx, y: touches[0].clienty };
                    }
                }
                else {
                    actionpoint = $jssor$.$mouseposition(event);
                }

                if (actionpoint) {
                    var distancex = actionpoint.x - _dragstartmousex;
                    var distancey = actionpoint.y - _dragstartmousey;


                    if (math.floor(_position_onfreeze) != _position_onfreeze)
                        _dragorientation = _dragorientation || (_playorientation & _dragorientationregistered);

                    if ((distancex || distancey) && !_dragorientation) {
                        if (_dragorientationregistered == 3) {
                            if (math.abs(distancey) > math.abs(distancex)) {
                                _dragorientation = 2;
                            }
                            else
                                _dragorientation = 1;
                        }
                        else {
                            _dragorientation = _dragorientationregistered;
                        }

                        if (_istouchdevice && _dragorientation == 1 && math.abs(distancey) - math.abs(distancex) > 3) {
                            _draginvalid = true;
                        }
                    }

                    if (_dragorientation) {
                        var distance = distancey;
                        var steplength = _steplengthy;

                        if (_dragorientation == 1) {
                            distance = distancex;
                            steplength = _steplengthx;
                        }

                        if (!(_loop & 1)) {
                            if (distance > 0) {
                                var normaldistance = steplength * _currentslideindex;
                                var sqrtdistance = distance - normaldistance;
                                if (sqrtdistance > 0) {
                                    distance = normaldistance + math.sqrt(sqrtdistance) * 5;
                                }
                            }

                            if (distance < 0) {
                                var normaldistance = steplength * (_slidecount - _displaypieces - _currentslideindex);
                                var sqrtdistance = -distance - normaldistance;

                                if (sqrtdistance > 0) {
                                    distance = -normaldistance - math.sqrt(sqrtdistance) * 5;
                                }
                            }
                        }

                        if (_dragoffsettotal - _dragoffsetlasttime < -2) {
                            _dragindexadjust = 0;
                        }
                        else if (_dragoffsettotal - _dragoffsetlasttime > 2) {
                            _dragindexadjust = -1;
                        }

                        _dragoffsetlasttime = _dragoffsettotal;
                        _dragoffsettotal = distance;
                        _positiontogobydrag = _position_onfreeze - _dragoffsettotal / steplength / (_scaleratio || 1);

                        if (_dragoffsettotal && _dragorientation && !_draginvalid) {
                            $jssor$.$cancelevent(event);
                            if (!_issliding) {
                                _carouselplayer.$standby(_positiontogobydrag);
                            }
                            else
                                _carouselplayer.$setstandbyposition(_positiontogobydrag);
                        }
                        else if ($jssor$.$isbrowserie9earlier()) {
                            $jssor$.$cancelevent(event);
                        }
                    }
                }
            }
            else {
                ondragend(event);
            }
        }

        function ondragend(event) {
            unregisterdrag();

            if (_isdragging) {

                _isdragging = false;

                _lasttimemovebydrag = $jssor$.$getnow();

                $jssor$.$removeevent(document, _moveevent, ondragmove);

                _lastdragsucceded = _dragoffsettotal;

                _lastdragsucceded && $jssor$.$cancelevent(event);

                _carouselplayer.$stop();

                var currentposition = _conveyor.$getposition();

                //trigger evt_drag_end
                _selfslider.$triggerevent(jssorslider.$evt_drag_end, getrealindex(currentposition), currentposition, getrealindex(_position_onfreeze), _position_onfreeze, event);

                unfreeze(true);
            }
        }
        //event handling end

        function setcurrentslideindex(index) {
            _prevslideitem = _slideitems[_currentslideindex];
            _previousslideindex = _currentslideindex;
            _currentslideindex = getrealindex(index);
            _currentslideitem = _slideitems[_currentslideindex];
            resetnavigator(index);
            return _currentslideindex;
        }

        function onpark(slideindex, previndex) {
            _dragorientation = 0;

            setcurrentslideindex(slideindex);

            //trigger evt_park
            _selfslider.$triggerevent(jssorslider.$evt_park, getrealindex(slideindex), previndex);
        }

        function resetnavigator(index, temp) {
            _tempslideindex = index;
            $jssor$.$each(_navigators, function (navigator) {
                navigator.$setcurrentindex(getrealindex(index), index, temp);
            });
        }

        function registerdrag() {
            var dragregistry = jssorslider.$dragregistry || 0;
            var dragorientation = _dragenabled;
            if (_istouchdevice)
                (dragorientation & 1) && (dragorientation &= 1);
            jssorslider.$dragregistry |= dragorientation;

            return (_dragorientationregistered = dragorientation & ~dragregistry);
        }

        function unregisterdrag() {
            if (_dragorientationregistered) {
                jssorslider.$dragregistry &= ~_dragenabled;
                _dragorientationregistered = 0;
            }
        }

        function createpanel() {
            var div = $jssor$.$creatediv();

            $jssor$.$setstyles(div, _styledef);
            $jssor$.$cssposition(div, "absolute");

            return div;
        }

        function getrealindex(index) {
            return (index % _slidecount + _slidecount) % _slidecount;
        }

        function iscurrentslideindex(index) {
            return getrealindex(index) == _currentslideindex;
        }

        function ispreviousslideindex(index) {
            return getrealindex(index) == _previousslideindex;
        }

        //navigation request handler
        function navigationclickhandler(index, relative) {
            if (relative) {
                if (!_loop) {
                    //stop at threshold
                    index = math.min(math.max(index + _tempslideindex, 0), _slidecount - _displaypieces);
                    relative = false;
                }
                else if (_loop & 2) {
                    //rewind
                    index = getrealindex(index + _tempslideindex);
                    relative = false;
                }
            }
            playto(index, _options.$slideduration, relative);
        }

        function shownavigators() {
            $jssor$.$each(_navigators, function (navigator) {
                navigator.$show(navigator.$options.$chancetoshow <= _notonhover);
            });
        }

        function maincontainermouseleaveeventhandler() {
            if (!_notonhover) {

                //$jssordebug$.$log("mouseleave");

                _notonhover = 1;

                shownavigators();

                if (!_isdragging) {
                    (_hovertopause & 12) && unfreeze();
                    (_hovertopause & 3) && _slideitems[_currentslideindex].$tryactivate();
                }
            }
        }

        function maincontainermouseentereventhandler() {

            if (_notonhover) {

                //$jssordebug$.$log("mouseenter");

                _notonhover = 0;

                shownavigators();

                _isdragging || !(_hovertopause & 12) || freeze();
            }
        }

        function adjustslidescontainersize() {
            _styledef = { $width: _slidewidth, $height: _slideheight, $top: 0, $left: 0 };

            $jssor$.$each(_slideelmts, function (slideelmt, i) {

                $jssor$.$setstyles(slideelmt, _styledef);
                $jssor$.$cssposition(slideelmt, "absolute");
                $jssor$.$cssoverflow(slideelmt, "hidden");

                $jssor$.$hideelement(slideelmt);
            });

            $jssor$.$setstyles(_loadingcontainer, _styledef);
        }

        function playtooffset(offset, slideduration) {
            playto(offset, slideduration, true);
        }

        function playto(slideindex, slideduration, relative) {
            ///	<summary>
            ///		playto( slideindex [, slideduration] ); //play slider to position 'slideindex' within a period calculated base on 'slideduration'.
            ///	</summary>
            ///	<param name="slideindex" type="number">
            ///		slide slideindex or position will be playing to
            ///	</param>
            ///	<param name="slideduration" type="number" optional="true">
            ///		base slide duration in milliseconds to calculate the whole duration to complete this play request.
            ///	    default value is '$slideduration' value which is specified when initialize the slider.
            ///	</param>
            /// http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
            /// http://msdn.microsoft.com/en-us/library/vstudio/hh542720.aspx
            if (_carouselenabled && (!_isdragging || _options.$naviquitdrag)) {
                _issliding = true;
                _isdragging = false;
                _carouselplayer.$stop();

                {
                    //slide duration
                    if (slideduration == undefined)
                        slideduration = _slideduration;

                    var positiondisplay = _carousel.$getposition_display();
                    var positionto = slideindex;
                    if (relative) {
                        positionto = positiondisplay + slideindex;
                        if (slideindex > 0)
                            positionto = math.ceil(positionto);
                        else
                            positionto = math.floor(positionto);
                    }

                    if (!_loop) {
                        //stop at threshold
                        positionto = math.max(0, math.min(positionto, _slidecount - _displaypieces));
                    }
                    else if (_loop & 2) {
                        //rewind
                        positionto = getrealindex(positionto);
                    }

                    var positionoffset = (positionto - positiondisplay) % _slidecount;
                    positionto = positiondisplay + positionoffset;

                    var duration = positiondisplay == positionto ? 0 : slideduration * math.abs(positionoffset);
                    duration = math.min(duration, slideduration * _displaypieces * 1.5);

                    _carouselplayer.$playcarousel(positiondisplay, positionto, duration || 1);
                }
            }
        }

        //private functions

        //member functions

        _selfslider.$playto = playto;

        _selfslider.$goto = function (slideindex) {
            ///	<summary>
            ///		instance.$goto( slideindex );   //go to the specifed slide immediately with no play.
            ///	</summary>
            playto(slideindex, 1);
        };

        _selfslider.$next = function () {
            ///	<summary>
            ///		instance.$next();   //play the slider to next slide.
            ///	</summary>
            playtooffset(1);
        };

        _selfslider.$prev = function () {
            ///	<summary>
            ///		instance.$prev();   //play the slider to previous slide.
            ///	</summary>
            playtooffset(-1);
        };

        _selfslider.$pause = function () {
            ///	<summary>
            ///		instance.$pause();   //pause the slider, prevent it from auto playing.
            ///	</summary>
            _autoplay = false;
        };

        _selfslider.$play = function () {
            ///	<summary>
            ///		instance.$play();   //start auto play if the slider is currently paused.
            ///	</summary>
            if (!_autoplay) {
                _autoplay = true;
                _slideitems[_currentslideindex] && _slideitems[_currentslideindex].$tryactivate();
            }
        };

        _selfslider.$setslideshowtransitions = function (transitions) {
            ///	<summary>
            ///		instance.$setslideshowtransitions( transitions );   //reset slideshow transitions for the slider.
            ///	</summary>
            $jssordebug$.$execute(function () {
                if (!transitions || !transitions.length) {
                    $jssordebug$.$error("can not set slideshow transitions, no transitions specified.");
                }
            });

            $jssor$.$translatetransitions(transitions);    //for old transition compatibility
            _options.$slideshowoptions.$transitions = transitions;
        };

        _selfslider.$setcaptiontransitions = function (transitions) {
            ///	<summary>
            ///		instance.$setcaptiontransitions( transitions );   //reset caption transitions for the slider.
            ///	</summary>
            $jssordebug$.$execute(function () {
                if (!transitions || !transitions.length) {
                    $jssordebug$.$error("can not set caption transitions, no transitions specified");
                }
            });

            $jssor$.$translatetransitions(transitions);    //for old transition compatibility
            _captionslideroptions.$captiontransitions = transitions;
            _captionslideroptions.$version = $jssor$.$getnow();
        };

        _selfslider.$slidescount = function () {
            ///	<summary>
            ///		instance.$slidescount();   //retrieve slides count of the slider.
            ///	</summary>
            return _slideelmts.length;
        };

        _selfslider.$currentindex = function () {
            ///	<summary>
            ///		instance.$currentindex();   //retrieve current slide index of the slider.
            ///	</summary>
            return _currentslideindex;
        };

        _selfslider.$isautoplaying = function () {
            ///	<summary>
            ///		instance.$isautoplaying();   //retrieve auto play status of the slider.
            ///	</summary>
            return _autoplay;
        };

        _selfslider.$isdragging = function () {
            ///	<summary>
            ///		instance.$isdragging();   //retrieve drag status of the slider.
            ///	</summary>
            return _isdragging;
        };

        _selfslider.$issliding = function () {
            ///	<summary>
            ///		instance.$issliding();   //retrieve right<-->left sliding status of the slider.
            ///	</summary>
            return _issliding;
        };

        _selfslider.$ismouseover = function () {
            ///	<summary>
            ///		instance.$ismouseover();   //retrieve mouse over status of the slider.
            ///	</summary>
            return !_notonhover;
        };

        _selfslider.$lastdragsucceded = function () {
            ///	<summary>
            ///		instance.$islastdragsucceded();   //retrieve last drag succeded status, returns 0 if failed, returns drag offset if succeded
            ///	</summary>
            return _lastdragsucceded;
        };

        function originalwidth() {
            ///	<summary>
            ///		instance.$originalwidth();   //retrieve original width of the slider.
            ///	</summary>
            return $jssor$.$csswidth(_scalewrapper || elmt);
        }

        function originalheight() {
            ///	<summary>
            ///		instance.$originalheight();   //retrieve original height of the slider.
            ///	</summary>
            return $jssor$.$cssheight(_scalewrapper || elmt);
        }

        _selfslider.$originalwidth = _selfslider.$getoriginalwidth = originalwidth;

        _selfslider.$originalheight = _selfslider.$getoriginalheight = originalheight;

        function scale(dimension, isheight) {
            ///	<summary>
            ///		instance.$scalewidth();   //retrieve scaled dimension the slider currently displays.
            ///		instance.$scalewidth( dimension );   //scale the slider to new width and keep aspect ratio.
            ///	</summary>

            if (dimension == undefined)
                return $jssor$.$csswidth(elmt);

            $jssordebug$.$execute(function () {
                if (!dimension || dimension < 0) {
                    $jssordebug$.$fail("'$scalewidth' error, 'dimension' should be positive value.");
                }
            });

            if (!_scalewrapper) {
                $jssordebug$.$execute(function () {
                    var originalwidthstr = $jssor$.$css(elmt, "width");
                    var originalheightstr = $jssor$.$css(elmt, "height");
                    var originalwidth = $jssor$.$cssp(elmt, "width");
                    var originalheight = $jssor$.$cssp(elmt, "height");

                    if (!originalwidthstr) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'dimension' of 'outer container' not specified. please specify 'dimension' in pixel. e.g. 'dimension: 600px;'");
                    }

                    if (!originalheightstr) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'height' of 'outer container' not specified. please specify 'height' in pixel. e.g. 'height: 300px;'");
                    }

                    if (originalwidthstr.indexof('%') != -1) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'dimension' of 'outer container' not valid. please specify 'dimension' in pixel. e.g. 'dimension: 600px;'");
                    }

                    if (originalheightstr.indexof('%') != -1) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'height' of 'outer container' not valid. please specify 'height' in pixel. e.g. 'height: 300px;'");
                    }

                    if (!originalwidth) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'dimension' of 'outer container' not valid. 'dimension' of 'outer container' should be positive number. e.g. 'dimension: 600px;'");
                    }

                    if (!originalheight) {
                        $jssordebug$.$fail("cannot scale jssor slider, 'height' of 'outer container' not valid. 'height' of 'outer container' should be positive number. e.g. 'height: 300px;'");
                    }
                });

                var innerwrapper = $jssor$.$creatediv(document);
                $jssor$.$classname(innerwrapper, $jssor$.$classname(elmt));
                $jssor$.$csscsstext(innerwrapper, $jssor$.$csscsstext(elmt));
                $jssor$.$cssdisplay(innerwrapper, "block");

                $jssor$.$cssposition(innerwrapper, "relative");
                $jssor$.$csstop(innerwrapper, 0);
                $jssor$.$cssleft(innerwrapper, 0);
                $jssor$.$cssoverflow(innerwrapper, "visible");

                _scalewrapper = $jssor$.$creatediv(document);

                $jssor$.$cssposition(_scalewrapper, "absolute");
                $jssor$.$csstop(_scalewrapper, 0);
                $jssor$.$cssleft(_scalewrapper, 0);
                $jssor$.$csswidth(_scalewrapper, $jssor$.$csswidth(elmt));
                $jssor$.$cssheight(_scalewrapper, $jssor$.$cssheight(elmt));
                $jssor$.$setstyletransformorigin(_scalewrapper, "0 0");

                $jssor$.$appendchild(_scalewrapper, innerwrapper);

                var children = $jssor$.$children(elmt);
                $jssor$.$appendchild(elmt, _scalewrapper);

                $jssor$.$css(elmt, "backgroundimage", "");

                var nomoveelmts = {
                    "navigator": _bulletnavigatoroptions && _bulletnavigatoroptions.$scale == false,
                    "arrowleft": _arrownavigatoroptions && _arrownavigatoroptions.$scale == false,
                    "arrowright": _arrownavigatoroptions && _arrownavigatoroptions.$scale == false,
                    "thumbnavigator": _thumbnailnavigatoroptions && _thumbnailnavigatoroptions.$scale == false,
                    "thumbwrapper": _thumbnailnavigatoroptions && _thumbnailnavigatoroptions.$scale == false
                };

                $jssor$.$each(children, function (child) {
                    $jssor$.$appendchild(nomoveelmts[$jssor$.$attributeex(child, "u")] ? elmt : innerwrapper, child);
                });
            }

            $jssordebug$.$execute(function () {
                if (!_initialscrollwidth) {
                    _initialscrollwidth = _selfslider.$elmt.scrollwidth;
                }
            });

            _scaleratio = dimension /  (isheight? $jssor$.$cssheight : $jssor$.$csswidth)(_scalewrapper);
            $jssor$.$cssscale(_scalewrapper, _scaleratio);

            var scalewidth = isheight ? (_scaleratio * originalwidth()) : dimension;
            var scaleheight = isheight ? dimension : (_scaleratio * originalheight());

            $jssor$.$csswidth(elmt, scalewidth);
            $jssor$.$cssheight(elmt, scaleheight);

            $jssor$.$each(_navigators, function (navigator) {
                navigator.$relocate(scalewidth, scaleheight);
            });
        }

        _selfslider.$scaleheight = _selfslider.$getscaleheight = function (height) {
            ///	<summary>
            ///		instance.$scaleheight();   //retrieve scaled height the slider currently displays.
            ///		instance.$scaleheight( dimension );   //scale the slider to new height and keep aspect ratio.
            ///	</summary>

            if (height == undefined)
                return $jssor$.$cssheight(elmt);

            scale(height, true);
        };

        _selfslider.$scalewidth = _selfslider.$setscalewidth = _selfslider.$getscalewidth = scale;

        _selfslider.$getvirtualindex = function (index) {
            var parkingindex = math.ceil(getrealindex(_parkingposition / _steplength));
            var displayindex = getrealindex(index - _currentslideindex + parkingindex);

            if (displayindex > _displaypieces) {
                if (index - _currentslideindex > _slidecount / 2)
                    index -= _slidecount;
                else if (index - _currentslideindex <= -_slidecount / 2)
                    index += _slidecount;
            }
            else {
                index = _currentslideindex + displayindex - parkingindex;
            }

            return index;
        };

        //member functions

        $jssorobject$.call(_selfslider);

        $jssordebug$.$execute(function () {
            var outercontainerelmt = $jssor$.$getelement(elmt);
            if (!outercontainerelmt)
                $jssordebug$.$fail("outer container '" + elmt + "' not found.");
        });

        //initialize member variables
        _selfslider.$elmt = elmt = $jssor$.$getelement(elmt);
        //initialize member variables

        var _initialscrollwidth;    //for debug only
        var _captionslidercount = 1;    //for debug only

        var _options = $jssor$.$extend({
            $fillmode: 0,                   //[optional] the way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $lazyloading: 1,                //[optional] for image with  lazy loading format (<img src2="url" .../>), by default it will be loaded only when the slide comes.
            //but an integer value (maybe 0, 1, 2 or 3) indicates that how far of nearby slides should be loaded immediately as well, default value is 1.
            $startindex: 0,                 //[optional] index of slide to display when initialize, default value is 0
            $autoplay: false,               //[optional] whether to auto play, default value is false
            $loop: 1,                       //[optional] enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
            $hwa: true,                     //[optional] enable hardware acceleration or not, default value is true
            $naviquitdrag: true,
            $autoplaysteps: 1,              //[optional] steps to go of every play (this options applys only when slideshow disabled), default value is 1
            $autoplayinterval: 3000,        //[optional] interval to play next slide since the previous stopped if a slideshow is auto playing, default value is 3000
            $pauseonhover: 1,               //[optional] whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $slideduration: 500,            //[optional] specifies default duration (swipe) for slide in milliseconds, default value is 400
            $slideeasing: $jssoreasing$.$easeoutquad,   //[optional] specifies easing for right to left animation, default value is $jssoreasing$.$easeoutquad
            $mindragoffsettoslide: 20,      //[optional] minimum drag offset that trigger slide, default value is 20
            $slidespacing: 0, 				//[optional] space between each slide in pixels, default value is 0
            $displaypieces: 1,              //[optional] number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), default value is 1
            $parkingposition: 0,            //[optional] the offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $uisearchmode: 1,               //[optional] the way (0 parellel, 1 recursive, default value is recursive) to search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc.
            $playorientation: 1,            //[optional] orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $dragorientation: 1             //[optional] orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 both, default value is 1 (note that the $dragorientation should be the same as $playorientation when $displaypieces is greater than 1, or parking position is not 0)

        }, options);

        //sodo statement for development time intellisence only
        $jssordebug$.$execute(function () {
            _options = $jssor$.$extend({
                $arrowkeynavigation: undefined,
                $slidewidth: undefined,
                $slideheight: undefined,
                $slideshowoptions: undefined,
                $captionslideroptions: undefined,
                $bulletnavigatoroptions: undefined,
                $arrownavigatoroptions: undefined,
                $thumbnailnavigatoroptions: undefined
            },
            _options);
        });

        var _playorientation = _options.$playorientation & 3;
        var _playreverse = (_options.$playorientation & 4) / -4 || 1;

        var _slideshowoptions = _options.$slideshowoptions;
        var _captionslideroptions = $jssor$.$extend({ $class: $jssorcaptionsliderbase$, $playinmode: 1, $playoutmode: 1 }, _options.$captionslideroptions);
        $jssor$.$translatetransitions(_captionslideroptions.$captiontransitions); //for old transition compatibility
        var _bulletnavigatoroptions = _options.$bulletnavigatoroptions;
        var _arrownavigatoroptions = _options.$arrownavigatoroptions;
        var _thumbnailnavigatoroptions = _options.$thumbnailnavigatoroptions;

        $jssordebug$.$execute(function () {
            if (_slideshowoptions && !_slideshowoptions.$class) {
                $jssordebug$.$fail("option $slideshowoptions error, class not specified.");
            }
        });

        $jssordebug$.$execute(function () {
            if (_options.$captionslideroptions && !_options.$captionslideroptions.$class) {
                $jssordebug$.$fail("option $captionslideroptions error, class not specified.");
            }
        });

        $jssordebug$.$execute(function () {
            if (_bulletnavigatoroptions && !_bulletnavigatoroptions.$class) {
                $jssordebug$.$fail("option $bulletnavigatoroptions error, class not specified.");
            }
        });

        $jssordebug$.$execute(function () {
            if (_arrownavigatoroptions && !_arrownavigatoroptions.$class) {
                $jssordebug$.$fail("option $arrownavigatoroptions error, class not specified.");
            }
        });

        $jssordebug$.$execute(function () {
            if (_thumbnailnavigatoroptions && !_thumbnailnavigatoroptions.$class) {
                $jssordebug$.$fail("option $thumbnailnavigatoroptions error, class not specified.");
            }
        });

        var _uisearchnodeep = !_options.$uisearchmode;
        var _scalewrapper;
        var _slidescontainer = $jssor$.$findchild(elmt, "slides", _uisearchnodeep);
        var _loadingcontainer = $jssor$.$findchild(elmt, "loading", _uisearchnodeep) || $jssor$.$creatediv(document);

        var _bulletnavigatorcontainer = $jssor$.$findchild(elmt, "navigator", _uisearchnodeep);

        var _arrowleft = $jssor$.$findchild(elmt, "arrowleft", _uisearchnodeep);
        var _arrowright = $jssor$.$findchild(elmt, "arrowright", _uisearchnodeep);

        var _thumbnailnavigatorcontainer = $jssor$.$findchild(elmt, "thumbnavigator", _uisearchnodeep);

        $jssordebug$.$execute(function () {
            //if (_bulletnavigatoroptions && !_bulletnavigatorcontainer) {
            //    throw new error("$bulletnavigatoroptions specified but bullet navigator container (<div u=\"navigator\" ...) not defined.");
            //}
            if (_bulletnavigatorcontainer && !_bulletnavigatoroptions) {
                throw new error("bullet navigator container defined but $bulletnavigatoroptions not specified.");
            }

            //if (_arrownavigatoroptions) {
            //    if (!_arrowleft) {
            //        throw new error("$arrownavigatoroptions specified, but arrowleft (<span u=\"arrowleft\" ...) not defined.");
            //    }

            //    if (!_arrowright) {
            //        throw new error("$arrownavigatoroptions specified, but arrowright (<span u=\"arrowright\" ...) not defined.");
            //    }
            //}

            if ((_arrowleft || _arrowright) && !_arrownavigatoroptions) {
                throw new error("arrowleft or arrowright defined, but $arrownavigatoroptions not specified.");
            }

            //if (_thumbnailnavigatoroptions && !_thumbnailnavigatorcontainer) {
            //    throw new error("$thumbnailnavigatoroptions specified, but thumbnail navigator container (<div u=\"thumbnavigator\" ...) not defined.");
            //}

            if (_thumbnailnavigatorcontainer && !_thumbnailnavigatoroptions) {
                throw new error("thumbnail navigator container defined, but $thumbnailnavigatoroptions not specified.");
            }
        });

        var _slidescontainerwidth = $jssor$.$csswidth(_slidescontainer);
        var _slidescontainerheight = $jssor$.$cssheight(_slidescontainer);

        $jssordebug$.$execute(function () {
            if (isnan(_slidescontainerwidth))
                $jssordebug$.$fail("width of slides container wrong specification, it should be specified in pixel (like style='width: 600px;').");

            if (_slidescontainerwidth == undefined)
                $jssordebug$.$fail("width of slides container not specified, it should be specified in pixel (like style='width: 600px;').");

            if (isnan(_slidescontainerheight))
                $jssordebug$.$fail("height of slides container wrong specification, it should be specified in pixel (like style='height: 300px;').");

            if (_slidescontainerheight == undefined)
                $jssordebug$.$fail("height of slides container not specified, it should be specified in pixel (like style='height: 300px;').");

            var slidescontaineroverflow = $jssor$.$cssoverflow(_slidescontainer);
            var slidescontaineroverflowx = $jssor$.$css(_slidescontainer, "overflowx");
            var slidescontaineroverflowy = $jssor$.$css(_slidescontainer, "overflowy");
            if (slidescontaineroverflow != "hidden" && (slidescontaineroverflowx != "hidden" || slidescontaineroverflowy != "hidden"))
                $jssordebug$.$fail("overflow of slides container wrong specification, it should be specified as 'hidden' (style='overflow:hidden;').");

            //var slidescontainertop = $jssor$.$csstop(_slidescontainer);
            //var slidescontainerleft = $jssor$.$cssleft(_slidescontainer);

            //if (isnan(slidescontainertop))
            //    $jssordebug$.$fail("top of slides container wrong specification, it should be specified in pixel (like style='top: 0px;').");

            //if (slidescontainertop == undefined)
            //    $jssordebug$.$fail("top of slides container not specified, it should be specified in pixel (like style='top: 0px;').");

            //if (isnan(slidescontainerleft))
            //    $jssordebug$.$fail("left of slides container wrong specification, it should be specified in pixel (like style='left: 0px;').");

            //if (slidescontainerleft == undefined)
            //    $jssordebug$.$fail("left of slides container not specified, it should be specified in pixel (like style='left: 0px;').");
        });

        $jssordebug$.$execute(function () {
            if (!$jssor$.$isnumeric(_options.$displaypieces))
                $jssordebug$.$fail("option $displaypieces error, it should be a numeric value and greater than or equal to 1.");

            if (_options.$displaypieces < 1)
                $jssordebug$.$fail("option $displaypieces error, it should be greater than or equal to 1.");

            if (_options.$displaypieces > 1 && _options.$dragorientation && _options.$dragorientation != _playorientation)
                $jssordebug$.$fail("option $dragorientation error, it should be 0 or the same of $playorientation when $displaypieces is greater than 1.");

            if (!$jssor$.$isnumeric(_options.$parkingposition))
                $jssordebug$.$fail("option $parkingposition error, it should be a numeric value.");

            if (_options.$parkingposition && _options.$dragorientation && _options.$dragorientation != _playorientation)
                $jssordebug$.$fail("option $dragorientation error, it should be 0 or the same of $playorientation when $parkingposition is not equal to 0.");
        });

        var _styledef;

        var _slideelmts = [];

        {
            var slideelmts = $jssor$.$children(_slidescontainer);
            $jssor$.$each(slideelmts, function (slideelmt) {
                if (slideelmt.tagname == "div" && !$jssor$.$attributeex(slideelmt, "u")) {
                    _slideelmts.push(slideelmt);
                }
            });
        }

        $jssordebug$.$execute(function () {
            if (_slideelmts.length < 1) {
                $jssordebug$.$error("slides html code definition error, there must be at least 1 slide to initialize a slider.");
            }
        });

        var _slideitemcreatedcount = 0; //for debug only
        var _slideitemreleasedcount = 0;    //for debug only

        var _previousslideindex;
        var _currentslideindex = -1;
        var _tempslideindex;
        var _prevslideitem;
        var _currentslideitem;
        var _slidecount = _slideelmts.length;

        var _slidewidth = _options.$slidewidth || _slidescontainerwidth;
        var _slideheight = _options.$slideheight || _slidescontainerheight;

        var _slidespacing = _options.$slidespacing;
        var _steplengthx = _slidewidth + _slidespacing;
        var _steplengthy = _slideheight + _slidespacing;
        var _steplength = (_playorientation & 1) ? _steplengthx : _steplengthy;
        var _displaypieces = math.min(_options.$displaypieces, _slidecount);

        var _slideshowpanel;
        var _currentboardindex = 0;
        var _dragorientation;
        var _dragorientationregistered;
        var _draginvalid;

        var _handletoucheventonly;
        var _istouchdevice;

        var _navigators = [];
        var _bulletnavigator;
        var _arrownavigator;
        var _thumbnailnavigator;

        var _showlink;

        var _frozen;
        var _autoplay;
        var _autoplaysteps = _options.$autoplaysteps;
        var _hovertopause = _options.$pauseonhover;
        var _autoplayinterval = _options.$autoplayinterval;
        var _slideduration = _options.$slideduration;

        var _slideshowrunnerclass;
        var _transitionsorder;

        var _slideshowenabled;
        var _parkingposition;
        var _carouselenabled = _displaypieces < _slidecount;
        var _loop = _carouselenabled ? _options.$loop : 0;

        var _dragenabled;
        var _lastdragsucceded;

        var _notonhover = 1;   //0 hovering, 1 not hovering

        //variable definition
        var _issliding;
        var _isdragging;
        var _loadingticket;

        //the x position of mouse/touch when a drag start
        var _dragstartmousex = 0;
        //the y position of mouse/touch when a drag start
        var _dragstartmousey = 0;
        var _dragoffsettotal;
        var _dragoffsetlasttime;
        var _dragindexadjust;

        var _carousel;
        var _conveyor;
        var _slideshow;
        var _carouselplayer;
        var _slidecontainer = new slidecontainer();
        var _scaleratio;

        //$jssorslider$ constructor
        {
            _autoplay = _options.$autoplay;
            _selfslider.$options = options;

            adjustslidescontainersize();

            elmt["jssor-slider"] = true;

            //_slideshowpanel = createpanel();
            //$jssor$.$csszindex(elmt, $jssor$.$csszindex(elmt));
            //$jssor$.$cssleft(_slideshowpanel, $jssor$.$cssleft(_slidescontainer));
            //$jssor$.$csszindex(_slidescontainer, $jssor$.$csszindex(_slidescontainer));
            //$jssor$.$csstop(_slideshowpanel, $jssor$.$csstop(_slidescontainer));
            $jssor$.$csszindex(_slidescontainer, $jssor$.$csszindex(_slidescontainer) || 0);
            $jssor$.$cssposition(_slidescontainer, "absolute");
            _slideshowpanel = $jssor$.$clonenode(_slidescontainer, true);
            $jssor$.$insertbefore($jssor$.$parentnode(_slidescontainer), _slideshowpanel, _slidescontainer);

            if (_slideshowoptions) {
                _showlink = _slideshowoptions.$showlink;
                _slideshowrunnerclass = _slideshowoptions.$class;

                $jssordebug$.$execute(function () {
                    if (!_slideshowoptions.$transitions || !_slideshowoptions.$transitions.length) {
                        $jssordebug$.$error("invalid '$slideshowoptions', no '$transitions' specified.");
                    }
                });

                $jssor$.$translatetransitions(_slideshowoptions.$transitions); //for old transition compatibility

                _slideshowenabled = _displaypieces == 1 && _slidecount > 1 && _slideshowrunnerclass && (!$jssor$.$isbrowserie() || $jssor$.$browserversion() >= 8);
            }

            _parkingposition = (_slideshowenabled || _displaypieces >= _slidecount || !(_loop & 1)) ? 0 : _options.$parkingposition;

            _dragenabled = ((_displaypieces > 1 || _parkingposition) ? _playorientation : -1) & _options.$dragorientation;

            //slideboard
            var _slideboardelmt = _slidescontainer;
            var _slideitems = [];

            var _slideshowrunner;
            var _linkcontainer;

            var _downevent = "mousedown";
            var _moveevent = "mousemove";
            var _upevent = "mouseup";
            var _cancelevent;

            var _lasttimemovebydrag;
            var _position_onfreeze;
            var _carouselplaying_onfreeze;
            var _playtoposition_onfreeze;
            var _positiontogobydrag;

            //slideboard constructor
            {
                var msprefix;
                if (window.navigator.pointerenabled || (msprefix = window.navigator.mspointerenabled)) {
                    _istouchdevice = true;

                    _downevent = msprefix ? "mspointerdown" : "pointerdown";
                    _moveevent = msprefix ? "mspointermove" : "pointermove";
                    _upevent = msprefix ? "mspointerup" : "pointerup";
                    _cancelevent = msprefix ? "mspointercancel" : "pointercancel";

                    if (_dragenabled) {
                        var touchaction = "auto";
                        if (_dragenabled == 2) {
                            touchaction = "pan-x";
                        }
                        else if (_dragenabled) {
                            touchaction = "pan-y";
                        }

                        $jssor$.$css(_slideboardelmt, msprefix ? "mstouchaction" : "touchaction", touchaction);
                    }
                }
                else if ("ontouchstart" in window || "createtouch" in document) {
                    _handletoucheventonly = true;
                    _istouchdevice = true;

                    _downevent = "touchstart";
                    _moveevent = "touchmove";
                    _upevent = "touchend";
                    _cancelevent = "touchcancel";
                }

                _slideshow = new slideshow();

                if (_slideshowenabled)
                    _slideshowrunner = new _slideshowrunnerclass(_slidecontainer, _slidewidth, _slideheight, _slideshowoptions, _handletoucheventonly);

                $jssor$.$appendchild(_slideshowpanel, _slideshow.$wrapper);
                $jssor$.$cssoverflow(_slidescontainer, "hidden");

                //link container
                {
                    _linkcontainer = createpanel();
                    $jssor$.$css(_linkcontainer, "backgroundcolor", "#000");
                    $jssor$.$cssopacity(_linkcontainer, 0);
                    $jssor$.$insertbefore(_slideboardelmt, _linkcontainer, _slideboardelmt.firstchild);
                }

                for (var i = 0; i < _slideelmts.length; i++) {
                    var slideelmt = _slideelmts[i];
                    var slideitem = new slideitem(slideelmt, i);
                    _slideitems.push(slideitem);
                }

                $jssor$.$hideelement(_loadingcontainer);

                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_loadingcontainer, "debug-id", "loading-container");
                });

                _carousel = new carousel()
                _carouselplayer = new carouselplayer(_carousel, _slideshow);

                $jssordebug$.$execute(function () {
                    $jssor$.$attribute(_slideboardelmt, "debug-id", "slide-board");
                });

                if (_dragenabled) {
                    $jssor$.$addevent(_slidescontainer, _downevent, onmousedown);
                    $jssor$.$addevent(document, _upevent, ondragend);
                    _cancelevent && $jssor$.$addevent(document, _cancelevent, ondragend);
                }
            }
            //slideboard

            _hovertopause &= (_istouchdevice ? 10 : 5);

            //bullet navigator
            if (_bulletnavigatorcontainer && _bulletnavigatoroptions) {
                _bulletnavigator = new _bulletnavigatoroptions.$class(_bulletnavigatorcontainer, _bulletnavigatoroptions, originalwidth(), originalheight());
                _navigators.push(_bulletnavigator);
            }

            //arrow navigator
            if (_arrownavigatoroptions && _arrowleft && _arrowright) {
                _arrownavigator = new _arrownavigatoroptions.$class(_arrowleft, _arrowright, _arrownavigatoroptions, originalwidth(), originalheight());
                _navigators.push(_arrownavigator);
            }

            //thumbnail navigator
            if (_thumbnailnavigatorcontainer && _thumbnailnavigatoroptions) {
                _thumbnailnavigatoroptions.$startindex = _options.$startindex;
                _thumbnailnavigator = new _thumbnailnavigatoroptions.$class(_thumbnailnavigatorcontainer, _thumbnailnavigatoroptions);
                _navigators.push(_thumbnailnavigator);
            }

            $jssor$.$each(_navigators, function (navigator) {
                navigator.$reset(_slidecount, _slideitems, _loadingcontainer);
                navigator.$on($jssornavigatorevents$.$navigationrequest, navigationclickhandler);
            });

            scale(originalwidth());

            $jssor$.$addevent(elmt, "mouseout", $jssor$.$mouseoveroutfilter(maincontainermouseleaveeventhandler, elmt));
            $jssor$.$addevent(elmt, "mouseover", $jssor$.$mouseoveroutfilter(maincontainermouseentereventhandler, elmt));

            shownavigators();

            //keyboard navigation
            if (_options.$arrowkeynavigation) {
                $jssor$.$addevent(document, "keydown", function (e) {
                    if (e.keycode == $jssorkeycode$.$left) {
                        //arrow left
                        playtooffset(-1);
                    }
                    else if (e.keycode == $jssorkeycode$.$right) {
                        //arrow right
                        playtooffset(1);
                    }
                });
            }

            var startposition = _options.$startindex;
            if (!(_loop & 1)) {
                startposition = math.max(0, math.min(startposition, _slidecount - _displaypieces));
            }
            _carouselplayer.$playcarousel(startposition, startposition, 0);
        }
    }
    //jssor slider

    //jssorslider.$assembly_bottom_left = assembly_bottom_left;
    //jssorslider.$assembly_bottom_right = assembly_bottom_right;
    //jssorslider.$assembly_top_left = assembly_top_left;
    //jssorslider.$assembly_top_right = assembly_top_right;
    //jssorslider.$assembly_left_top = assembly_left_top;
    //jssorslider.$assembly_left_bottom = assembly_left_bottom;
    //jssorslider.$assembly_right_top = assembly_right_top;
    //jssorslider.$assembly_right_bottom = assembly_right_bottom;

    jssorslider.$evt_click = 21;
    jssorslider.$evt_drag_start = 22;
    jssorslider.$evt_drag_end = 23;
    jssorslider.$evt_swipe_start = 24;
    jssorslider.$evt_swipe_end = 25;

    jssorslider.$evt_load_start = 26;
    jssorslider.$evt_load_end = 27;
    jssorslider.$evt_freeze = 28;

    jssorslider.$evt_position_change = 202;
    jssorslider.$evt_park = 203;

    jssorslider.$evt_slideshow_start = 206;
    jssorslider.$evt_slideshow_end = 207;

    jssorslider.$evt_progress_change = 208;
    jssorslider.$evt_state_change = 209;
    jssorslider.$evt_rollback_start = 210;
    jssorslider.$evt_rollback_end = 211;

    window.$jssorslider$ = $jssorslider$ = jssorslider;

    //(function ($) {
    //    jquery.fn.jssorslider = function (options) {
    //        return this.each(function () {
    //            return $(this).data('jssorslider') || $(this).data('jssorslider', new jssorslider(this, options));
    //        });
    //    };
    //})(jquery);

    //window.jquery && (jquery.fn.jssorslider = function (options) {
    //    return this.each(function () {
    //        return jquery(this).data('jssorslider') || jquery(this).data('jssorslider', new jssorslider(this, options));
    //    });
    //});
};

//$jssorbulletnavigator$
var $jssornavigatorevents$ = {
    $navigationrequest: 1,
    $indexchange: 2,
    $reset: 3
};

var $jssorbulletnavigator$ = window.$jssorbulletnavigator$ = function (elmt, options, containerwidth, containerheight) {
    var self = this;
    $jssorobject$.call(self);

    elmt = $jssor$.$getelement(elmt);

    var _count;
    var _length;
    var _width;
    var _height;
    var _currentindex;
    var _currentinnerindex = 0;
    var _options;
    var _steps;
    var _lanes;
    var _spacingx;
    var _spacingy;
    var _orientation;
    var _itemprototype;
    var _prototypewidth;
    var _prototypeheight;

    var _buttonelements = [];
    var _buttons = [];

    function highlight(index) {
        if (index != -1)
            _buttons[index].$selected(index == _currentinnerindex);
    }

    function onnavigationrequest(index) {
        self.$triggerevent($jssornavigatorevents$.$navigationrequest, index * _steps);
    }

    self.$elmt = elmt;
    self.$getcurrentindex = function () {
        return _currentindex;
    };

    self.$setcurrentindex = function (index) {
        if (index != _currentindex) {
            var lastinnerindex = _currentinnerindex;
            var innerindex = math.floor(index / _steps);
            _currentinnerindex = innerindex;
            _currentindex = index;

            highlight(lastinnerindex);
            highlight(innerindex);

            //self.$triggerevent($jssornavigatorevents$.$indexchange, index);
        }
    };

    self.$show = function (hide) {
        $jssor$.$showelement(elmt, hide);
    };

    var _located;
    self.$relocate = function (containerwidth, containerheight) {
        if (!_located || _options.$scale == false) {
            if (_options.$autocenter & 1) {
                $jssor$.$cssleft(elmt, (containerwidth - _width) / 2);
            }
            if (_options.$autocenter & 2) {
                $jssor$.$csstop(elmt, (containerheight - _height) / 2);
            }

            _located = true;
        }
    };

    var _initialized;
    self.$reset = function (length) {
        if (!_initialized) {
            _length = length;
            _count = math.ceil(length / _steps);
            _currentinnerindex = 0;

            var itemoffsetx = _prototypewidth + _spacingx;
            var itemoffsety = _prototypeheight + _spacingy;

            var maxindex = math.ceil(_count / _lanes) - 1;

            _width = _prototypewidth + itemoffsetx * (!_orientation ? maxindex : _lanes - 1);
            _height = _prototypeheight + itemoffsety * (_orientation ? maxindex : _lanes - 1);

            $jssor$.$csswidth(elmt, _width);
            $jssor$.$cssheight(elmt, _height);

            for (var buttonindex = 0; buttonindex < _count; buttonindex++) {

                var numberdiv = $jssor$.$createspan();
                $jssor$.$innertext(numberdiv, buttonindex + 1);

                var div = $jssor$.$buildelement(_itemprototype, "numbertemplate", numberdiv, true);
                $jssor$.$cssposition(div, "absolute");

                var columnindex = buttonindex % (maxindex + 1);
                $jssor$.$cssleft(div, !_orientation ? itemoffsetx * columnindex : buttonindex % _lanes * itemoffsetx);
                $jssor$.$csstop(div, _orientation ? itemoffsety * columnindex : math.floor(buttonindex / (maxindex + 1)) * itemoffsety);

                $jssor$.$appendchild(elmt, div);
                _buttonelements[buttonindex] = div;

                if (_options.$actionmode & 1)
                    $jssor$.$addevent(div, "click", $jssor$.$createcallback(null, onnavigationrequest, buttonindex));

                if (_options.$actionmode & 2)
                    $jssor$.$addevent(div, "mouseover", $jssor$.$mouseoveroutfilter($jssor$.$createcallback(null, onnavigationrequest, buttonindex), div));

                _buttons[buttonindex] = $jssor$.$buttonize(div);
            }

            //self.$triggerevent($jssornavigatorevents$.$reset);
            _initialized = true;
        }
    };

    //jssorbulletnavigator constructor
    {
        self.$options = _options = $jssor$.$extend({
            $spacingx: 0,
            $spacingy: 0,
            $orientation: 1,
            $actionmode: 1
        }, options);

        //sodo statement for development time intellisence only
        $jssordebug$.$execute(function () {
            _options = $jssor$.$extend({
                $steps: undefined,
                $lanes: undefined
            }, _options);
        });

        _itemprototype = $jssor$.$findchild(elmt, "prototype");

        $jssordebug$.$execute(function () {
            if (!_itemprototype)
                $jssordebug$.$fail("navigator item prototype not defined.");

            if (isnan($jssor$.$csswidth(_itemprototype))) {
                $jssordebug$.$fail("width of 'navigator item prototype' not specified.");
            }

            if (isnan($jssor$.$cssheight(_itemprototype))) {
                $jssordebug$.$fail("height of 'navigator item prototype' not specified.");
            }
        });

        _prototypewidth = $jssor$.$csswidth(_itemprototype);
        _prototypeheight = $jssor$.$cssheight(_itemprototype);

        $jssor$.$removechild(elmt, _itemprototype);

        _steps = _options.$steps || 1;
        _lanes = _options.$lanes || 1;
        _spacingx = _options.$spacingx;
        _spacingy = _options.$spacingy;
        _orientation = _options.$orientation - 1;
    }
};

var $jssorarrownavigator$ = window.$jssorarrownavigator$ = function (arrowleft, arrowright, options, containerwidth, containerheight) {
    var self = this;
    $jssorobject$.call(self);

    $jssordebug$.$execute(function () {

        if (!arrowleft)
            $jssordebug$.$fail("option '$arrownavigatoroptions' spepcified, but ui 'arrowleft' not defined. define 'arrowleft' to enable direct navigation, or remove option '$arrownavigatoroptions' to disable direct navigation.");

        if (!arrowright)
            $jssordebug$.$fail("option '$arrownavigatoroptions' spepcified, but ui 'arrowright' not defined. define 'arrowright' to enable direct navigation, or remove option '$arrownavigatoroptions' to disable direct navigation.");

        if (isnan($jssor$.$csswidth(arrowleft))) {
            $jssordebug$.$fail("width of 'arrow left' not specified.");
        }

        if (isnan($jssor$.$csswidth(arrowright))) {
            $jssordebug$.$fail("width of 'arrow right' not specified.");
        }

        if (isnan($jssor$.$cssheight(arrowleft))) {
            $jssordebug$.$fail("height of 'arrow left' not specified.");
        }

        if (isnan($jssor$.$cssheight(arrowright))) {
            $jssordebug$.$fail("height of 'arrow right' not specified.");
        }
    });

    var _length;
    var _currentindex;
    var _options;
    var _steps;
    var _arrowwidth = $jssor$.$csswidth(arrowleft);
    var _arrowheight = $jssor$.$cssheight(arrowleft);

    function onnavigationrequest(steps) {
        self.$triggerevent($jssornavigatorevents$.$navigationrequest, steps, true);
    }

    self.$getcurrentindex = function () {
        return _currentindex;
    };

    self.$setcurrentindex = function (index, virtualindex, temp) {
        if (temp) {
            _currentindex = virtualindex;
        }
        else {
            _currentindex = index;
        }
        //self.$triggerevent($jssornavigatorevents$.$indexchange, index);
    };

    self.$show = function (hide) {
        $jssor$.$showelement(arrowleft, hide);
        $jssor$.$showelement(arrowright, hide);
    };

    var _located;
    self.$relocate = function (conainerwidth, containerheight) {
        if (!_located || _options.$scale == false) {

            if (_options.$autocenter & 1) {
                $jssor$.$cssleft(arrowleft, (containerwidth - _arrowwidth) / 2);
                $jssor$.$cssleft(arrowright, (containerwidth - _arrowwidth) / 2);
            }

            if (_options.$autocenter & 2) {
                $jssor$.$csstop(arrowleft, (containerheight - _arrowheight) / 2);
                $jssor$.$csstop(arrowright, (containerheight - _arrowheight) / 2);
            }

            _located = true;
        }
    };

    var _initialized;
    self.$reset = function (length) {
        _length = length;
        _currentindex = 0;

        if (!_initialized) {

            $jssor$.$addevent(arrowleft, "click", $jssor$.$createcallback(null, onnavigationrequest, -_steps));
            $jssor$.$addevent(arrowright, "click", $jssor$.$createcallback(null, onnavigationrequest, _steps));

            $jssor$.$buttonize(arrowleft);
            $jssor$.$buttonize(arrowright);

            _initialized = true;
        }

        //self.$triggerevent($jssornavigatorevents$.$reset);
    };

    //jssorarrownavigator constructor
    {
        self.$options = _options = $jssor$.$extend({
            $steps: 1
        }, options);

        _steps = _options.$steps;
    }
};

//$jssorthumbnailnavigator$
var $jssorthumbnailnavigator$ = window.$jssorthumbnailnavigator$ = function (elmt, options) {
    var _self = this;
    var _length;
    var _count;
    var _currentindex;
    var _options;
    var _navigationitems = [];

    var _width;
    var _height;
    var _lanes;
    var _spacingx;
    var _spacingy;
    var _prototypewidth;
    var _prototypeheight;
    var _displaypieces;

    var _slider;
    var _currentmouseoverindex = -1;

    var _slidescontainer;
    var _thumbnailprototype;

    $jssorobject$.call(_self);
    elmt = $jssor$.$getelement(elmt);

    function navigationitem(item, index) {
        var self = this;
        var _wrapper;
        var _button;
        var _thumbnail;

        function highlight(mousestatus) {
            _button.$selected(_currentindex == index);
        }

        function onnavigationrequest(event) {
            if (!_slider.$lastdragsucceded()) {
                var tail = _lanes - index % _lanes;
                var slidevirtualindex = _slider.$getvirtualindex((index + tail) / _lanes - 1);
                var itemvirtualindex = slidevirtualindex * _lanes + _lanes - tail;
                _self.$triggerevent($jssornavigatorevents$.$navigationrequest, itemvirtualindex);
            }

            //$jssordebug$.$log("navigation request");
        }

        $jssordebug$.$execute(function () {
            self.$wrapper = undefined;
        });

        self.$index = index;

        self.$highlight = highlight;

        //navigationitem constructor
        {
            _thumbnail = item.$thumb || item.$image || $jssor$.$creatediv();
            self.$wrapper = _wrapper = $jssor$.$buildelement(_thumbnailprototype, "thumbnailtemplate", _thumbnail, true);

            _button = $jssor$.$buttonize(_wrapper);
            if (_options.$actionmode & 1)
                $jssor$.$addevent(_wrapper, "click", onnavigationrequest);
            if (_options.$actionmode & 2)
                $jssor$.$addevent(_wrapper, "mouseover", $jssor$.$mouseoveroutfilter(onnavigationrequest, _wrapper));
        }
    }

    _self.$getcurrentindex = function () {
        return _currentindex;
    };

    _self.$setcurrentindex = function (index, virtualindex, temp) {
        var oldindex = _currentindex;
        _currentindex = index;
        if (oldindex != -1)
            _navigationitems[oldindex].$highlight();
        _navigationitems[index].$highlight();

        if (!temp) {
            _slider.$playto(_slider.$getvirtualindex(math.floor(virtualindex / _lanes)));
        }
    };

    _self.$show = function (hide) {
        $jssor$.$showelement(elmt, hide);
    };

    _self.$relocate = $jssor$.$emptyfunction;

    var _initialized;
    _self.$reset = function (length, items, loadingcontainer) {
        if (!_initialized) {
            _length = length;
            _count = math.ceil(_length / _lanes);
            _currentindex = -1;
            _displaypieces = math.min(_displaypieces, items.length);

            var horizontal = _options.$orientation & 1;

            var slidewidth = _prototypewidth + (_prototypewidth + _spacingx) * (_lanes - 1) * (1 - horizontal);
            var slideheight = _prototypeheight + (_prototypeheight + _spacingy) * (_lanes - 1) * horizontal;

            var slidescontainerwidth = slidewidth + (slidewidth + _spacingx) * (_displaypieces - 1) * horizontal;
            var slidescontainerheight = slideheight + (slideheight + _spacingy) * (_displaypieces - 1) * (1 - horizontal);

            $jssor$.$cssposition(_slidescontainer, "absolute");
            $jssor$.$cssoverflow(_slidescontainer, "hidden");
            if (_options.$autocenter & 1) {
                $jssor$.$cssleft(_slidescontainer, (_width - slidescontainerwidth) / 2);
            }
            if (_options.$autocenter & 2) {
                $jssor$.$csstop(_slidescontainer, (_height - slidescontainerheight) / 2);
            }
            //$jssordebug$.$execute(function () {
            //    if (!_options.$autocenter) {
            //        var slidescontainertop = $jssor$.$csstop(_slidescontainer);
            //        var slidescontainerleft = $jssor$.$cssleft(_slidescontainer);

            //        if (isnan(slidescontainertop)) {
            //            $jssordebug$.$fail("position 'top' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $thumbnailnavigatoroptions.$autocenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"top: 0px;\">)");
            //        }

            //        if (isnan(slidescontainerleft)) {
            //            $jssordebug$.$fail("position 'left' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $thumbnailnavigatoroptions.$autocenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"left: 0px;\">)");
            //        }
            //    }
            //});
            $jssor$.$csswidth(_slidescontainer, slidescontainerwidth);
            $jssor$.$cssheight(_slidescontainer, slidescontainerheight);

            var slideitemelmts = [];
            $jssor$.$each(items, function (item, index) {
                var navigationitem = new navigationitem(item, index);
                var navigationitemwrapper = navigationitem.$wrapper;

                var columnindex = math.floor(index / _lanes);
                var laneindex = index % _lanes;

                $jssor$.$cssleft(navigationitemwrapper, (_prototypewidth + _spacingx) * laneindex * (1 - horizontal));
                $jssor$.$csstop(navigationitemwrapper, (_prototypeheight + _spacingy) * laneindex * horizontal);

                if (!slideitemelmts[columnindex]) {
                    slideitemelmts[columnindex] = $jssor$.$creatediv();
                    $jssor$.$appendchild(_slidescontainer, slideitemelmts[columnindex]);
                }

                $jssor$.$appendchild(slideitemelmts[columnindex], navigationitemwrapper);

                _navigationitems.push(navigationitem);
            });

            var thumbnailslideroptions = $jssor$.$extend({
                $hwa: false,
                $autoplay: false,
                $naviquitdrag: false,
                $slidewidth: slidewidth,
                $slideheight: slideheight,
                $slidespacing: _spacingx * horizontal + _spacingy * (1 - horizontal),
                $mindragoffsettoslide: 12,
                $slideduration: 200,
                $pauseonhover: 1,
                $playorientation: _options.$orientation,
                $dragorientation: _options.$disabledrag ? 0 : _options.$orientation
            }, _options);

            _slider = new $jssorslider$(elmt, thumbnailslideroptions);

            _initialized = true;
        }

        //_self.$triggerevent($jssornavigatorevents$.$reset);
    };

    //jssorthumbnailnavigator constructor
    {
        _self.$options = _options = $jssor$.$extend({
            $spacingx: 3,
            $spacingy: 3,
            $displaypieces: 1,
            $orientation: 1,
            $autocenter: 3,
            $actionmode: 1
        }, options);

        //sodo statement for development time intellisence only
        $jssordebug$.$execute(function () {
            _options = $jssor$.$extend({
                $lanes: undefined,
                $width: undefined,
                $height: undefined
            }, _options);
        });

        _width = $jssor$.$csswidth(elmt);
        _height = $jssor$.$cssheight(elmt);

        $jssordebug$.$execute(function () {
            if (!_width)
                $jssordebug$.$fail("width of 'thumbnavigator' container not specified.");
            if (!_height)
                $jssordebug$.$fail("height of 'thumbnavigator' container not specified.");
        });

        _slidescontainer = $jssor$.$findchild(elmt, "slides", true);
        _thumbnailprototype = $jssor$.$findchild(_slidescontainer, "prototype");

        $jssordebug$.$execute(function () {
            if (!_thumbnailprototype)
                $jssordebug$.$fail("prototype of 'thumbnavigator' not defined.");
        });

        _prototypewidth = $jssor$.$csswidth(_thumbnailprototype);
        _prototypeheight = $jssor$.$cssheight(_thumbnailprototype);

        $jssor$.$removechild(_slidescontainer, _thumbnailprototype);

        _lanes = _options.$lanes || 1;
        _spacingx = _options.$spacingx;
        _spacingy = _options.$spacingy;
        _displaypieces = _options.$displaypieces;
    }
};

//$jssorcaptionsliderbase$
function $jssorcaptionsliderbase$() {
    $jssoranimator$.call(this, 0, 0);
    this.$revert = $jssor$.$emptyfunction;
}

var $jssorcaptionslider$ = window.$jssorcaptionslider$ = function (container, captionslideoptions, playin) {
    $jssordebug$.$execute(function () {
        if (!captionslideoptions.$captiontransitions) {
            $jssordebug$.$error("'$captionslideroptions' option error, '$captionslideroptions.$captiontransitions' not specified.");
        }
        //else if (!$jssor$.$isarray(captionslideoptions.$captiontransitions)) {
        //    $jssordebug$.$error("'$captionslideroptions' option error, '$captionslideroptions.$captiontransitions' is not an array.");
        //}
    });

    var _self = this;
    var _immediateoutcaptionhanger;
    var _playmode = playin ? captionslideoptions.$playinmode : captionslideoptions.$playoutmode;

    var _captiontransitions = captionslideoptions.$captiontransitions;
    var _captiontuningfetcher = { $transition: "t", $delay: "d", $duration: "du", x: "x", y: "y", $rotate: "r", $zoom: "z", $opacity: "f", $begintime: "b" };
    var _captiontuningtransfer = {
        $default: function (value, tuningvalue) {
            if (!isnan(tuningvalue.$value))
                value = tuningvalue.$value;
            else
                value *= tuningvalue.$percent;

            return value;
        },
        $opacity: function (value, tuningvalue) {
            return this.$default(value - 1, tuningvalue);
        }
    };
    _captiontuningtransfer.$zoom = _captiontuningtransfer.$opacity;

    $jssoranimator$.call(_self, 0, 0);

    function getcaptionitems(element, level) {

        var itemstoplay = [];
        var lasttransitionname;
        var namedtransitions = [];
        var namedtransitionorders = [];

        //$jssordebug$.$execute(function () {

        //    var debuginfoelement = $jssor$.$getelement("debuginfo");

        //    if (debuginfoelement && playin) {

        //        var text = $jssor.$innerhtml(debuginfoelement) + "<br>";

        //        $jssor$.$innerhtml(debuginfoelement, text);
        //    }
        //});

        function fetchrawtransition(captionelmt, index) {
            var rawtransition = {};

            $jssor$.$each(_captiontuningfetcher, function (fetchattribute, fetchproperty) {
                var attributevalue = $jssor$.$attributeex(captionelmt, fetchattribute + (index || ""));
                if (attributevalue) {
                    var propertyvalue = {};

                    if (fetchattribute == "t") {
                        //if (($jssor$.$isbrowserchrome() || $jssor$.$isbrowsersafari() || $jssor$.$isbrowserfirefox()) && attributevalue == "*") {
                        //    attributevalue = math.floor(math.random() * captionslideoptions.$captiontransitions.length);
                        //    $jssor$.$attribute(captionelmt, fetchattribute + (index || ""), attributevalue);
                        //}

                        propertyvalue.$value = attributevalue;
                    }
                    else if (attributevalue.indexof("%") + 1)
                        propertyvalue.$percent = $jssor$.$parsefloat(attributevalue) / 100;
                    else
                        propertyvalue.$value = $jssor$.$parsefloat(attributevalue);

                    rawtransition[fetchproperty] = propertyvalue;
                }
            });

            return rawtransition;
        }

        function getrandomtransition() {
            return _captiontransitions[math.floor(math.random() * _captiontransitions.length)];
        }

        function evaluatecaptiontransition(transitionname) {

            var transition;

            if (transitionname == "*") {
                transition = getrandomtransition();
            }
            else if (transitionname) {

                //indexed transition allowed, just the same as named transition
                var temptransition = _captiontransitions[$jssor$.$parseint(transitionname)] || _captiontransitions[transitionname];

                if ($jssor$.$isarray(temptransition)) {
                    if (transitionname != lasttransitionname) {
                        lasttransitionname = transitionname;
                        namedtransitionorders[transitionname] = 0;

                        namedtransitions[transitionname] = temptransition[math.floor(math.random() * temptransition.length)];
                    }
                    else {
                        namedtransitionorders[transitionname]++;
                    }

                    temptransition = namedtransitions[transitionname];

                    if ($jssor$.$isarray(temptransition)) {
                        temptransition = temptransition.length && temptransition[namedtransitionorders[transitionname] % temptransition.length];

                        if ($jssor$.$isarray(temptransition)) {
                            //got transition from array level 3, random for all captions
                            temptransition = temptransition[math.floor(math.random() * temptransition.length)];
                        }
                        //else {
                        //    //got transition from array level 2, in sequence for all adjacent captions with same name specified
                        //    transition = temptransition;
                        //}
                    }
                    //else {
                    //    //got transition from array level 1, random but same for all adjacent captions with same name specified
                    //    transition = temptransition;
                    //}
                }
                //else {
                //    //got transition directly from a simple transition object
                //    transition = temptransition;
                //}

                transition = temptransition;

                if ($jssor$.$isstring(transition))
                    transition = evaluatecaptiontransition(transition);
            }

            return transition;
        }

        var captionelmts = $jssor$.$children(element);
        $jssor$.$each(captionelmts, function (captionelmt, i) {

            var transitionswithtuning = [];
            transitionswithtuning.$elmt = captionelmt;
            var iscaption = $jssor$.$attributeex(captionelmt, "u") == "caption";

            $jssor$.$each(playin ? [0, 3] : [2], function (j, k) {

                if (iscaption) {
                    var transition;
                    var rawtransition;

                    if (j != 2 || !$jssor$.$attributeex(captionelmt, "t3")) {
                        rawtransition = fetchrawtransition(captionelmt, j);

                        if (j == 2 && !rawtransition.$transition) {
                            rawtransition.$delay = rawtransition.$delay || { $value: 0 };
                            rawtransition = $jssor$.$extend(fetchrawtransition(captionelmt, 0), rawtransition);
                        }
                    }

                    if (rawtransition && rawtransition.$transition) {

                        transition = evaluatecaptiontransition(rawtransition.$transition.$value);

                        if (transition) {

                            //var transitionwithtuning = $jssor$.$extend({ $delay: 0, $scalehorizontal: 1, $scalevertical: 1 }, transition);
                            var transitionwithtuning = $jssor$.$extend({ $delay: 0 }, transition);

                            $jssor$.$each(rawtransition, function (rawpropertyvalue, propertyname) {
                                var tuningpropertyvalue = (_captiontuningtransfer[propertyname] || _captiontuningtransfer.$default).apply(_captiontuningtransfer, [transitionwithtuning[propertyname], rawtransition[propertyname]]);
                                if (!isnan(tuningpropertyvalue))
                                    transitionwithtuning[propertyname] = tuningpropertyvalue;
                            });

                            if (!k) {
                                if (rawtransition.$begintime)
                                    transitionwithtuning.$begintime = rawtransition.$begintime.$value || 0;
                                else if ((_playmode) & 2)
                                    transitionwithtuning.$begintime = 0;
                            }
                        }
                    }

                    transitionswithtuning.push(transitionwithtuning);
                }

                if ((level % 2) && !k) {
                    //transitionswithtuning.$children = getcaptionitems(captionelmt, lasttransitionname, [].concat(namedtransitions), [].concat(namedtransitionorders), level + 1);
                    transitionswithtuning.$children = getcaptionitems(captionelmt, level + 1);
                }
            });

            itemstoplay.push(transitionswithtuning);
        });

        return itemstoplay;
    }

    function createanimator(item, transition, immediateout) {

        var animatoroptions = {
            $easing: transition.$easing,
            $round: transition.$round,
            $during: transition.$during,
            $reverse: playin && !immediateout,
            $optimize: true
        };

        $jssordebug$.$execute(function () {
            animatoroptions.$captionanimator = true;
        });

        var captionitem = item;
        var captionparent = $jssor$.$parentnode(item);

        var captionitemwidth = $jssor$.$csswidth(captionitem);
        var captionitemheight = $jssor$.$cssheight(captionitem);
        var captionparentwidth = $jssor$.$csswidth(captionparent);
        var captionparentheight = $jssor$.$cssheight(captionparent);

        var tostyles = {};
        var fromstyles = {};
        var scaleclip = transition.$scaleclip || 1;

        //opacity
        if (transition.$opacity) {
            tostyles.$opacity = 2 - transition.$opacity;
        }

        animatoroptions.$originalwidth = captionitemwidth;
        animatoroptions.$originalheight = captionitemheight;

        //transform
        if (transition.$zoom || transition.$rotate) {
            tostyles.$zoom = transition.$zoom ? transition.$zoom - 1 : 1;

            if ($jssor$.$isbrowserie9earlier() || $jssor$.$isbrowseropera())
                tostyles.$zoom = math.min(tostyles.$zoom, 2);

            fromstyles.$zoom = 1;

            var rotate = transition.$rotate || 0;

            tostyles.$rotate = rotate * 360;
            fromstyles.$rotate = 0;
        }
            //clip
        else if (transition.$clip) {
            var fromstyleclip = { $top: 0, $right: captionitemwidth, $bottom: captionitemheight, $left: 0 };
            var tostyleclip = $jssor$.$extend({}, fromstyleclip);

            var blockoffset = tostyleclip.$offset = {};

            var topbenchmark = transition.$clip & 4;
            var bottombenchmark = transition.$clip & 8;
            var leftbenchmark = transition.$clip & 1;
            var rightbenchmark = transition.$clip & 2;

            if (topbenchmark && bottombenchmark) {
                blockoffset.$top = captionitemheight / 2 * scaleclip;
                blockoffset.$bottom = -blockoffset.$top;
            }
            else if (topbenchmark)
                blockoffset.$bottom = -captionitemheight * scaleclip;
            else if (bottombenchmark)
                blockoffset.$top = captionitemheight * scaleclip;

            if (leftbenchmark && rightbenchmark) {
                blockoffset.$left = captionitemwidth / 2 * scaleclip;
                blockoffset.$right = -blockoffset.$left;
            }
            else if (leftbenchmark)
                blockoffset.$right = -captionitemwidth * scaleclip;
            else if (rightbenchmark)
                blockoffset.$left = captionitemwidth * scaleclip;

            animatoroptions.$move = transition.$move;
            tostyles.$clip = tostyleclip;
            fromstyles.$clip = fromstyleclip;
        }

        //fly
        {
            var toleft = 0;
            var totop = 0;

            if (transition.x)
                toleft -= captionparentwidth * transition.x;

            if (transition.y)
                totop -= captionparentheight * transition.y;

            if (toleft || totop || animatoroptions.$move) {
                tostyles.$left = toleft + $jssor$.$cssleft(captionitem);
                tostyles.$top = totop + $jssor$.$csstop(captionitem);
            }
        }

        //duration
        var duration = transition.$duration;

        fromstyles = $jssor$.$extend(fromstyles, $jssor$.$getstyles(captionitem, tostyles));

        animatoroptions.$setter = $jssor$.$stylesetterex();

        return new $jssoranimator$(transition.$delay, duration, animatoroptions, captionitem, fromstyles, tostyles);
    }

    function createanimators(streamlinelength, captionitems) {

        $jssor$.$each(captionitems, function (captionitem, i) {

            $jssordebug$.$execute(function () {
                if (captionitem.length) {
                    var top = $jssor$.$csstop(captionitem.$elmt);
                    var left = $jssor$.$cssleft(captionitem.$elmt);
                    var width = $jssor$.$csswidth(captionitem.$elmt);
                    var height = $jssor$.$cssheight(captionitem.$elmt);

                    var error = null;

                    if (isnan(top))
                        error = "style 'top' for caption not specified. please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
                    else if (isnan(left))
                        error = "style 'left' not specified. please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
                    else if (isnan(width))
                        error = "style 'width' not specified. please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
                    else if (isnan(height))
                        error = "style 'height' not specified. please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";

                    if (error)
                        $jssordebug$.$error("caption " + (i + 1) + " definition error, \r\n" + error + "\r\n" + captionitem.$elmt.outerhtml);
                }
            });

            var animator;
            var captionelmt = captionitem.$elmt;
            var transition = captionitem[0];
            var transition3 = captionitem[1];

            if (transition) {

                animator = createanimator(captionelmt, transition);
                streamlinelength = animator.$locate(transition.$begintime == undefined ? streamlinelength : transition.$begintime, 1);
            }

            streamlinelength = createanimators(streamlinelength, captionitem.$children);

            if (transition3) {
                var animator3 = createanimator(captionelmt, transition3, 1);
                animator3.$locate(streamlinelength, 1);
                _self.$combine(animator3);
                _immediateoutcaptionhanger.$combine(animator3);
            }

            if (animator)
                _self.$combine(animator);
        });

        return streamlinelength;
    }

    _self.$revert = function () {
        _self.$gotoposition(_self.$getposition_outerend() * (playin || 0));
        _immediateoutcaptionhanger.$gotobegin();
    };

    //constructor
    {
        _immediateoutcaptionhanger = new $jssoranimator$(0, 0);

        //var streamlinelength = 0;
        //var captionitems = getcaptionitems(container, null, [], [], 1);

        createanimators(0, _playmode ? getcaptionitems(container, 1) : []);
    }
};

//event table

//$evt_click = 21;			    function(slideindex[, event])
//$evt_drag_start = 22;		    function(position[, virtualposition, event])
//$evt_drag_end = 23;		    function(position, startposition[, virtualposition, virtualstartposition, event])
//$evt_swipe_start = 24;		function(position[, virtualposition])
//$evt_swipe_end = 25;		    function(position[, virtualposition])

//$evt_load_start = 26;			function(slideindex)
//$evt_load_end = 27;			function(slideindex)

//$evt_position_change = 202;	function(position, fromposition[, virtualposition, virtualfromposition])
//$evt_park = 203;			    function(slideindex, fromindex)

//$evt_progress_change = 208;	function(slideindex, progress[, progressbegin, idlebegin, idleend, progressend])
//$evt_state_change = 209;	    function(slideindex, progress[, progressbegin, idlebegin, idleend, progressend])

//$evt_rollback_start = 210;	function(slideindex, progress[, progressbegin, idlebegin, idleend, progressend])
//$evt_rollback_end = 211;	    function(slideindex, progress[, progressbegin, idlebegin, idleend, progressend])

//$evt_slideshow_start = 206;   function(slideindex[, progressbegin, slideshowbegin, slideshowend, progressend])
//$evt_slideshow_end = 207;     function(slideindex[, progressbegin, slideshowbegin, slideshowend, progressend])

//http://www.jssor.com/development/reference-api.html