//requires jquery.hammer.js
//JVSlideShow JQuery Plugin
var jvIsFullScreen = false;
(function($) {

    var defaults = {
        autostart: true,
        controls: {
            fullscreen: true,
            play: true,
            pause: true,
            prev: true,
            next: true,
            albumchooser: true,
            title: true
        },
        urldata: "./example.json.php",
        albumOverviewUrl: "./picasaAlbums.php",
        backgroundColor: "#000000",
        interval: 5000
    };

    $.jvSlideshow = function(element, options) {

        var plugin = this;
        plugin.settings = {};

        var $element = $(element);

        var slideContainer = [];
        var slideUrls;
        var $slideA;
        var $slideB;
        var currentSlideIndex = 0;
        var slideA_Visible = false;
        var running = false;
        var myIntervalTimer;
        var autoStartAtShowSlide = false;

        try {
            $element.hammer().on("swipeleft",function(event){
                $(".jvslideshow-controls-previous").hide();
                $(".jvslideshow-controls-next").hide();

                nextHandler();
            });

            $element.hammer().on("swiperight",function(event){
                $(".jvslideshow-controls-previous").hide();
                $(".jvslideshow-controls-next").hide();
                prevHandler();
            });
        }catch(err){
            console.log("Error: probably hammer not included");
        }

        var loadUrlData = function(url){
            pauseHandler();
            $.getJSON(url, function(data){
                //success http request
            })
                .done(function(data){
                    slideUrls = data;
                    //data bevat een array met urls, in elk geval een geldig json object
                    if(plugin.settings.autostart === true){
                        autoStartAtShowSlide = true;
                    }
                    prefetchSlide(0,true);

                    //currentSlideIndex++;
                    //veeg eventueel het items block leeg.
                    //maak placeholders voor het aantal items
                    //laad het eerste item, toon deze,

                    //laad daarna onmiddelijk het tweede item.

                })
                .fail(function(data){
                    console.log("fail");
                    //geen json ontvangen
                })
                .always(function(data){
                    //console.log("always");
                    //lijkt me wel duidelijk wat dit doet.
                });
        };

        var playHandler = function(event){
            //console.log("play");
            if(running === false){
                running = true;
                $(".jvslideshow-controls-play").addClass('jvslideshow-controls-play-active');
                $(".jvslideshow-controls-pause").removeClass('jvslideshow-controls-pause-active');
                myIntervalTimer = window.setInterval(function(){
                    nextHandler();
                },plugin.settings.interval);
            }
        };

        var pauseHandler = function(event){
            //console.log("pause");
            if(running === true){
                running = false;
                $(".jvslideshow-controls-pause").addClass('jvslideshow-controls-pause-active');
                $(".jvslideshow-controls-play").removeClass('jvslideshow-controls-play-active');
                clearInterval(myIntervalTimer);

            }
        };

        var prevHandler = function(event){
            //console.log("prev");
            pauseHandler();
            if(currentSlideIndex>0){
                currentSlideIndex--;
            }else{
                currentSlideIndex = slideUrls.length - 1;
            }
            showSlide(currentSlideIndex);
            if(currentSlideIndex>0){
                prefetchSlide(currentSlideIndex-1);
            }else{
                prefetchSlide(slideUrls.length - 1);
            }
        };

        var nextHandler = function(event){

            pauseHandler();
            if(currentSlideIndex < slideUrls.length-1){
                currentSlideIndex++;
            }else{
                currentSlideIndex = 0;
            }
            showSlide(currentSlideIndex);
            var index = currentSlideIndex;
            if(currentSlideIndex < slideUrls.length-1){
                index++;
            }else{
                index = 0;
            }
            if(typeof slideContainer[index] === 'undefined') prefetchSlide(index);
        };


        var isFullScreen = false;
        var beforeFullScreenTop;
        var beforeFullScreenLeft;
        var beforeFullScreenRight;
        var beforeFullScreenBottom;
        var beforeFullScreenHeight;
        var beforeFullScreenWidth;
        var beforePosition;
        var beforeZIndex;
        var beforeViewportContent;

        var enterFullScreen = function(){
            isFullScreen = true;
            jvIsFullScreen = true;
            $(document).trigger("jvFullScreenChange", true);

            var elem = element;
            var ios = false;
            //enter full screen
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }else{
                //waarschijnlijk
                ios = true;
                viewport = document.querySelector("meta[name=viewport]");
                beforeViewportContent = viewport.getAttribute('content');
                viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

            }


            //test wat de nieuwe window size is:

            //console.log("windowSize: fullScreen:");
            //console.log(screen.height);
            //console.log(screen.width);

            //in firefox wordt het gekozen element automatisch op de schermresulotie gezet.
            //in chrome en safari blijven de top/left/right/height van toepassing.
            beforeFullScreenTop = element.style.top;
            beforeFullScreenBottom = element.style.bottom;
            beforeFullScreenLeft = element.style.left;
            beforeFullScreenRight = element.style.right;
            beforeFullScreenWidth = element.style.width;
            beforeFullScreenHeight = element.style.height;
            beforePosition = element.style.position;
            beforeZIndex = element.style.zIndex;
            if(ios === true){
                var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                $element.css("height",h);
                $element.css("width",w);
                $element.css("position","fixed");



            }else{
                $element.css("height","100%");
                $element.css("width","100%");
                $element.css("bottom","0");
                $element.css("right","0");

            }

            $(".jvslideshow-controls-fullscreen").addClass("jvslideshow-controls-fullscreen-exit");
            $element.css("top","0");
            $element.css("left","0");
            $element.css("z-index",1000);
            setTimeout(function(){window.scrollTo(0,10);},300);
            //console.log('width, height: ' + $element.width() + ',' + $element.height());

            setTimeout(function(){$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',exitFullScreen);},1000);
        };

        var exitFullScreen = function(){
            $(document).trigger("jvFullScreenChange", false);
            isFullScreen = false;
            jvIsFullScreen = false;
            $(document).off('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',exitFullScreen);
            var elem = element;
            //exit full screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }else{
                //waarschijnlijk
                ios = true;
                viewport = document.querySelector("meta[name=viewport]");
                viewport.setAttribute('content', beforeViewportContent);
            }
            //terugzetten afmeting properties
            $element.css("top", beforeFullScreenTop);
            $element.css("bottom", beforeFullScreenBottom);
            $element.css("left", beforeFullScreenLeft);
            $element.css("right", beforeFullScreenRight);
            $element.css("width", beforeFullScreenWidth);
            $element.css("height", beforeFullScreenHeight);
            $element.css("position",beforePosition);
            $element.css("z-index",beforeZIndex);
        };

        $(".jvslideshow-controls-fullscreen").removeClass("jvslideshow-controls-fullscreen-exit");


        var fullScreenHandler = function(event){
            var elem = element;
            if (!document.fullscreenElement &&    // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                if(isFullScreen === false){
                    enterFullScreen();
                }else{
                    exitFullScreen();
                }
            } else {
                exitFullScreen();
            }
        };

        var albumChooserHandler = function(event){
            window.location.href = plugin.settings.albumOverviewUrl;
        };


        var showSlide = function(index){
            if(typeof slideContainer[index] === 'undefined') prefetchSlide(index, true);
            else{
                if(slideA_Visible === false){
                    $slideA.after($slideB);
                    $slideB.html(slideContainer[index]);
                    slideA_Visible = true;
                    $slideA.css("z-index",1);
                    $slideB.css("z-index",0);
                    $slideB.show(0);
                    $slideA.fadeOut(1000);

                }else{
                    $slideB.after($slideA);
                    $slideA.html(slideContainer[index]);
                    slideA_Visible = false;
                    $slideB.css("z-index",1);
                    $slideA.css("z-index",0);
                    $slideA.show(0);
                    $slideB.fadeOut(1000);

                }
                if(autoStartAtShowSlide === true){
                    //deze variable is alleen nodig bij de eerste keer voor de autostart na laden slides.
                    //als hij al loopt, willen we dit niet telkens opnieuw triggeren.
                    autoStartAtShowSlide = false;
                    playHandler();
                }
            }
        };

        var prefetchSlide = function(index, showImmediately){
            //default is false;
            showImmediately = (typeof showImmediately === 'undefined') ? false : showImmediately;

            $.ajax({url: slideUrls[index], dataType: "html"})
                .done(function(slideData){
                    $slideData = $("" + slideData);
                    $slideData.addClass("jvslideshow-slide");
                    slideContainer[index] = $slideData;
                    if(showImmediately === true){
                        showSlide(index);
                    }
                })
                .fail(function(slideData){

                })
                .always(function(slideData){

                });
        };

        var $titleBar;
        var $playButton;
        var $pauseButton;
        var $prevButton;
        var $nextButton;
        var $fullScreenButton;
        var $albumChooserButton;

        plugin.init = function() {
            //load plugin defaults/options
            plugin.settings = $.extend({}, defaults, options);

            $slideA = $('<div class="jvslideshow-slide-a"></div>');
            $slideB = $('<div class="jvslideshow-slide-b"></div>');

            var $controlsOverlay = $('<div class="jvslideshow-controls" ></div></div>');
            $titleBar = $('<div class="jvslideshow-titlebar"></div>');
            var $titleBarContainer = $('<div class="jvslideshow-titlebar-container"></div>');
            var $titleBarBackground = $('<div class="jvslideshow-titlebar-background"></div>');
            $titleBarContainer.append($titleBarBackground);
            $titleBarContainer.append($titleBar);
            $playButton = $('<div class="jvslideshow-controls-play" title="Automatisch afspelen"></div>');
            $pauseButton = $('<div class="jvslideshow-controls-pause" title="Stop automatisch afspelen"></div>');
            $prevButton = $('<div class="jvslideshow-controls-previous" title="Vorige afbeelding"></div>');
            $nextButton = $('<div class="jvslideshow-controls-next" title="Volgende afbeelding">');
            $fullScreenButton = $('<div class="jvslideshow-controls-fullscreen" title="Volledig-scherm weergave"></div>');
            $albumChooserButton = $('<div class="jvslideshow-controls-albumchooser" title="Naar foto album overzicht"></div>');

            if(plugin.settings.controls.title){
                $titleBar.html(plugin.settings.title);
            }
            $playButton.click(playHandler);
            $pauseButton.click(pauseHandler);
            $prevButton.click(prevHandler);
            $nextButton.click(nextHandler);
            $fullScreenButton.click(fullScreenHandler);
            $albumChooserButton.click(albumChooserHandler);

            $controlsOverlay.append($titleBarContainer);
            $controlsOverlay.append($playButton);
            $controlsOverlay.append($pauseButton);
            $controlsOverlay.append($prevButton);
            $controlsOverlay.append($nextButton);
            $controlsOverlay.append($fullScreenButton);
            $controlsOverlay.append($albumChooserButton);

            $element.append($slideA);
            $element.append($slideB);
            $element.append($controlsOverlay);
            loadUrlData(plugin.settings.urldata);
        };
        plugin.init();
    };

    $.fn.jvSlideshow = function(options) {

        if (typeof options == "object" || options == undefined) {
            //initialization
            return this.each(function() {
                if (undefined == $(this).data('jvSlideshow')) {
                    var plugin = new $.jvSlideshow(this, options);
                    $(this).data('jvSlideshow', plugin);
                }
            });
        }
        if (typeof options == "string") {
            // method or argument query
            switch (command.toLowerCase()) {
                case 'serialize':
                    return this;
                //other commands here.
            }
        }
    };
})(jQuery);