/*
    Deze photoscroller is custom edited 
*/

(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
				
                ------------------------
            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
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var $obj = this;

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

                if (options.autoWidth) {
                    /*
                    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);

                /*
                Als je op een afbeelding klikt dat hij scrollt
                */
                if (options.scrollOnClick) {
                    $(this).find(options.scrollTag)
                                .click(function(event) {

                                    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);

                                    return false;
                                });
                }

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

                /*
                Next button afhandelen
                */
                if ($(options.nextBtn).length != 0) {
                    $(options.nextBtn)
						.click(function() {
						    var $newIndex = $($obj).find(options.scrollTag).length - 1;
						    if ($newIndex != $($obj).data("current-index")) {
						        $newIndex = $($obj).data("current-index") + 1;
						    }
						    $($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") {
						        /**
                                *   CUSTOM EDIT 
                                */
						        $(options.largeImgTag).attr("src", $el.attr("href").replace("vergroting", "groot"));
						    }
						});
                }

                /*
                Next button afhandelen
                */
                if ($(options.prevBtn).length != 0) {
                    $(options.prevBtn)
						.click(function() {
						    var $newIndex = 0;

						    if ($($obj).data("current-index") != 0) {
						        $newIndex = $($obj).data("current-index") - 1;
						    }

						    $($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") {
						        /**
                                *   CUSTOM EDIT 
                                */
						        $(options.largeImgTag).attr("src", $el.attr("href").replace("vergroting", "groot"));
						    }
						});
                }

                // 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);