(function($){
    $.random = function (MinV, MaxV) { return MinV + Math.floor((MaxV - MinV + 1) * (Math.random() % 1)); }
    var 
        prefixes = [ "Moz", "Webkit", "O", "Ms" ],prefix,
        div = $( "<div>" )[0],
        vendorProp
    ;
    $.each(prefixes,function(){
        if(this+'TransformOrigin' in div.style){
            prefix = this;
            return false;
        } 
    });
    $.each(['transformOrigin','transformOriginX','transformOriginY','perspective','transformStyle'],function(){
        var vendorProp = prefix + this.charAt(0).toUpperCase() + this.slice(1);
        $.cssHooks[this] = {
            set: function(node,val){
                node.style[vendorProp] = val;
            },
            get: function(node){
                return node.style[vendorProp];
            }
        }
    })
})(jQuery);

var JVSlide3 = (function ($) {
    var slide = function (_selector, _options) {
        var
            selector = $(_selector),
            options = $.extend({
                drag: true,
                delay: 3000,
                auto: true,
                startindex: 0,
                thumb: true
            }, _options),
            items = selector.children(),
            This = this,
            $This = $(this),
            lastVisible = -1,
            btnNext = $('<a>',{href: 'javascript:void(0)','class':'jvsl3-btnNext'}).append($('<span>').text('Next')).click(function(){
                if(isAnimate) return;
                This.next();
                
            }),
            btnPrev = $('<a>',{href: 'javascript:void(0)','class':'jvsl3-btnPrev'}).append($('<span>').text('Prev')).click(function(){
                if(isAnimate) return;
                This.prev();
            }),
            pnBtnNext = $('<div>',{'class': 'jvsl3-pnBtnNext'}).append(btnNext),
            pnBtnPrev = $('<div>',{'class': 'jvsl3-pnBtnPrev'}).append(btnPrev),
            index = -1,isAnimate = false
        ;
        //method
        selector.append(pnBtnPrev,pnBtnNext);
        
        items.css('perspective','600px');
        var
            effect = function (item, ops) {
                item.show();
                ops.mode == 'show' && item.css('visibility', 'hidden');
                var
                    dfPos = item.position(),
                    dfSize = {width: item.width(),height: item.height()},
                    box = item.clone().css({ 'position': 'absolute','visibility': 'hidden' }).css(dfPos).css(dfSize),
                    opAni = {
                        duration: ops.duration,
                        complete: function () {
                            if (ops.mode == 'show') item.css('visibility', 'visible');
                            else item.hide();
                            item.triggerHandler('complete');
                            box.remove();
                        },
                        'easing': 'easeOutBack'
                    },
                    atHide = $.extend({}, dfPos), atShow = $.extend({}, dfPos)
                ;
                
                
                if (ops.fade) {
                    atShow['opacity'] = 1;
                    atHide['opacity'] = 0;
                }
                if (ops.transfer) {
                    ops.transfer = $.extend({
                        top: 0.5,
                        left: 0.5
                    },ops.transfer);
                    if(Math.abs(ops.transfer.top) > 5){
                        atHide.top += ops.transfer.top;
                    }else{
                        var tToTop = ops.transfer.top.length ? $.random(ops.transfer.top[0] * 100, ops.transfer.top[1] * 100) / 100 : ops.transfer.top;
                        atHide.top += dfSize.height * tToTop - dfSize.height/2;
                    }
                    
                    if(Math.abs(ops.transfer.left) > 5){
                        atHide.left += ops.transfer.left;
                    }else{
                        var tToLeft = ops.transfer.left.length ? $.random(ops.transfer.left[0] * 100, ops.transfer.left[1] * 100) / 100 : ops.transfer.left;
                        atHide.left += dfSize.width * tToLeft - dfSize.width / 2;
                    }
                }
                
                ops.transformOrigin && box.css('transformOrigin',ops.transformOrigin);
                
                $.each({'rotateX':0,'rotateY':0,'rotateZ':0,'scale':1,'translateX':0,'translateY':0},function(index,val){
                    if(ops[index]){
                        atShow[index] = val;
                        atHide[index] = ops[index];
                    }
                });
                
                var
                    start = function () {
                        item.triggerHandler('start');
                        ops.mode == 'show' ? (function () {
                            box.show().css(atHide).animate(atShow, opAni);
                        })() : (function () {
                            box.css(atShow).animate(atHide, opAni);
                            item.css('visibility', 'hidden');
                        })();
                        box.css('visibility', 'visible');
                    },
                    imgs = box.is('img') ? box : box.find('img'),
                    countImg = 0;
                ;
                item.parent().prepend(box);
                imgs.length?imgs.each(function () {
                    this.onload = function () {
                        countImg++;
                        if (countImg >= imgs.length) {
                            start();
                        }
                    }
                }):start();
            },
            start = function (i, mode) {
                //return;
                var
                    curent = items.eq(i).show(),
                    img = curent.children('img'),
                    desc = curent.children('.jvsl3-details'),
                    descs = desc.children().show(),
                    count = 0,
                    handle = function(){
                        count ++;
                        if(count > descs.length){
                            curent.triggerHandler('complete',[i,mode]);
                            isAnimate = false;
                        }
                    }
                ;
                mode == 'show' && descs.css('visibility', 'hidden');
                isAnimate = true;
                descs.one('complete',handle);
                img.one('complete',handle).one('start',function(){
                    setTimeout(function () {
                        var
                            index = 0,
                            itv = setInterval(function () {
                                effect(descs.eq(index), $.extend(slide.effects.random(),{duration: 1000,mode: mode}));

                                index++;
                                if (index >= descs.length) clearInterval(itv);
                            }, 200)
                        ;
                    },200);
                });
                effect(img, $.extend(slide.effects.random(),{duration: 1000,mode: mode}));
            }
        ;
        options.auto && (function(){
            var isPause = false;
            selector.hover(function(){
                isPause = true;
            },function(){
                isPause = false;
            });
            
            var handle = function(){
                setTimeout(function(){
                    isPause || This.next();
                    handle();
                }, options.delay);
            }
            handle();
        })();
        options.drag && (function () {
            var bginPos, curent;
            items.draggable({
                distance: 10,
                start: function (e, ui) {
                    curent = $(this);
                    if(curent.is(':animated')){
                        curent.stop();
                        return;
                    } 
                    
                    bginPos = ui.position;
                },
                drag: function (e, ui) {
                    var axis = curent.draggable("option", "axis");
                    if( axis === 'x' || axis === 'y') return;
                    if (Math.abs(ui.position.top - bginPos.top) > Math.abs(ui.position.left - bginPos.left)) curent.draggable("option", "axis", "y").css('left', bginPos.left);
                    else curent.draggable("option", "axis", "x").css('top', bginPos.top);
                },
                stop: function (e, ui) {
                    if (curent.draggable("option", "axis") === 'y') {
                        var
                            len = ui.position.top - bginPos.top,
                            height = selector.height()
                        ;

                        if (Math.abs(len) > height / 3) {
                            if (len > 0) {
                                curent.animate({ top: height }, 300, function () {
                                    curent.hide().css(bginPos);
                                    This.next();
                                });
                            } else {
                                curent.animate({ top: -height }, 300, function () {
                                    curent.hide().css(bginPos);
                                    This.prev();
                                });
                            }
                            lastVisible = -1;
                        } else curent.animate(bginPos, 300);
                    } else {
                        var
                            len = ui.position.left - bginPos.left,
                            width = selector.width()
                        ;
                        if (Math.abs(len) > width / 3) {
                            if (len > 0) {
                                curent.animate({ left: width }, 300, function () {
                                    curent.hide().css(bginPos);
                                    This.next();
                                });
                            } else {
                                curent.animate({ left: -width }, 300, function () {
                                    curent.hide().css(bginPos);
                                    This.prev();
                                });
                            }
                            lastVisible = -1;
                        } else curent.animate(bginPos, 300);
                    }
                    curent.draggable("option", "axis", "xy");
                }
            });
        })();
        options.thumb != 'none' && (function () {
            var thumbs = $('<div>', { 'class': 'jvsl3-thumbs' }).appendTo(selector);
            items.each(function (index) {
                var 
                    thumb = $('<a>', { 'class': 'jvsl3-thumb', 'href': 'javascript:void(0)' }).appendTo(thumbs).click(function () {
                        This.to(index);
                    }),
                    number = options.thumb == 'number' ? $('<span>', { 'class': 'jvsl3-thumb-num' }).append(index):undefined,
                    icon =  options.thumb == 'icon' ? $('<span>', { 'class': 'jvsl3-thumb-icon' }).append('<span></span>'):undefined,
                    img = options.thumb == 'image' ? $(this).find('img:first').clone() : undefined
                ;
                thumb.append(number, icon, img);
            });

            items.bind('complete', function (e, i, mode) {
                if (!mode || mode === 'hide') return;
                thumbs.children().removeClass('active').eq(i).addClass('active');
            });
        })();
        
        $.extend(this, {
            next: function () {
                return This.to(index + 1);
            },
            prev: function () {
                
                return This.to(index - 1);
            },
            to: function (to) {
                to = to % items.length;
                to = to < 0 ? items.length + to : to;
                if (to === lastVisible) return;
                if(lastVisible > -1){
                    items.eq(lastVisible).one('complete', function () {
                        items.eq(lastVisible).hide();
                        start(to,'show');
                        lastVisible = to;
                    });
                    start(lastVisible,'hide');
                }else{
                    start(to,'show');
                    lastVisible = to;
                } 
                index = to;
            },
            auto: function (auto) { }
        });

        This.to(options.startindex);
    }
    slide.effects = {
        random: function(){
            var arr = [];
            $.each(slide.effects,function(index){
                arr.push(index);
            });
            //var effectName = 'flipX';
            var effectName = arr[$.random(1,arr.length - 1)];
            return slide.effects[effectName]();
        },
        
        fade: function(){ return {fade: true}; },
        
        dropUp: function(){ return {fade: true, transfer:{ top: -0.5}}; },
        dropDown:function(){ return {fade: true, transfer:{ top: 1.5}}; },
        dropLeft:function(){ return {fade: true, transfer:{ left: -0.5}}; },
        dropRight:function(){ return {fade: true, transfer:{ left: 1.5}};},
        
        scaleIn: function(){return {fade: true, scale: 0};},
        scaleOut: function(){ return {fade: true, scale: 2};},
        scaleInRotate: function(){ return {fade: true, scale: 0.0001,  rotateZ:  Math.PI,transformOrigin: '50% 50%'};},
        scaleOutRotate: function(){ return {fade: true, scale:2, rotateZ: Math.PI,transformOrigin: '50% 50%'};},
        
        flipX : function(){ return {fade: true,rotateX: Math.PI/2,transformOrigin: '50% 50%'};},
        flipY : function(){ return {fade: true,rotateY: Math.PI/2,transformOrigin: '50% 50%'};},
        flipXY : function(){ return {fade: true,rotateX: Math.PI/2,rotateY: Math.PI/2, transformOrigin: '50% 50%'};},
        
        flipTop : function(){ return {fade: true,rotateX: -Math.PI/2, transformOrigin: '50% 0'};},
        flipBottom : function(){ return {fade: true,rotateX: -Math.PI/2, transformOrigin: '50% 100%'};},
        flipLeft : function(){ return {fade: true,rotateY: -Math.PI/2, transformOrigin: '0 50%'};},
        flipRight : function(){ return {fade: true,rotateY: Math.PI/2, transformOrigin: '100% 50%'};}
        
    }
    return slide;
})(jQuery);