$.swapImage(".swapImage");

$(function() {
	$('a.lightbox').lightBox();
});

$(document).ready(function(){

	$("#slider").easySlider({
		//auto: true, 
		continuous: true
	});
	
	$('.tooltip').tooltip({
		track: true,
		delay: 0,
		showURL: false,
		showBody: " - ",
		extraClass: "pretty",
		fixPNG: true,
		left: -120
	});
	
	$(document).pngFix( );

});



var gillSans = {
  src: '/swf/GillSansLight.swf'
  ,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
};

// You probably want to switch this on, but read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad> first.
// sIFR.useStyleCheck = true;
sIFR.activate(gillSans);

sIFR.replace(gillSans, {
  selector: 'h2.wit'
  ,css: [
	'.sIFR-root { color: #FFFFFF; font-size: 29px; }'
  ]
});

sIFR.replace(gillSans, {
  selector: 'h2.orange'
  ,css: [
	'.sIFR-root { color: #E26726; font-size: 29px; }'
  ]
});

sIFR.replace(gillSans, {
  selector: 'h3.orange'
  ,css: [
	'.sIFR-root { color: #E26726; font-size: 20px; }'
  ]
});

sIFR.replace(gillSans, {
  selector: 'h3.blue'
  ,css: [
	'.sIFR-root { color: #4F566B; font-size: 20px; }'
  ]
});

sIFR.replace(gillSans, {
  selector: 'h2.superWit'
  ,css: [
	'.sIFR-root { color: #FFFFFF; font-size: 55px; }'
  ]
});

sIFR.replace(gillSans, {
  selector: 'h2.superOranje'
  ,css: [
	'.sIFR-root { color: #E26726; font-size: 55px; }'
  ]
});


	
/* ----------------------------------------------------------------------------------- */
/* AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD AANBOD */
/* ----------------------------------------------------------------------------------- */
$(function(){
    $('#gallery li').each(function(idx) {
        $(this).data('index', (++idx));
    });

    $('#gallery').jcarousel({
        scroll: 4,
        initCallback: initCallbackFunction
    })
    
    function initCallbackFunction(carousel) {
        $('#aanbodImageBig').bind('image-loaded',function() {
            var idx =  $('#gallery li.active').data('index') - 2;
            
            carousel.scroll(idx);
            return false;
        });
        
        // hotkeys plugin: use arrows to control the gallery
        $(document).bind('keydown', 'right', function (evt){ $.galleria.next(); });
        $(document).bind('keydown', 'left', function (evt){ $.galleria.prev(); });
        $(document).bind('keydown', 'up', function (evt){ $('.jcarousel-next-horizontal').click(); return false; });
        $(document).bind('keydown', 'down', function (evt){ $('.jcarousel-prev-horizontal').click(); return false; });
    };

    // load and fade-in thumbnails
    $('#gallery li img').css('opacity', 0).each(function() {    
        if (this.complete || this.readyState == 'complete') { $(this).animate({'opacity': 1}, 300) } 
        else { $(this).load(function() { $(this).animate({'opacity': 1}, 300) }); }
    });

    
    $('#gallery').galleria({
        // #img is the empty div which holds full size images
        insert: '#aanbodImageBig',
        
        // enable history plugin
        history: true,
        
        // function fired when the image is displayed
        onImage: function(image, caption, thumb) {        
            // fade in the image 
            image.hide().fadeIn(500);
            
            // animate active thumbnail's opacity to 1, other list elements to 0.6
            thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.6)
            
            // $('#img').data('currentIndex', $li.data('index')).trigger('image-loaded')
            
            $('#aanbodImageBig')
                .trigger('image-loaded')
                .hover(
                    function(){ $('#img .caption').stop().animate({height: 50}, 250) },
                    function(){ 
                        if (!$('#show-caption').is(':checked')) {
                            $('#img .caption').stop().animate({height: 0}, 250) 
                        }
                    }
                );
        },
        
        // function similar to onImage, but fired when thumbnail is displayed
        onThumb: function(thumb) {
            var $li = thumb.parent(),
                opacity = $li.is('.active') ? 1 : 0.6;
            
            // hover effects for list elements
            $li.hover(
                function() { $li.fadeTo(200, 1); },
                function() { $li.not('.active').fadeTo(200, opacity); }
            )
        }        
    }).find('li:first').addClass('active') // display first image when Galleria is loaded
    
    $('#aanbodImageBig .caption').css('height', 0)
    
    $('#slideshow').hide()
    
    // this one is for Firefox, which loves to leave fields checked after page refresh
    $('#toggle-slideshow, #show-caption').removeAttr('checked')
    
    $('#show-caption').change(function(){
    	if (this.checked) {
    		$('#aanbodImageBig .caption').stop().animate({height: 50}, 250)
    	} else {
            $('#aanbodImageBig .caption').stop().animate({height: 0}, 250)   
        }
    })

  
    var slideshow,
        slideshowPause =  $('#slideshow-pause').val() 

    $('#slideshow-pause').change(function(){
        slideshowPause = this.value
        
        // clear interval when timeout is changed
        window.clearInterval(slideshow)

        // and set new interval with new timeout value
        slideshow = window.setInterval(function(){
            $.galleria.next()
        }, slideshowPause * 1000) // must be set in milisecond
    })

    $('input#toggle-slideshow').change(function(){
        if (this.checked) {
            $('#slideshow').fadeIn()
            
            // set interval when slideshow is enabled
            slideshow = window.setInterval(function(){
                $.galleria.next()
            }, slideshowPause * 1000)
        } else {
            $('#slideshow').fadeOut()
            
            // clear interval when slideshow if disabled
            window.clearInterval(slideshow)
        }
    })
});



