/***********************/
/* Lofta Slide Rotator */
/* (C) 2011 Bluedesk   */
/***********************/

(function ($)
{
    $.fn.LoftaSlideRotator = function (settings)
    {
        var fadeOutTimer = 0;
        var rotatorTimer = 0;
        var delayTimer = 0;
        var current_slide = null;

        var config = {
            fadeOutTimeout: 2000,
            fadeInTimeout: 1000,
            rotatorTimeout: 3000,
            rotatorInterval: 7000
        };

        if (settings) $.extend(config, settings);

        init = function (el)
        {
            setupNavigator(el);
            setupSlideDetails(el);

            startRotator();
        }

        setupNavigator = function (el)
        {
            //elk A element van background voorzien
            $(".slide_item", el).each(function ()
            {
                var item = $(this);
                item.css("background-image", "url('" + $(item).attr("data-img") + "')");
                $("span", item).css("background-image", "url('" + $("span", item).attr("data-img") + "')");
            });


            $(".slide_item", el).mousemove(function ()
            {
                clearTimeout(rotatorTimer); //cancel the rotator
                clearTimeout(delayTimer);
                var item = $(this);
                delayTimer = setTimeout(function ()
                {
                    showSlide(el, $(item));
                }, 200);
            });

            //elk A element op mouseenter en mouseleave van image change voorzien
            $(".slide_item", el).mouseenter(function ()
            {
                clearTimeout(rotatorTimer); //cancel the rotator
                var item = $(this);

                if (current_slide != null) hideSlide(el, current_slide);
            });

            $(".slide_item", el).mouseleave(function ()
            {
                clearTimeout(delayTimer);
                hideSlide(el, $(this));

                //start rotator
                startRotator(el);
            });
        }

        showSlide = function (el, item)
        {
            current_slide = item;

            $(item).css("background-image", "url('" + $(item).attr("data-imgactive") + "')");
            $("span", item).css("background-image", "url('" + $("span", item).attr("data-imgactive") + "')");

            var wait = setInterval(function ()
            {
                if (!$(".slide_detail").is(":animated") && !$(".bgimage").is("animated"))
                {
                    clearInterval(wait);
                    // This piece of code will be executed         


                    //hide active slide
                    if ($(".slide_detail.active").length > 0)
                    {
                        $(".slide_detail.active").animate({ "left": "+=100", "opacity": 0 }, function ()
                        {
                            //toon achtergrond			                        
                            showBackground(el, $(item), function ()
                            {
                                //toon details
                                showDetails(el, $(item).attr("rel"));
                            });

                        });
                    } else
                    {
                        //toon achtergrond			                    
                        showBackground(el, $(item), function ()
                        {
                            //toon details
                            setTimeout(function ()
                            {
                                showDetails(el, $(item).attr("rel"));
                            }, config.fadeInTimeout);
                        });

                    }
                }
            }, 200);
        }

        hideSlide = function (el, item)
        {

            $(item).css("background-image", "url('" + $(item).attr("data-img") + "')");
            $("span", item).css("background-image", "url('" + $("span", item).attr("data-img") + "')");

            var wait = setInterval(function ()
            {
                if (!$(".slide_detail").is(":animated") && !$(".bgimage").is("animated"))
                {
                    clearInterval(wait);
                    // This piece of code will be executed      

                    //hide details
                    hideDetails(el, $(item).attr("rel"));
                }
            }, 200);
        }


        showDetails = function (el, id)
        {
            clearTimeout(fadeOutTimer);
            //hide active slide
            //$(".slide_detail.active").fadeOut();
            //if ($("#" + id).hasClass("active")) return;

            $("#" + id).css({ "left": "-70px", "opacity": 0 });
            $("#" + id).show();
            $("#" + id).addClass("active");            
            $("#" + id).animate({ "left": "30px", "opacity": 1 });
        }

        hideDetails = function (el, id)
        {            
            if (!$("#" + id).hasClass("active")) return;
            clearTimeout(fadeOutTimer);
            fadeOutTimer = setTimeout(function ()
            {
                $("#" + id).removeClass("active");                
                $("#" + id).animate({ "left": "130px", "opacity": 0 }, function () { $(this).css("left", "30px"); });
            }, config.fadeOutTimeout);
        }

        setupSlideDetails = function (el)
        {
            //slide details, onmouseenter de fadetimer aborten, on mouseleave fadetimer weer starten
            $(".slide_detail").mouseenter(function ()
            {
                clearTimeout(fadeOutTimer);
            });

            $(".slide_detail").mouseleave(function ()
            {
                hideDetails(el, $(this).attr("id"));
            });
        }

        showBackground = function (el, item, callback)
        {
            var url = $(item).attr("data-bgimg");

            if ($(".bgimage").css("background-image").indexOf(url) > 0)
            {
                if (typeof callback == "function")
                {
                    callback();
                }
                return;
            }


            //load new image
            var img = $("<img />").attr("src", url).load(function ()
            {
                //fadeout current
                $(".bgimage").animate({ "opacity": 0 }, function ()
                {
                    //set new img
                    $(this).css("background-image", "url('" + url + "')");
                    $(this).animate({ "opacity": 1 }, function ()
                    {
                        if (typeof callback == "function")
                        {
                            callback();
                        }
                    });
                });
            });
            img = null;
        }

        nextSlide = function (el)
        {
            //get nextslide
            if (current_slide == null)
                current_slide = $(".slide_item", el).first();
            else
            {
                hideSlide(el, current_slide);

                current_slide = current_slide.next(".slide_item");
                if (current_slide.length <= 0) current_slide = $(".slide_item", el).first();
            }            

            showSlide(el, current_slide);

            //recursive call
            clearTimeout(rotatorTimer);
            rotatorTimer = setTimeout(function ()
            {
                nextSlide(el);
            }, config.rotatorInterval);


        }

        startRotator = function (el)
        {
            clearTimeout(rotatorTimer);
            rotatorTimer = setTimeout(function ()
            {
                nextSlide(el);
            }, config.rotatorTimeout);
        }

        this.each(function ()
        {
            //setup element            
            init(this);
        });
    }

})(jQuery);