(function($) {
    $.fn.extend({
        photoScroller: function(options) {
            /*
            mode            : Wordt er gebruik gemaakt van een thumb-large effect of van een link effect
            thumb-large 	: Als je op een afbeelding klikt wordt deze in de "large" weergegeven
            link        	: Als je op het element klikt ga je naar een andere pagina
                
            stretchEleTag	: Het element dat binnen de scroller beweegt. 
            scrollTag       : Binnen het huidige element wordt gezocht naar deze tag als URL / IMG
            scrollSpeed     : Snelheid van het scrollen
                
            scrollOnClick   : Moet de huidige element naar het midden scrollen?
				
			nextBtn			: De knop om verder te gaan
            prevBtn			: De knop om terug te gaan
            
            endlessLoop     : als je aan het eind bent haalt hij het eerste item naar achter en andersom, via next and prev
			
			UseInterval     : gebruik een interval om te scrollen
			intervalTime    : tijd na iedere slide
            ------------------------------------------------------------------------
            Onderstaande alleen van toepassing bij thumb-large
            ------------------------------------------------------------------------
            largeImgTag     : als er gebruik gemaakt wordt van de thumb-large wordt de afbeelding hier in geplaatst.
            Het is nu wel verplicht dat de scrollTag een link is
            */
            var defaults = {
                mode: "thumb-large",

                stretchEleTag: ".stretch",
                scrollTag: "a",
                scrollSpeed: "600",

                scrollOnClick: false,

                nextBtn: "#next",
                prevBtn: "#prev",

                largeImgTag: "#largeImg",

                autoWidth: false,
                
                endlessLoop: false,
                
                useInterval: false,
                intervalTime: 5000
            };

            var options = $.extend(defaults, options);
            
            var method = {
                /*
                    Resize to auto fit the inner element.
                */
                autoWidth : function(){
                    /*
                    Totale width van alle elementen van scrollTag
                    */
                    var $innerWidth = 0;
                    $(this).find(options.scrollTag)
                            .each(function() {
                                $innerWidth += $(this).innerWidth();
                            });
                     /*
                    Breedte instellen zodat element niet te ver kan scrollen (voorbij laatste element)
                    */
                    $(this).find(options.stretchEleTag).width($innerWidth);
                },
                scrollToClickedImg : function($obj){
                    var $finalOffset = calculateOffset($(this), $obj);
                    $($obj).stop().animate({ scrollLeft: $finalOffset }, options.scrollSpeed);

                    // Set the index to the object
                    $($obj).data("current-index", $(this).prevAll().length);
                },
                nextImage : function($obj){
                    var $newIndex = $($obj).find(options.scrollTag).length - 1;
                    
				    // Niet aan het eind
				    if ($newIndex != $($obj).data("current-index")) {
				        $newIndex = $($obj).data("current-index") + 1;
				    }
				    // Wel aan het eind
				    else
				    {
				        // Eerste element naar achteren verplaatsen
				        if(options.endlessLoop)
				        {
				            var $first = $($obj).find(options.scrollTag).eq(0);
				            $($obj).find(options.stretchEleTag).append($first);
				            var getBack = parseInt($($obj).scrollLeft()) - parseInt($first.innerWidth());
				            $($obj).stop().animate({ scrollLeft: getBack }, 0);						            
				        }
				    }
				    
				    $($obj).data("current-index", $newIndex);

				    var $el = $($obj).find(options.scrollTag).eq($newIndex);
				    var $finalOffset = calculateOffset($el, $obj);
                    
				    $($obj).stop().animate({ scrollLeft: $finalOffset }, options.scrollSpeed);
                    
				    if (options.mode == "thumb-large") {
				        $(options.largeImgTag).attr("src", $el.attr("href"));
				    }
                },
                prevImage : function($obj){
                    var $newIndex = 0;

                    // Niet aanh het begin
				    if ($($obj).data("current-index") != 0) {
				        $newIndex = $($obj).data("current-index") - 1;
				    }
				    // Wel aan het begin
				    else
				    {
				        // Eerste element naar achteren verplaatsen
				        if(options.endlessLoop)
				        {
				            var $last = $($obj).find(options.scrollTag).last();
				            $($obj).find(options.stretchEleTag).prepend($last);
				            var getBack = parseInt($last.innerWidth());
				            $($obj).stop().animate({ scrollLeft: getBack }, 0);						            
				        }
				    }

				    $($obj).data("current-index", $newIndex);

				    var $el = $($obj).find(options.scrollTag).eq($newIndex);
				    var $finalOffset = calculateOffset($el, $obj);

				    $($obj).stop().animate({ scrollLeft: $finalOffset }, options.scrollSpeed);

				    if (options.mode == "thumb-large") {
				        $(options.largeImgTag).attr("src", $el.attr("href"));
				    }
                }
            }
            return this.each(function() {
                var $obj = this;

                /*
                Set de index
                */
                $($obj).data("current-index", 0);

                if (options.autoWidth) {
                    method.autoWidth.call($obj);
                }

               
                /*
                Als je op een afbeelding klikt dat hij scrollt
                */
//                if (options.scrollOnClick) {
//                    $(this).find(options.scrollTag)
//                                .click(function(){
//                                    method.scrollToClickedImage.call(this, $obj);
//                                    return false;
//                                });
//                }

                /*
                Plaatst de thumb in de grote afbeelding
                */
                if (options.mode == "thumb-large") {
                    $(this).find(options.scrollTag)
                                .click(function(event) {
                                    if ($(this).attr("href").length > 0) {
                                        $(options.largeImgTag).attr("src", $(this).attr("href"));
                                    }
                                    return false;
                                });
                }

                /*
                Next button afhandelen
                */
                if ($(options.nextBtn).length != 0) {
                    $(options.nextBtn)
						.click(function() {
						    method.nextImage.call(this, $obj);
						    return false;
						});
                }

                /*
                Next button afhandelen
                */
                if ($(options.prevBtn).length != 0) {
                    $(options.prevBtn)
						.click(function() {
						    method.prevImage.call(this, $obj);
						    return false;
						});
                }
                
                // Inteval?
                if(options.useInterval)
                {
                   
                    setInterval(function(){
                            method.nextImage.call(this, $obj);
                        }, options.intervalTime);
                    
                }
                // Altijd this returnen
                return this;
            });
        }
    });

    /*
    Berekent de offset
    */
    function calculateOffset($item, $parent) {
        $offsetLeft = 0;
        $item.prevAll()
				.each(function(i) {
				    $offsetLeft += $(this).innerWidth();
				});

        // De offset bepalen
        $midden = (($($parent).innerWidth() / 2) - ($item.innerWidth() / 2));

        return $offsetLeft - $midden;
    }

})(jQuery);