/* ----------------------------------------------------------------------------------- */
/* PROJECTEN PROJECTEN PROJECTEN PROJECTEN PROJECTEN PROJECTEN PROJECTEN PROJECTEN PRO */
/* ----------------------------------------------------------------------------------- */
$(function(){
    $('#gallery2 li').each(function(idx) {
        $(this).data('index', (++idx));
    });

    $('#gallery2').jcarousel({
        scroll: 4,
        initCallback: initCallbackFunction
    })
    
    function initCallbackFunction(carousel) {
        $('#projectImageBig').bind('image-loaded',function() {
            var idx =  $('#gallery2 li.active').data('index') - 2;
            
            carousel.scroll(idx);
            return false;
        });
        
        // hotkeys plugin: use arrows to control the gallery
        $(document).bind('keydown', 'right', function (evt){ $.galleria.next(); });
        $(document).bind('keydown', 'left', function (evt){ $.galleria.prev(); });
        $(document).bind('keydown', 'up', function (evt){ $('.jcarousel-next-horizontal').click(); return false; });
        $(document).bind('keydown', 'down', function (evt){ $('.jcarousel-prev-horizontal').click(); return false; });
    };

    // load and fade-in thumbnails
    $('#gallery2 li img').css('opacity', 0).each(function() {    
        if (this.complete || this.readyState == 'complete') { $(this).animate({'opacity': 1}, 300) } 
        else { $(this).load(function() { $(this).animate({'opacity': 1}, 300) }); }
    });

    
    $('#gallery2').galleria({
        // #img is the empty div which holds full size images
        insert: '#projectImageBig',
        
        // enable history plugin
        history: true,
        
        // function fired when the image is displayed
        onImage: function(image, caption, thumb) {        
            // fade in the image 
            image.hide().fadeIn(500);
            
            // animate active thumbnail's opacity to 1, other list elements to 0.6
            thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.6)
            
            // $('#img').data('currentIndex', $li.data('index')).trigger('image-loaded')
            
            $('#projectImageBig')
                .trigger('image-loaded')
                .hover(
                    function(){ $('#img .caption').stop().animate({height: 50}, 250) },
                    function(){ 
                        if (!$('#show-caption').is(':checked')) {
                            $('#img .caption').stop().animate({height: 0}, 250) 
                        }
                    }
                );
        },
        
        // function similar to onImage, but fired when thumbnail is displayed
        onThumb: function(thumb) {
            var $li = thumb.parent(),
                opacity = $li.is('.active') ? 1 : 0.6;
            
            // hover effects for list elements
            $li.hover(
                function() { $li.fadeTo(200, 1); },
                function() { $li.not('.active').fadeTo(200, opacity); }
            )
        }        
    }).find('li:first').addClass('active') // display first image when Galleria is loaded
    
    $('#projectImageBig .caption').css('height', 0)
    
    $('#slideshow').hide()
    
    // this one is for Firefox, which loves to leave fields checked after page refresh
    $('#toggle-slideshow, #show-caption').removeAttr('checked')
    
    $('#show-caption').change(function(){
    	if (this.checked) {
    		$('#projectImageBig .caption').stop().animate({height: 50}, 250)
    	} else {
            $('#projectImageBig .caption').stop().animate({height: 0}, 250)   
        }
    })

  
    var slideshow,
        slideshowPause =  $('#slideshow-pause').val() 

    $('#slideshow-pause').change(function(){
        slideshowPause = this.value
        
        // clear interval when timeout is changed
        window.clearInterval(slideshow)

        // and set new interval with new timeout value
        slideshow = window.setInterval(function(){
            $.galleria.next()
        }, slideshowPause * 1000) // must be set in milisecond
    })

    $('input#toggle-slideshow').change(function(){
        if (this.checked) {
            $('#slideshow').fadeIn()
            
            // set interval when slideshow is enabled
            slideshow = window.setInterval(function(){
                $.galleria.next()
            }, slideshowPause * 1000)
        } else {
            $('#slideshow').fadeOut()
            
            // clear interval when slideshow if disabled
            window.clearInterval(slideshow)
        }
    })
});