$(function() {
		$("#flexiseldemo").flexisel({
		visibleitems:3,
		animationspeed:1000,
		autoplay: true,
		autoplayspeed:4000,    		
		pauseonhover: true,
		enableresponsivebreakpoints: true,
    	responsivebreakpoints: { 
    		portrait: { 
    			changepoint:768,
    			visibleitems:2
    		}, 
    		landscape: { 
    			changepoint:992,
    			visibleitems: 3
    		},
    		tablet: { 
    			changepoint:1200,
    			visibleitems:4
    		}
    	}
    });
    
    
    
});


$(function() {
		$("#flexiseldemo01").flexisel({
		visibleitems:3,
		animationspeed:1000,
		autoplay: true,
		autoplayspeed:4000,    		
		pauseonhover: true,
		enableresponsivebreakpoints: true,
    	responsivebreakpoints: { 
    		portrait: { 
    			changepoint:768,
    			visibleitems:2
    		}, 
    		landscape: { 
    			changepoint:992,
    			visibleitems: 3
    		},
    		tablet: { 
    			changepoint:1200,
    			visibleitems:4
    		}
    	}
    });
    
    
    
});


$(function() {
		$("#flexiseldemo02").flexisel({
		visibleitems:3,
		animationspeed:1000,
		autoplay: true,
		autoplayspeed:4000,    		
		pauseonhover: true,
		enableresponsivebreakpoints: true,
    	responsivebreakpoints: { 
    		portrait: { 
    			changepoint:768,
    			visibleitems:1
    		}, 
    		landscape: { 
    			changepoint:992,
    			visibleitems: 3
    		},
    		tablet: { 
    			changepoint:1200,
    			visibleitems:4
    		}
    	}
    });
    
    
    
});
(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:768,
	    			visibleitems:1
	    		}, 
	    		landscape: { 
	    			changepoint:992,
	    			visibleitems: 3
	    		},
	    		tablet: { 
	    			changepoint:1200,
	    			visibleitems: 4
	    		}
        	}
        }, 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.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);
   			 	}
 
   			 	$("<p class='scroll_btn'><span class='nbs-flexisel-nav-left'><i></i></span><span  class='nbs-flexisel-nav-right'><i></i></span></p>").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});
					
				
					
				});					
				
				$(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);