(function($){

$.fn.projectPhotos = function(options){

    var defaults = {
        button: '#image_carousel_button',
        thumbs: '.photo_thumb',
        photos: '.carousel_photo',
        start: 0,
        fadeTime: 800
    };  

    var options = $.extend(defaults, options);  
        
    return this.each(function() {
        var obj = $(this);
        var button = obj.find(options.button);
        var images = obj.find(options.photos);
        var thumbs = obj.find(options.thumbs);
        var currentId = 'photo_'+options.start;
        var currentImage = undefined;
        var ready = true;
        
        //Foto's goed positioneren in header.
        images.each(function(){
            var height = $(this).height();
            if(height == 0){
                $(this).children('#carousel_photos img').load(function(){
                    var height = $(this).height();
                    var top = Math.floor((height - 223) / 2);
                    $(this).parent().css('z-index', 0);
                    $(this).parent().css('top', '-'+top+'px');
                    if($(this).parent().attr('id') == currentId){
                        currentImage = $(this).parent();
                        currentImage.parent().css('z-index', 2);
                    }else{
                        $(this).parent().css('z-index', 0).hide();
                    }
                })
            }else{
                var top = Math.floor((height - 223) / 2);
                $(this).css('top', '-'+top+'px');
                $(this).css('z-index', 0);
                if($(this).attr('id') == currentId){
                    currentImage = $(this);
                    currentImage.css('z-index', 2);
                }else{
                    $(this).css('z-index', 0).hide();
                }
            }
        })
        
        thumbs.each(function(){
            $(this).click(function(){
                $("<div id='overlay'><div id='overlay_bg></div></div>").appendTo("body");
                $('#overlay').galleria({
                    data_source: $('#carousel_photos'),
                    show: $(this).attr('id').slice(6),
                    width: 800,
                    height: 500
                }).append('<div id="overlay_bg"></div>');
                $('#overlay_bg').css('z-index', '-1');
                $('#overlay_bg').fadeTo(0, 0.8);
            })
        });
    });   
};
  
/*$.fn.projectPhotos = function(options){

    var defaults = {
        button: '#image_carousel_button',
        thumbs: '.photo_thumb',
        photos: '.carousel_photo',
        start: 0,
        fadeTime: 800
    };  

    var options = $.extend(defaults, options);  
        
    return this.each(function() {
        var obj = $(this);
        var button = obj.find(options.button);
        var images = obj.find(options.photos);
        var thumbs = obj.find(options.thumbs);
        var currentId = 'photo_'+options.start;
        var currentImage = undefined;
        var ready = true;
        
        //Foto's goed positioneren in header.
        images.each(function(){
            var height = $(this).height();
            if(height == 0){
                $(this).children('#carousel_photos img').load(function(){
                    var height = $(this).height();
                    var top = Math.floor((height - 223) / 2);
                    $(this).parent().css('z-index', 0);
                    $(this).parent().css('top', '-'+top+'px');
                    if($(this).parent().attr('id') == currentId){
                        currentImage = $(this).parent();
                        currentImage.parent().css('z-index', 2);
                    }else{
                        $(this).parent().css('z-index', 0).hide();
                    }
                    $(this).css('cursor', 'pointer');
                    $(this).click(function(){
                        $("<div id='overlay'><div id='overlay_bg'></div></div>").appendTo("body");
                        $('#overlay').galleria({
                            data_source: $(this).parent(),
                            show: $(this).parent().attr('id').slice(6),
                            width: 800,
                            height: 500
                        }).append('<div id="overlay_bg"></div>');
                        $('#overlay_bg').fadeTo(0, 0.8);
                    })
                })
            }else{
                var top = Math.floor((height - 223) / 2);
                $(this).css('top', '-'+top+'px');
                $(this).css('z-index', 0);
                if($(this).attr('id') == currentId){
                    currentImage = $(this);
                    currentImage.css('z-index', 2);
                }else{
                    $(this).css('z-index', 0).hide();
                }
                $(this).css('cursor', 'pointer');
                $(this).click(function(){
                    $("<div id='overlay'><div id='overlay_bg'></div></div>").appendTo("body");
                    $('#overlay').galleria({
                        data_source: $(this).parent(),
                        show: $(this).attr('id').slice(6),
                        width: 800,
                        height: 500
                    }).append('<div id="overlay_bg"></div>');
                    $('#overlay_bg').fadeTo(0, 0.8);
                })
            }
        })
    
        var currentThumb = thumbs.parent().find('#'+currentId);
        thumbs.not('#'+currentId).fadeTo(0, 0.5);
        
        thumbs.each(function(){
            $(this).click(function(){
                $("<div id='overlay'><div id='overlay_bg'></div></div>").appendTo("body");
                $('#overlay').galleria({
                    data_source: $('#carousel_photos'),
                    show: $(this).attr('id').slice(6),
                    width: 800,
                    height: 500
                }).append('<div id="overlay_bg"></div>');
                $('#overlay_bg').fadeTo(0, 0.8);
            })
        });
    
        /*thumbs.each(function(){
            $(this).click(function(){
                var id = $(this).attr('id');
                if(ready == true && currentImage.attr('id') != id){
                    ready = false;
                    
                    var nextImage = images.parent().find('#'+id);
                    var nextThumb = thumbs.parent().find('#'+id);
                    nextImage.css('z-index', 1);
                    nextImage.show();
                    currentThumb.fadeTo(0, 0.5);
                    nextThumb.fadeTo(0, 1);
                    currentThumb = nextThumb;
                    currentImage.fadeOut(options.fadeTime, function(){
                        currentImage.css('z-index', 0);
                        currentImage = nextImage;
                        currentImage.css('z-index', 2);
                        ready = true;
                    });
                }
            });
        });
    });   
};*/

$.fn.projectCarousel = function(options){  

    var defaults = {
        button: '#image_carousel_button',
        photos: '.carousel_photo',
        fadeTime: 1200,
        interval: 10000,
        url: 'projecten/'
    };  

    var options = $.extend(defaults, options);  
    
    return this.each(function() {
        var obj = $(this);
        var button = obj.find(options.button);
        var images = obj.find(options.photos);
        var startId = 'photo_'+Math.floor(Math.random()*images.length);
        var currentImage;
        
        obj.css('z-index', 0);
        
        images.each(function(){
            var height = $(this).height();
            if(height == 0){
                $(this).children('img').load(function(){
                    var height = $(this).height();
                    var top = Math.floor((height - 223) / 2);
                    $(this).parent().css('z-index', 0);
                    $(this).parent().css('top', '-'+top+'px');
                    if($(this).parent().attr('id') == startId){
                        currentImage = $(this).parent();
                        $(this).parent().css('z-index', 2);
                    }else{
                        $(this).parent().css('z-index', 0).hide();
                    }
                })
            }else{
                var top = Math.floor((height - 223) / 2);
                $(this).css('top', '-'+top+'px');
                $(this).css('z-index', 0);
                if($(this).attr('id') == startId){
                    currentImage = $(this);
                    currentImage.css('z-index', 2);
                }else{
                    $(this).css('z-index', 0).hide();
                }
            }
        })
        
        button.click(function(){
            top.location = options.url+currentImage.attr('name');
        });
        
        setInterval(function(){
            var nextImage = obj.find('#photo_'+Math.floor(Math.random()*images.length));
            
            while(nextImage.attr('id') == currentImage.attr('id')){
                nextImage = obj.find('#photo_'+Math.floor(Math.random()*images.length));
            }
            
            nextImage.css('z-index', 1);
            nextImage.show();
            currentImage.fadeOut(options.fadeTime, function(){
                currentImage.css('z-index', 0);
                currentImage = nextImage;
                currentImage.css('z-index', 2);
                button.click(function(){
                   top.location = url.currentImage.attr('name');
                });
            });
        }, options.interval);
    });
};
})(jQuery);