/*****************************
Carousel Plugin by
Raviv Murciano-Goroff
******************************/
(function ($) {
    $.fn.carousel = function (options) {
        
        var defaults = {
            speed: 1200,
            delay: 8500,
            height: false, //people can give a fixed height if they want to force it
            background: "#FFFFFF",
            start: 0,
            vertical: true
        };
        
        var options = $.extend(defaults, options);
        
        return this.each(function () {
            //set the variable obj to be the bounding div
            var obj = $(this);
            //if the carousel has more than one UL tag then the positioning will be all messed up
            //so if you see more than one UL tag then throw an error into the console that says that
            //is a problem
            if (obj.children("ul").length != 1) {
                throw "A carousel can only be made from one and only one <ul> tag";
            }
            //if you have less than two LI tags (or children of the UL) then there is nothing to rotate
            //so then tell people that they really need at least two things to rotate.
            if (obj.children("ul").children().length < 2) {
                throw "There must be at least two <li> tags for me to rotate something.";
            }
            //if someone tries to give you a starting index that is less than the number of LI
            //features that you have then give them an error
            if (options.start > obj.children("ul").children().length - 1) {
                throw "The start index that you gave me is beyond the number of feature_box."
            }
            //if someone tries to give you a a negative number of pixels for the height
            //of the carousel then give them an error
            if (options.height != false && options.height < 0) {
                throw "The height in pixels should be greater than 0."
            }
            
            //make the bounding div relatively positioned so that
            //I can place some elements within the carousel area absolutely relative to the bounding box
            obj.css("position", "relative");
            //THIS IS BLUEPRINT SPECIFIC - I do a clearfix so that anything within the coursel area
            //that is floated will still have a height.  this is a clever trick from blueprint and can be
            //done in many other ways but this done mean that with one line I can fix the issue of having no height because
            //of floating everything
            obj.addClass("clearfix");
            //make the unordered list that binds the feature_box be relatively
            //positioned so that the feature_box can be positioned abosolutely within
            //them
            obj.children("ul").addClass("feature_box").css("position", "relative");
            obj.children("ul").children("li").addClass("feature");
            //create a navigation bar for switching the active feature
            var switcher = $("<ul></ul>").addClass("switcher");
            
            //this loop sets each feature with its necessary defaults
            //including, making them all have z-indexes that place them on
            //top of each other
            var index = 1;
            obj.children(".feature_box").children("li.feature").each(function () {
                $(this).css("z-index", index);
                switcher.append("<li><a href='#'><span>" + index + "</span></a></li>")
                index = index + 1;
            });
            //set the position of the feature_box to be on top of each other
            obj.children(".feature_box").children("li.feature").hide().css({
                "position": "absolute",
                "top": 0, "left": 0
            });
            //set the background color for the list elements to avoid an IE bug
            obj.children(".feature_box").children("li.feature").css("background", options.background);
            
            //wrap the switcher with a div so that it will be easy to position and style.
            var switcher_wrapper = $("<div class='switcher_wrapper'></div>");
            switcher_wrapper.addClass("clearfix");
            obj.append(switcher_wrapper);
            switcher_wrapper.append(switcher);
            switcher.addClass("clearfix");
            switcher.children("li").css("float", "left");
            
            //pick which feature_box to start with and which to do next
            obj.children(".feature_box").children("li.feature").eq(options.start).show().addClass("active");
            switcher.children("li").children("a").eq(options.start).addClass("active");
            
            //make sure that if someone gave you a starting index of the last feature
            //that you wrap around and put next on the first feature
            if (options.start < obj.children(".feature_box").children("li.feature").length - 1) {
                obj.children(".feature_box").children("li.feature").eq(options.start + 1).addClass("next");
            } else {
                obj.children(".feature_box").children("li.feature").eq(0).addClass("next");
            }
            
            //if they have not provided a static height, then figure out the tallest
            //feature box
            if (options.height == false) {
                options.height = 0;
                obj.children(".feature_box").children("li.feature").each(function () {
                    if ($(this).outerHeight() > options.height) {
                        options.height = $(this).outerHeight();
                    }
                })
            } else {
            
            /*
            //ALL OF THIS IS FOR THE TRUNCATION.  IF YOU DONT WANT TRUNCATION THEN REMOVE FROM THE ELSE ABOVE TO TEH CURLY BELOW
                obj.children(".feature_box").children("li.feature").each(function () {
                    var paragraph = $(this).find("h3").next("p");
                    var length = paragraph.text().length;
                    var link = $("<a href='#'>Read More</a>");
                    while ($(this).outerHeight() > options.height || paragraph.text().substring(length-100, length-99)!=" ") {
                        paragraph.text(paragraph.text().substring(0,length-100)+"...");                    
                    
                        length = length - 1;
                    }
                    paragraph.append(link);
                });
            */
            }
            
            
            
            //if they want a vertical carousel then place the switcher below the bottom
            //but if they want a horizontal feature then try to tuck the swithcer into
            //the feature area and float the feature_box to the left
            if (options.vertical) {
                switcher_wrapper.css({
                    "margin-top": options.height, "float": "right"
                });
            } else {
                switcher_wrapper.css({
                    "margin-top": options.height - switcher_wrapper.outerHeight(), "right": 0, "z-index": index + 1
                });
            }
            
            //create the interval to start going
            var interval = setInterval(function () {
                $.carousel.rotate(obj, options)
            },
            options.delay);
            
            //set a listener for clicks on the switcher
            switcher.children("li").children("a").click(function () {
                //if the one that you clicked on is already displaying then i aint going to fade it out
                //and back in...just not gonna happen
                if (obj.children(".feature_box").children("li.feature").eq(parseInt($(this).text()) - 1).hasClass("active")) {
                    return false;
                }
                //if we are going through with the click
                //then clear the interval first because we dont want it repeating on
                //multiple loops
                clearInterval(interval);
                //we are replacing the next feature, so clear that
                obj.children(".feature_box").children("li.feature").removeClass("next");
                //add next back to the feature that correlates with the click's number
                obj.children(".feature_box").children("li.feature").eq(parseInt($(this).text()) - 1).addClass("next");
                //remove the active flag from the switcher
                switcher.children("li").children("a").removeClass("active");
                //replace the active flag on the proper switcher
                $(this).addClass("active");
                //run the carousel transition
                $.carousel.rotate(obj, options);
                //set the interval going again to restart the carousel
                interval = setInterval(function () {
                    $.carousel.rotate(obj, options)
                },
                options.delay);
                return false;
            });
        });
    };
    $.carousel = function () {
    }
    $.carousel.rotate = function (obj, options) {
        var active = obj.children(".feature_box").children(".active");
        var next = obj.children(".feature_box").children(".next");
        active.fadeOut(options.speed).removeClass("active");
        next.fadeIn(options.speed).removeClass("next").addClass("active");
        obj.children(".switcher_wrapper").children(".switcher").children("li").children("a").removeClass("active");
        obj.children(".switcher_wrapper").children(".switcher").children("li").children("a").eq(obj.children(".feature_box").children("li.feature").index(next)).addClass("active");
        if (next.next().length != 0) {
            next.next().addClass("next");
        } else {
            obj.children(".feature_box").children("li.feature").eq(0).addClass("next");
        }
    };
})(jQuery);