var carousellocations = {
    totalItems: null,
    itemWidth: null,
    itemMargin: null,
    totalWidth: null,
    viewportWidth: null,
    easeType: "linear",
    tweenDuration: null,
    durationPerItem: 300,

    init: function(container){
        if($(container).length == 0) return;
        
        // calculate and set variables
        carousellocations.totalItems = $(".location").length;
        carousellocations.itemWidth = $(".location").width();
        carousellocations.itemMargin = $(".location").css('margin-right').split("px");
        carousellocations.itemMargin = Number(carousellocations.itemMargin[0]);
        carousellocations.totalWidth = ((carousellocations.itemWidth + carousellocations.itemMargin) * carousellocations.totalItems);
        carousellocations.viewportWidth = $("#locations .viewport").width();
        carousellocations.tweenDuration = (carousellocations.durationPerItem * carousellocations.totalItems);

        // adjust viewport width
        $(container+" .viewport").css('width', (carousellocations.totalWidth));

        // adds script class to container
        $(container).addClass("script");

        // adds prev&next buttons
        $(container).before("<a href=\"#\" class=\"next_location\">volgende</a>");
        $(container).before("<a href=\"#\" class=\"prev_location\">vorige</a>");

        // events
        $("#locations .viewport").animate({'left' : '-810px' }, {duration: 6000 });
        //$("#locations .viewport").animate({'left' : '0' }, {duration: 3000 });
        $(".next_location").mouseover(function(){carousellocations.forward();});
        $(".prev_location").mouseover(function(){carousellocations.backward();});
        $(".next_location, .prev_location").mouseout(function(){carousellocations.stop();});
    },
    forward: function(){
        var xPos = ((Number(carousellocations.totalWidth) - Number(carousellocations.viewportWidth)) - Number(carousellocations.itemMargin));
        $("#locations .viewport").animate({'left' : '-'+xPos+'px' }, carousellocations.tweenDuration, carousellocations.easeType);
    },
    backward: function(){
        $("#locations .viewport").animate({'left' : '0' }, carousellocations.tweenDuration, carousellocations.easeType);
    },
    stop: function(){
        $("#locations .viewport").stop();
    }
}

var carouselcases = {
    totalItems: null,
    itemWidth: null,
    itemMargin: null,
    totalWidth: null,
    viewportWidth: null,
    easeType: "linear",
    tweenDuration: null,
    durationPerItem: 300,

    init: function(container){
        if($(container).length == 0) return;

        // calculate and set variables
        carouselcases.totalItems = $(".case").length;
        carouselcases.itemWidth = $(".case").width();
        carouselcases.itemMargin = $(".case").css('margin-right').split("px");
        carouselcases.itemMargin = Number(carouselcases.itemMargin[0]);
        carouselcases.totalWidth = ((carouselcases.itemWidth + carouselcases.itemMargin) * carouselcases.totalItems);
        carouselcases.viewportWidth = $("#cases .viewport").width();
        carouselcases.tweenDuration = (carouselcases.durationPerItem * carouselcases.totalItems);

        // adjust viewport width
        $(container+" .viewport").css('width', (carouselcases.totalWidth));

        // adds script class to container
        $(container).addClass("script");

        // adds prev&next buttons
        $(container).before("<a href=\"#\" class=\"next_case\">volgende</a>");
        $(container).before("<a href=\"#\" class=\"prev_case\">vorige</a>");

        // events
        $("#cases .viewport").animate({'left' : '-540px' }, {duration: 4000 });
        //$("#locations .viewport").animate({'left' : '0' }, {duration: 3000 });
        $(".next_case").mouseover(function(){carouselcases.forward();});
        $(".prev_case").mouseover(function(){carouselcases.backward();});
        $(".next_case, .prev_case").mouseout(function(){carouselcases.stop();});
    },
    forward: function(){
        var xPos = ((Number(carouselcases.totalWidth) - Number(carouselcases.viewportWidth)) - Number(carouselcases.itemMargin));
        $("#cases .viewport").animate({'left' : '-'+xPos+'px' }, carouselcases.tweenDuration, carouselcases.easeType);
    },
    backward: function(){
        $("#cases .viewport").animate({'left' : '0' }, carouselcases.tweenDuration, carouselcases.easeType);
    },
    stop: function(){
        $("#cases .viewport").stop();
    }
}

