$(function() {

    var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50;

    function showSlide() {

        var slide = slides[currentSlide];

        jqcaption.find("h2").text(slide.title);

        jqcaption.find("h3").text(slide.author);

        jqcaption.find("p").text(slide.description);

        if (slide.image && slide.image.width) {

            var ww = jqwin.width(),

                wh = jqwin.height(),

                cw = jqcaption.outerWidth(),

                ch = jqcaption.outerHeight(),

                wi = slide.image.width,

                hi = slide.image.height,    

                w1 = ww - 2 * margin, w2 = w1 - cw

                h1 = wh - 2 * margin, h2 = h1 - ch,

                ra = Math.max(

                    Math.min((h1 / hi), (w2 / wi)),

                    Math.min((h2 / hi), (w1 / wi))

                ),

                wa = wi * ra, ha = hi * ra,

                xa = ww - margin - wa,

                rb = Math.max(ww / wi, wh / hi),

                wb = wi * rb, hb = hi * rb,

                xb = (ww - wb) / 2, yb = (wh - hb) / 2;

            jqcanvas.attr({

                width: ww,

                height: wh

            });

            var ctx = jqcanvas[0].getContext('2d');

            ctx.drawImage(slide.image, xb, yb, wb, hb);

            ctx.fillStyle = 'rgba(255,255,255,.65)';

            ctx.fillRect(0,0,ww,wh);

            ctx.fillStyle = 'rgba(0,0,0,.3)';

            ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch);

            ctx.fillRect(xa + 4, margin + 4, wa, ha);

            ctx.drawImage(slide.image, xa, margin, wa, ha);

        }

    }

    function nextSlide() {

        currentSlide = (currentSlide + 1) % slides.length;

        showSlide();

        return false;

    }

    function prevSlide() {

        currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1);

        showSlide();

        return false;

    }

    var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap");

    function resetTO() {

        clearTimeout(hideTO);

        if (!isInArrow) {

            hideTO = setTimeout(function() {

                jqArrows.hide();

            }, 1000);

        }

    }

    $("body").mousemove(function() {

        jqArrows.show();

        resetTO();

        return false;

    });

    jqArrows.hover(function() {

        isInArrow = true;

        resetTO();

    }, function() {

        isInArrow = false;

        resetTO();

    });

    $(".left-arrow").click(prevSlide);

    $(".right-arrow").click(nextSlide);

    slides.forEach(function(slide, k) {

        slide.image = new Image();

        slide.image.onload = function() {

            if (k === currentSlide) {

                showSlide();

            }

        };

        slide.image.src = imgurlbase + slide.url;

    });

    showSlide();

    jqwin.resize(showSlide);

});