// JavaScript Document

(function($){
	$.bm_slider = function(el,data) {
		var element = this;

		element.el = el;
		element.$el = $(el);

		// Add a reverse reference to the DOM object
		element.$el.data("bm_Slider", element);
		
		
		var auto_timeout=5000;
		var interraction_timeout=10000;
		var slide_time=700;
		var crossfade_time=1000;
		
	 
		var element = this;
		
		var current_slide=0;
		var item_height = 0;
		var y_position = 0;
		var timer = null;
		var set_autoplay_timer = null;

		
		element.init = function(){
			element.$el.html('<div class="bm_slider_display"><div class="bm_slider_bg_container"></div><div class="bm_slider_nav"></div></div>');
			element.$el.find('.bm_slider_bg_container').html(get_image(current_slide));
			element.$el.find('.bm_slider_bg').css('display','block');
			
			element.$el.find('.bm_slider_nav').html(build_nav(current_slide));
			item_height = element.$el.find('.bm_slider_nav_item').height();
			y_position = -(item_height);
			element.$el.find('.bm_slider_nav').css('top',y_position);
			element.$el.find('#item-'+current_slide).addClass('active');
			element.$el.find('.bm_slider_nav_item').css('opacity','0.7');
			element.$el.find('.bm_slider_nav_item.active').css('opacity','1');
			
			element.$el.find('.bm_slider_nav_item_overlay').bind('click',element.action);
			
			element.set_autoplay();
		}
		
		element.set_autoplay = function(){
			clearInterval(timer);
			timer = setInterval(function(){element.next()},auto_timeout);
		}

		element.action = function(){
			clearInterval(timer);
		
			var id = $(this).closest('.bm_slider_nav_item').attr('id').substring(5);
			if(id==(data.length-1) && current_slide==0) element.prev();
			else if(id==0 && current_slide==(data.length-1)) element.next();
			else if(id>current_slide) element.next();
			else element.prev();

			set_autoplay_timer = setTimeout(function(){element.set_autoplay()},interraction_timeout);
		}
		
		element.next = function(){
			previous_slide=current_slide;
			element.$el.find('.bm_slider_nav_item_overlay').unbind('click',element.action);

			current_slide++;
			if(current_slide>=data.length) current_slide=0;

			element.$el.find('#item-'+current_slide).removeClass('active');

			element.$el.find('.bm_slider_bg_container').append(get_image(current_slide));
			element.$el.find('#item_bg-'+current_slide).fadeIn(crossfade_time);
			element.$el.find('#item_bg-'+previous_slide).fadeOut(crossfade_time,function(){
				$(this).remove();
			});
			
			y_position-=item_height;
			element.$el.find('.bm_slider_nav').animate({top: y_position}, slide_time, function(){
				y_position = -(item_height);
				element.$el.find('.bm_slider_nav').css('top',y_position);
				element.$el.find('.bm_slider_nav').html(build_nav(current_slide));
				element.$el.find('#item-'+current_slide).addClass('active');
				element.$el.find('.bm_slider_nav_item').css('opacity','0.7');
				element.$el.find('.bm_slider_nav_item.active').css('opacity','1');
				
				element.$el.find('.bm_slider_nav_item_overlay').bind('click',element.action);
			});
		}

		element.prev = function(){
			previous_slide=current_slide;
			element.$el.find('.bm_slider_nav_item_overlay').unbind('click',element.action);

			current_slide--;
			if(current_slide<0) current_slide=data.length-1;

			element.$el.find('#item-'+current_slide).removeClass('active');

			element.$el.find('.bm_slider_bg_container').append(get_image(current_slide));
			element.$el.find('#item_bg-'+current_slide).fadeIn(crossfade_time);
			element.$el.find('#item_bg-'+previous_slide).fadeOut(crossfade_time,function(){
				$(this).remove();
			});

			y_position+=item_height;
			element.$el.find('.bm_slider_display').css('background-image','url('+data[current_slide]['image']+')');

			element.$el.find('.bm_slider_nav').animate({top: y_position}, slide_time, function(){
				y_position = -(item_height);
				element.$el.find('.bm_slider_nav').css('top',y_position);
				element.$el.find('.bm_slider_nav').html(build_nav(current_slide));
				element.$el.find('#item-'+current_slide).addClass('active');
				element.$el.find('.bm_slider_nav_item').css('opacity','0.7');
				element.$el.find('.bm_slider_nav_item.active').css('opacity','1');
				
				element.$el.find('.bm_slider_nav_item_overlay').bind('click',element.action);
			});
		}
		
		function get_image(slide_id){
			var output='';
			
			var k=0;
			var i=slide_id-1;
			if (i<0) i+=data.length; //starting slide
			
			while(k<3){
				image = new Image(); 
				image.src = data[i]['image'];
			
				k++;
				i++;
				if (i>=data.length) i=0;
			}
			output='<div class="bm_slider_bg" id="item_bg-'+ current_slide +'"><a href="' + data[slide_id]['link'] + '"><img src="'+ data[current_slide]['image'] +'" width="700" height="237" /></a></div>';

			return output;
		}
		
		function build_nav(slide_id){
			var output='';
			
			var k=0;
			var i=slide_id-2;
			if (i<0) i+=data.length; //starting slide
			
			while(k<5){
				k++;
				output+=build_nav_item(i);
				i++;
				if (i>=data.length) i=0;
			}
			return output;
		}
		
		function build_nav_item(id){
			output='<div class="bm_slider_nav_item" id="item-' + id + '">' +
				'<div class="bm_slider_nav_item_overlay"></div>' +
				'<div class="bm_slider_nav_item_alignment"></div>' +
				'<div class="bm_slider_nav_item_content">' +
				'<h3>' + data[id]['title'] + '</h3>' +
				data[id]['date'] + ' <div class="bm_slider_nav_item_link"> | <a href="' + data[id]['link'] + '">Learn More</a></div>' +
				'</div></div>';
			return output;
		}
		
		element.init();
	}
	
	$.fn.bm_slider = function(data, callback) {
		return this.each(function(){
			var slider = $(this).data('bm_Slider');

			// initialize the slider but prevent multiple initializations
			if ((typeof(data)).match('object|undefined')){
				if (!slider) {
					(new $.bm_slider(this, data));
				}
			}
		});
	};
	
  
})(jQuery);