angular.module('stoute.ng-swipe', [])

    .directive('swiper', function(){
        var linker = function(scope, element, attrs){
            scope.init();
        };
        var tpl="";
        tpl += "<div id=\"{{ elementId }}\" class='swipe clearfix'>";
        tpl += "    <div class=\"swipe-wrap\" ng-transclude><\/div>";
        tpl += "    <div class=\"swipe-position\"><\/div>";
        tpl += "    <div class=\"swipe-nav clearfix\">";
        tpl += "       <button ng-click=\"prevSlide()\" class=\"btn btn-sm pull-left\"><span class=\"glyphicon glyphicon-chevron-left\"><\/span> <\/button>";
        tpl += "       <button ng-click=\"nextSlide()\" class=\"btn btn-sm pull-right\"><span class=\"glyphicon glyphicon-chevron-right\"><\/span> <\/button>";
        tpl += "    <\/div>";
        tpl += "<\/div>";

        tpl += "<style>";
        tpl += "    .swipe {";
        tpl += "        overflow: hidden;";
        tpl += "        visibility: hidden;";
        tpl += "        position: relative;";
        tpl += "        \/* IOS6 issue fix*\/";
        tpl += "        -webkit-perspective: 1000;";
        tpl += "        -webkit-backface-visibility: hidden;";
        tpl += "    }";
        tpl += "    .swipe-wrap {";
        tpl += "        overflow: hidden;";
        tpl += "        position: relative;";
        tpl += "    }";
        tpl += "    .swipe-wrap > div {";
        tpl += "        float:left;";
        tpl += "        width:100%;";
        tpl += "        position: relative;";
        tpl += "    }";
        tpl += "    .swipe-position{";
        tpl += "        color: #494949;";
        tpl += "        font-size: 27px;";
        tpl += "        line-height: 1.3;";
        tpl += "        text-align: center; }";
        tpl += "    .swipe-position em{";
        tpl += "        display: inline-block;";
        tpl += "        font-family: sans-serif;";
        tpl += "        font-style: normal;";
        tpl += "        padding: 0 3px; }";
        tpl += "    .swipe-position em.on{";
        tpl += "        color: #dedede;}";
        tpl += "    .swipe-nav {";
        tpl += "        width: 50%;";
        tpl += "        margin: auto;";
        tpl += "    }";
        tpl += "<\/style>";
        tpl += "";

        return{
        restrict:'E',
        link:linker,
        controller: ['$scope', '$attrs', '$element', function($scope, $attrs, $element) {
            $scope.init = function(){
                $scope.elementId = 'slider-'+$scope.id
                if($scope.nav==="false"){
                    $('#'+$scope.id).find('.swipe-nav').css('display','none')
                }
                // fixme:
                if($scope.nav==="top"){
                    var leftElement = $('#'+$scope.id).find('.swipe-wrap');
                    var rightElement = $('#'+$scope.id).find('.swipe-nav');
                    rightElement.addClass('top');
                    leftElement.insertBefore(rightElement);
                }
                var _scope = $scope;
                var interval = setInterval(function(){myTimer()},10);
                function myTimer(){
                    if($('#'+_scope.id).find('.swipe-item').size()){
                        clearInterval(interval)
                        _scope.renderSwiper();
                        _scope.renderPager($('#'+_scope.id).find('.swipe-item').size())
                    }
                }
            };
            $scope.renderSwiper = function(){
                $scope.mySwipe = new Swipe(document.getElementById($scope.elementId), {
                    startSlide: 0,
                    speed: $scope.speed || 500,
                    auto: $scope.auto || false,
                    continuous: $scope.continuous || false,
                    disableScroll: false,
                    stopPropagation: false,
                    callback: function(pos, el) {
                        $scope.safeApply(function(pos,el){
                            $scope.executeCallback(pos,el);
                            $scope.updatePager($scope.mySwipe.getPos());
                        });
                    },
                    transitionEnd: function(pos, el) {}
                });
            };
            $scope.renderPager = function(size){
                var html = '';
                for (i = 0; i < size; i++) {
                    html += '<em>•</em>';
                }
                $('#'+$scope.elementId+' .swipe-position').append(html)
                $scope.updatePager(0);
            }
            $scope.updatePager = function(pos){
                $('#'+$scope.elementId+' em').each(function(i){
                    $(this).removeClass('on');
                    if(i==pos){
                        $(this).addClass('on');
                    }
                })
            }
            $scope.executeCallback = function(pos,el){
                if(! $scope.callback){return}
                $scope.callback(pos,el);
            }
//            $scope.swiperCallBack = function(pos){
//                alert(pos)
//            }
            $scope.nextSlide = function(){
                if($scope.next){
                    $scope.next.call()
                    //return
                }
                $scope.mySwipe.next();
            }
            $scope.prevSlide = function(){
                if($scope.prev){
                    $scope.prev.call()
                    //return
                }
                $scope.mySwipe.prev();
            }
            $scope.safeApply = function(fn) {
                var phase = this.$root.$$phase;
                if(phase == '$apply' || phase == '$digest')
                    this.$eval(fn);
                else
                    this.$apply(fn);
            };
        }],
        //templateUrl:'app/components/base-app/ng-swipe/swipe.html',
        template: tpl,
        transclude:true,
        scope:{
            ngModel: '=',
            id: '@',
            nav: '@',
            speed: '@',
            continuous: '=',
            auto: '=',
            callback: '=',
            next: '=',
            prev: '='
        }
    }
});
