/*
 * file: jquery.flexisel.js
 * version: 1.0.0
 * description: responsive carousel jquery plugin
 * author: 9bit studios
 * copyright 2012, 9bit studios
 * http://www.9bitstudios.com
 * free to use and abuse under the mit license.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function($) {

    $.fn.flexisel = function(options) {

        var defaults = $.extend({
            visibleitems: 4,
            animationspeed: 200,
            autoplay: false,
            autoplayspeed: 3000,
            pauseonhover: true,
            setmaxwidthandheight: false,
            enableresponsivebreakpoints: false,
            responsivebreakpoints: {
                portrait: {
                    changepoint: 480,
                    visibleitems: 1
                },
                landscape: {
                    changepoint: 640,
                    visibleitems: 2
                },
                tablet: {
                    changepoint: 768,
                    visibleitems: 3
                }
            }
        }, options);

        /******************************
        private variables
        *******************************/

        var object = $(this);
        var settings = $.extend(defaults, options);
        var itemswidth; // declare the global width of each item in carousel
        var cannavigate = true;
        var itemsvisible = settings.visibleitems;

        /******************************
        public methods
        *******************************/

        var methods = {

            init: function() {

                return this.each(function() {
                    methods.appendhtml();
                    methods.seteventhandlers();
                    methods.initializeitems();
                });
            },

            /******************************
            initialize items
            *******************************/

            initializeitems: function() {

                var listparent = object.parent();
                var innerheight = listparent.height();
                var childset = object.children();

                var innerwidth = listparent.width(); // set widths
                itemswidth = (innerwidth) / itemsvisible;
                childset.width(itemswidth);
                childset.last().insertbefore(childset.first());
                childset.last().insertbefore(childset.first());
                object.css({ 'left': -itemswidth });

                object.fadein();
                $(window).trigger("resize"); // needed to position arrows correctly

            },


            /******************************
            append html
            *******************************/

            appendhtml: function() {

                object.addclass("nbs-flexisel-ul");
                object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
                object.find("li").addclass("nbs-flexisel-item");

                if (settings.setmaxwidthandheight) {
                    var basewidth = $(".nbs-flexisel-item > img").width();
                    var baseheight = $(".nbs-flexisel-item > img").height();
                    $(".nbs-flexisel-item > img").css("max-width", basewidth);
                    $(".nbs-flexisel-item > img").css("max-height", baseheight);
                }

                $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertafter(object);
                var clonecontent = object.children().clone();
                object.append(clonecontent);
            },


            /******************************
            set event handlers
            *******************************/
            seteventhandlers: function() {

                var listparent = object.parent();
                var childset = object.children();
                var leftarrow = listparent.find($(".nbs-flexisel-nav-left"));
                var rightarrow = listparent.find($(".nbs-flexisel-nav-right"));

                $(window).on("resize", function(event) {

                    methods.setresponsiveevents();

                    var innerwidth = $(listparent).width();
                    var innerheight = $(listparent).height();

                    itemswidth = (innerwidth) / itemsvisible;

                    childset.width(itemswidth);
                    object.css({ 'left': -itemswidth });

                    var halfarrowheight = (leftarrow.height()) / 2;
                    var arrowmargin = (innerheight / 2) - halfarrowheight;
                    leftarrow.css("top", arrowmargin + "px");
                    rightarrow.css("top", arrowmargin + "px");

                });

                $(leftarrow).on("click", function(event) {
                    methods.scrollleft();
                });

                $(rightarrow).on("click", function(event) {
                    methods.scrollright();
                });

                if (settings.pauseonhover == true) {
                    $(".nbs-flexisel-item").on({
                        mouseenter: function() {
                            cannavigate = false;
                        },
                        mouseleave: function() {
                            cannavigate = true;
                        }
                    });
                }

                if (settings.autoplay == true) {

                    setinterval(function() {
                        if (cannavigate == true)
                            methods.scrollright();
                    }, settings.autoplayspeed);
                }

            },

            /******************************
            set responsive events
            *******************************/

            setresponsiveevents: function() {
                var contentwidth = $('html').width();

                if (settings.enableresponsivebreakpoints == true) {
                    if (contentwidth < settings.responsivebreakpoints.portrait.changepoint) {
                        itemsvisible = settings.responsivebreakpoints.portrait.visibleitems;
                    } else if (contentwidth > settings.responsivebreakpoints.portrait.changepoint && contentwidth < settings.responsivebreakpoints.landscape.changepoint) {
                        itemsvisible = settings.responsivebreakpoints.landscape.visibleitems;
                    } else if (contentwidth > settings.responsivebreakpoints.landscape.changepoint && contentwidth < settings.responsivebreakpoints.tablet.changepoint) {
                        itemsvisible = settings.responsivebreakpoints.tablet.visibleitems;
                    } else {
                        itemsvisible = settings.visibleitems;
                    }
                }
            },

            /******************************
            scroll left
            *******************************/

            scrollleft: function() {

                if (cannavigate == true) {
                    cannavigate = false;

                    var listparent = object.parent();
                    var innerwidth = listparent.width();

                    itemswidth = (innerwidth) / itemsvisible;

                    var childset = object.children();

                    object.animate({
                        'left': "+=" + itemswidth
                    }, {
                        queue: false,
                        duration: settings.animationspeed,
                        easing: "linear",
                        complete: function() {
                            childset.last().insertbefore(childset.first()); // get the first list item and put it after the last list item (that's how the infinite effects is made)   								
                            methods.adjustscroll();
                            cannavigate = true;
                        }
                    });
                }
            },

            /******************************
            scroll right
            *******************************/

            scrollright: function() {

                if (cannavigate == true) {
                    cannavigate = false;

                    var listparent = object.parent();
                    var innerwidth = listparent.width();

                    itemswidth = (innerwidth) / itemsvisible;

                    var childset = object.children();

                    object.animate({
                        'left': "-=" + itemswidth
                    }, {
                        queue: false,
                        duration: settings.animationspeed,
                        easing: "linear",
                        complete: function() {
                            childset.first().insertafter(childset.last()); // get the first list item and put it after the last list item (that's how the infinite effects is made)   
                            methods.adjustscroll();
                            cannavigate = true;
                        }
                    });
                }
            },

            /******************************
            adjust scroll 
            *******************************/

            adjustscroll: function() {

                var listparent = object.parent();
                var childset = object.children();

                var innerwidth = listparent.width();
                itemswidth = (innerwidth) / itemsvisible;
                childset.width(itemswidth);
                object.css({ 'left': -itemswidth });
            }

        };

        if (methods[options]) { // $("#element").pluginname('methodname', 'arg1', 'arg2');
            return methods[options].apply(this, array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) { // $("#element").pluginname({ option: 1, option:2 });
            return methods.init.apply(this);
        } else {
            $.error('method "' + method + '" does not exist in flexisel plugin!');
        }
    };

})(jquery);