/**
 * Created by joepvanhunsel on 18-03-14.
 */


//set jQuery selectors
var $viewer = $('#viewer');
var $slider = $('.slider');
var $loader = $('.loader');

//items is filled by php
var string = "";
var data = "";
var index = 0;
var disable = false;
var first = false;

var $arrowLeft = $('.arrow_left');
var $left = $('.left');
var $arrowRight = $('.arrow_right');
var $right = $('.right');

var $viewerList = $('.viewer_list').viewer();

var $cs = $('.foto_select').customSelect();


//get number of background images
var bg = $('.background').children('li').size();
bg= bg-1;

//if there is more than 1 background image then set time to fade between bg images
if (bg > 0){
    window.setInterval(fade,4000);
}

//hide the background images so that the slider works correctly
for (var i=0; i < bg; i++)
{
    $slider.eq(i).hide();
}

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
            klik(index,'left');
            break;

        case 39: // right
            klik(index,'right');
            break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});


$arrowRight.hover(
function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "0.5"}, "slow");
    }
);
$right.hover(
function() {
            $arrowRight.stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $arrowRight.stop().animate({"opacity": "0.5"}, "slow");
    }
);
$arrowLeft.hover(
function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "0.5"}, "slow");
    }
);
$left.hover(
function() {
        $arrowLeft.stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $arrowLeft.stop().animate({"opacity": "0.5"}, "slow");
    }
);


$('.foto_select').change(function()
{
    var foto = $(this).val();
    foto = foto-2;
    klik(foto,'right');
});

//buttons for image viewer
$('.left').click(function(){
    klik(index,'left');
});

$arrowLeft.click(function(){
    klik(index,'left');
});

$right.click(function(){
    klik(index,'right');
});
$arrowRight.click(function(){
    klik(index,'right');
});

function klik(value,direction){
    if (disable == false){
        disable = true;
        $loader.fadeIn();
        $viewerList.data('viewer').goTo(value,direction);
        if (direction=='left')
        {
            index = value-1;
            if (index == -1){
                index = items.length-1;
            }
        }else if(direction == "right")
        {
            index = value+1;
            if (index == items.length){
                index = 0;
            }
        }
    }
}

//variables to know which to fade in / out
//iIndex is the image shown, iFader is the image which is faded in
var iIndex = bg;
var iFader = iIndex+1;
function fade()
{
    //reset the variables if you get to the last image
    if (iIndex > bg)
    {
        iIndex=0;
    }
    if (iFader > bg)
    {
        iFader = 0;
    }//fade images
    $slider.eq(iFader).fadeIn(2000);
    $slider.eq(iIndex).fadeOut(2000);
    //select the next pictures
    iIndex++;
    iFader++;
}

if ($viewerList.data('viewer'))
{
    $viewerList.data('viewer').goTo(-1);
}
$(window).load(function() {
    resizebg();
});

//adjust the size of the bg image when resizing the window
$(window).resize (resizebg);

 function resizebg()
 {
     //get container height + width and calculate ratio
     var cw = $(window).width();
     var ch = $(window).height();
     var bgRatio = cw/ch;

     //get image height + width and calculate ratio
     var iw = $slider.width();
     var ih = $slider.height();
     var iRatio = iw/ih;

     //check ratio for background image
     if (bgRatio > iRatio)
     {
         iw = $(window).width();
         ih = iw/iRatio;
     }else
     {
         ih = $(window).height();
         iw = ih*iRatio;
     }

     var mL = iw/2;
     //var mT = ih/2;
     $slider.css({
         /*'marginTop': -mT,*/
         'left': '50%',
         'marginLeft': -mL+'px',
         'height': ih,
         'width': iw
     });
     $('.bgoverlay').css({
         /*'marginTop': -mT,*/
         'left': '50%',
         'marginLeft': -mL+'px',
         'height': ih,
         'width': iw
     });
     $slider.show();
     if (first == true){
         if ($viewerList.data('viewer'))
         {
             $viewerList.data('viewer').resizeViewer(false);
         }
     }else
     {
         first = true;
     }
 }