var services = {
    totalItems: null,
    itemWidth: null,
    itemMargin: null,
    totalWidth: null,
    easeType: "easeOutExpo",
    tweenDuration: null,
    durationPerItem: 400,
    direction:null,
    
    init: function(){
        if($("#services").length == 0) return;

        // calculate and set variables
        services.totalItems = $("#services div.txt").length;
        services.itemWidth = $("#services div.txt").width();
        services.itemMargin = $("#services div.txt").css('margin-right').split("px");
        services.itemMargin = Number(services.itemMargin[0]);

        var paddingLeft = $("#services div.txt").css('padding-left').split("px");
        var paddingRight = $("#services div.txt").css('padding-right').split("px");
        services.totalWidth = ((services.itemWidth + services.itemMargin) + (paddingLeft[0] + paddingRight[0]) * services.totalItems);
        services.viewportWidth = $("#services").css('width').split("px");
        services.viewportWidth = Number(services.viewportWidth[0]);
        services.tweenDuration = (services.durationPerItem * services.totalItems);

        // adjust viewport width
        $("#services").css('width', (services.totalWidth));

        // adds script class to container
        $("#services").addClass("script");

        // removes special class 'last' (added for styling when javascript is disbled)
        $("#services div.txt.last").removeClass("last");

        // place button
        $("#services").before("<a href=\"#\" class=\"readmore service\">Lees meer</a>");
        
        // init button
        $(".readmore").click(function(){
/* LETOP - de positie staat hier hard in */
            if(services.direction == null || services.direction == "forward"){
                services.direction = "backward";
                $("#services").animate({'left' : '-855px' }, services.tweenDuration, services.easeType);
                $(this).html('terug');
            }else{
                services.direction = "forward";
                $("#services").animate({'left' : '0px' }, services.tweenDuration, services.easeType);
                $(this).html('lees meer');
            }
        });
    }
}

var profiles = {
    totalItems: null,
    itemWidth: null,
    itemMargin: null,
    totalWidth: null,
    easeType: "easeOutExpo",
    tweenDuration: null,
    durationPerItem: 200,
    direction:null,

    init: function(){
        if($("#profiles").length == 0) return;

        // calculate and set variables
        profiles.totalItems = $("div.profile").length;
        profiles.itemWidth = $("div.profile").width();
        profiles.itemMargin = $("div.profile").css('margin-right').split("px");
        profiles.itemMargin = Number(profiles.itemMargin[0]);
/* LET OP - de extra padding (30) staat er hard in */
        profiles.totalWidth = ((profiles.itemWidth + profiles.itemMargin) + 30) * profiles.totalItems;
        profiles.viewportWidth = $(".viewport").css('width').split("px");
        profiles.viewportWidth = Number(profiles.viewportWidth[0]);
        profiles.tweenDuration = (profiles.durationPerItem * profiles.totalItems);

        // adjust viewport width
        $(".viewport").css('width', (profiles.totalWidth));

        // adds script class to container
        $("#profiles").addClass("script");

        ($(".facilitators li")).each(function(){
            $(this).click(function(){
                var surname = $(this).attr('class');
                var offset = $('.profile.'+surname).position();
                $(".viewport").stop();
                $(".viewport").animate({'left' : '-'+offset.left+'px' }, profiles.tweenDuration, profiles.easeType);

                $(".facilitators li").removeClass('active');
                $(this).addClass('active');
            });
        });
    }
}

var press = {
    totalItems: null,
    itemWidth: null,
    itemMargin: null,
    totalWidth: null,
    easeType: "easeOutExpo",
    tweenDuration: null,
    durationPerItem: 200,
    direction:null,

    init: function(){
			
		$("#press .readmore, #press .thumb").click(function(){
			window.open($(this).attr("href"),'the playing circle',"resizable=no,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width=1000,height=550,left=100,top=100");
			return false;
		});
		
        if($("#press").length == 0) return;

        // calculate and set variables
        press.totalItems = $("div.press-item").length;
        press.itemWidth = $("div.press-item").width();
        press.itemMargin = $("div.press-item").css('margin-right').split("px");
        press.itemMargin = Number(press.itemMargin[0]);
        press.totalWidth = (press.itemWidth + press.itemMargin) * press.totalItems;
        press.viewportWidth = $(".viewport").width();
        //press.viewportWidth = Number(press.viewportWidth[0]);
        press.tweenDuration = (press.durationPerItem * press.totalItems);
        
        // place button
        $("#press").before("<a href=\"#\" class=\"readmore press_next\">Lees meer</a>");

        // adjust viewport width
        $(".viewport").css('width', (press.totalWidth));

        $(".readmore.press_next").click(function(){
            if(press.direction == null || press.direction == "forward"){
                press.direction = "backward";
                $(".viewport").animate({'left' : '-'+((press.totalWidth - press.viewportWidth) - press.itemMargin)+'px' }, press.tweenDuration, press.easeType);
                $(this).html('terug');
            }else{
                press.direction = "forward";
                $(".viewport").animate({'left' : '0px' }, press.tweenDuration, press.easeType);
                $(this).html('lees meer');
            }
        });

    }
}

var slidesArray = new Array();

function Slideshow(){
    this.childs = null;
    this.total = null;
    this.counter = 1;
    this.fadeInterval = null;
    this.intervalTime = 3500;
    this.transitionTime = 600;
    this.randomize = true;
}

Slideshow.prototype.crossFade = function(){
	if(this.counter == 0) this.counter = this.total;

    this.counter--;
    $("img", this.childs[this.counter]).animate({opacity: 0}, this.transitionTime, "linear");

    if((this.counter - 1) == -1){
        // startover
        $("img", this.childs[this.total - 1]).animate({opacity: 1}, this.transitionTime, "linear");
       
    }else{
        // continue
        $("img", this.childs[this.counter - 1]).animate({opacity: 1}, this.transitionTime, "linear");
    }
};

var sldeshows = {
	init: function(){
		if($(".slideshow").length == 0) return;

            if($(".slideshow").length > 1){
                $('.slideshow li img').css("opacity", 1);
            }
            else{
                $('.slideshow li img').css("opacity", 0);
            }


            $('.slideshow').each(function() {
            var slideshow           = new Slideshow;
            slideshow.childs        = $(this).children();
            slideshow.total         = slideshow.childs.length;
            slideshow.counter       = slideshow.total;

            if(slideshow.childs.length > 1){
                if($(this).hasClass('wait')){
                    function wait(){
                        slideshow.fadeInterval  = setInterval(function(){slideshow.crossFade();}, slideshow.intervalTime);
                        clearInterval(waitInterval);
                    }
                    var waitInterval =  setInterval(function(){wait();}, (slideshow.intervalTime / 2));
                }else{
                    slideshow.fadeInterval  = setInterval(function(){slideshow.crossFade();}, slideshow.intervalTime);
                }
            }
            $("img", slideshow.childs[slideshow.total - 1]).animate({opacity: 1}, 0, "linear");
                slidesArray.push(slideshow);
            });
	}
};

var menu = {
	init: function() {
			
		$("#main-nav li:not(.active) a").hover(
		  function () {
			 var arrBg = $(this).stop().css('backgroundPosition').split(" ");
			$(this).animate({backgroundPosition:'('+arrBg[0] + ' 0px)'},150);

		  }, 
		  function () {
			  var arrBg = $(this).stop().css('backgroundPosition').split(" ");
			 $(this).animate({backgroundPosition:'('+ arrBg[0] + ' -12px)'},150);
		  }
		);
	
	}	
}

$(document).ready(function(){
    sldeshows.init();
    carousellocations.init("#locations");
    carouselcases.init("#cases");
    services.init();
    profiles.init();
    press.init();
	menu.init();

    $(".back").click(function(ev){
        history.back();
        ev.preventDefault();
    })

    $('.locationslider').cycle({
	prev:   '#prev',
	next:   '#next'
    });

});