/* 

Author: John Standish
Email: standish@clockwork.net
Company: Clockwork Acive Media Systems
Version: 1.0
Last Modified: 12.12.11

*/

(function($){

	//global vars
	$.jScroll = { }; 

	$.fn.jScroll = function(jWidth, jHeight)
	{
		var j_slider = $('.j_slider');
		var slider;
		var marker_arr = [];
		var track = '<div id="track" ><div id="slider"><a class="ui-slider-handle ui-state-default" style="left: 0%; "></a></div></div>'
		var offset = jWidth/2;
		var z_index = 100;
		var marker_id = 0;
		var marker_x = 0;
		var current_marker;
		var color_blind;
		var handle;
		var handle_fill;
		var handle_back;
		var slide_width;
		var global_percentage;
		var nearest_marker;
		var marker_gap;
		var handle_offset;
		var count = 0;
		var mouse_pos = 0;
		var direction_right = true;
		var range = 0;
		var slides;
		var active_markers;
		var prev_markers;
		var global_dur = 1000;
		var auto_count = 1;
		var time_out;
		
		/* set up and append track 
		***********************************/
		
		j_slider.append(track);
		track = $('#track');
		slider = $("#slider");
		
		j_slider.css(
		{
			'position' : 'relative',
			'height' : jHeight
		});
		
		track.css(
		{
			'position' : 'absolute',
			'top' : 0,
			'width' : jWidth - 60,
			'height' : '1px',
			'display' : 'block',
			'left' : '50%',
			'margin-left' : -offset + 30,
			'margin-top' : '-33px',
			'z-index' : z_index
		});
		
		color_blind = '<div class="jslide_bg"></div><div class="color_blind" style="width:100%;"></div>'
		j_slider.append(color_blind);
		color_blind = $('.color_blind');
		
		
		/* Init slider functionality
		***********************************/
		
		handle = $( ".ui-slider-handle" );
		slide_width = handle.parent().width();
		
		handle_offset = 60;
		var minX = handle.parent().offset().left; // farthest to left it can go
		var maxX = minX + jWidth - handle_offset; // farthest to right it can go
		var yPosition = 0; // set to your y position

		handle.draggable({ 
			distance: 3,
			axis: 'x',
			containment: [minX,0,maxX,0],
			start: function(event, ui)
			{
				auto_slide('false');
			},
			drag: function(event, ui)
			{
				$(document).bind('mousemove', function(e){
					if(e.pageX > mouse_pos)
					direction_right = true;
					else if (e.pageX < mouse_pos)
					direction_right = false;
					mouse_pos = e.pageX;
				});
				scrub();			
			},
			stop: function(event, ui)
			{
				$(document).unbind('mousemove');
				global_dur = 1000;
				snapToMarker(nearest_marker.x_pos);
			}
		});
		
		slider.find('a').append('<span class="handle_back"><span class="handle_fill"></span></span><span class="handle"></span>');
		handle_fill = $('.handle_fill');
		handle_back = $('.handle_back');
		
		function snapToMarker(point)
		{
			var lastVal;
			
			handle.stop().animate({'left': point}, 
			{
				duration: global_dur, easing: 'easeInOutQuart',
				step: function(now, fx) 
				{
				    var percentage =  now;
					if(lastVal != percentage && lastVal != undefined)
					{
						scrub();
					}
					lastVal = percentage;
				}
			});
		}
		
		/* Utilities
		***********************************/
		
		function getNearestMarker(m, v)
		{
			if((l = m.length) < 2)
		        return l - 1;
		    for(var l, p = Math.abs(m[--l].percent - v); l--;)
		        if(p < (p = Math.abs(m[l].percent - v)))
		            break;
		    return m[l + 1];    
		}

		function between(x, min, max) {
			if(x < 0) x = 0;
  			if (x >= min.x_pos && x <= max.x_pos)
  			return [min, max];
  			else return false;
		}
			
		function setColors(){
			color_blind.css({ 'background-color' : active_markers[1].color });
			handle_fill.css({ 'background-color' : active_markers[1].color });
			
			j_slider.css({'background-color' : active_markers[0].color});
			handle_back.css({'background-color' : active_markers[0].color });
		}
		
		function hide_markers(m_arr)
		{
			for (var i = 0; i < m_arr.length; i++) 
			{	
				m_arr[i].slide.css({
				'opacity' : 0,
				'z-index' : 300	
				});
			}
		}

		/* Scrubing and animation
		***********************************/
		
		function scrub()
		{			
			var current_range = (handle.position().left/range) + 1 ;
			
			for (var i = 0; i < marker_arr.length; i++) {
				var min = marker_arr[i];
				var max = marker_arr[i+1];
				if(max === undefined) break;
				active_markers = between(handle.position().left, min, max);

				if(active_markers != false)
				{
					if(prev_markers == undefined)
					{
						prev_markers = active_markers;
						setColors();
					}	
					else if(prev_markers[1].x_pos != active_markers[1].x_pos)
					{
						hide_markers(prev_markers);
						prev_markers = active_markers;
						setColors();
					}
					break;
				}
			}
		
			global_percentage = Math.round((handle.position().left/slide_width)*100);
			nearest_marker = getNearestMarker(marker_arr, global_percentage);
			
			if(active_markers)
			{
				active_percentage = Math.round(((handle.position().left - active_markers[1].x_pos)/range)*100)
				active_percentage = Math.abs(active_percentage);
				animate_tarnsition();
			}

		}

		function animate_tarnsition()
		{
			if(direction_right){
				current_marker = active_markers[0];
				next_marker = active_markers[1];
			} else {
				current_marker = active_markers[1];
				next_marker = active_markers[0];
			}
				
			var fade_out;
			var fade_in; 
			var fill;
			
			if(next_marker.id > current_marker.id){
				fade_out = Math.abs(1 - active_percentage)*.01;
				fade_out -= 1 - fade_out;
				fade_in = 1 - fade_out - 1;
			}
			else
			{
				fade_in = Math.abs(1 - active_percentage)*.01;
				fade_in -= 1 - fade_in;
				fade_out = 1 - fade_in - 1;
			}
			
			fill = 100 - active_percentage;
			var blind_top = (fade_in*100)*4;

			current_marker.slide.find('div.blinds').css({
				'top' : (fade_out*100)*4,
				'opacity' : .50
			})

			current_marker.slide.css({
				'opacity' : fade_out,
				'z-index' : fade_out*500
			});
			
			next_marker.slide.find('div.blinds').css({
				'top' : blind_top,
				'opacity' : .50
			})
			
			next_marker.slide.css({
				'opacity' : fade_in,
				'z-index' : fade_in*500
			});
			
			color_blind.css({'height' : fill  + '%'});
			handle_fill.css({'height' : fill  + '%'});	
		}

		function reset_marker(marker) 
		{
			marker.slide.removeClass('active');
			marker.slide.hide();
		}
		
		function auto_slide(state) 
		{	
			if(state == 'on') 
			{
				time_out = setInterval(function()
				{
					 snapToMarker(marker_arr[auto_count].x_pos);
				     if(auto_count >= marker_arr.length -1 )
				     	direction_right = false;
				     else if (auto_count <= 0)
				    	 direction_right = true;
				     
				     if(direction_right) auto_count++
				     else auto_count--
				}, 5000);
			}
			else if(time_out) clearInterval(time_out);
		}
		
		/* Configure markers and slides
		***********************************/
		
		return this.each(function(i, obj)
		{
		 	var $this = $(this);
			slides = $(obj).find(".j_slide").get();
			range = track.width()/(slides.length -1);
			
			$.each(slides, function(j, ele)
			{
				//position element
				$(ele).css(
				{
					'position' : 'absolute',
					'top' : 0,
					'width' : jWidth,
					'left' : '50%',
					'margin-left' : -offset,
					'z-index' : z_index,
					'opacity' : 0
				});

				//create markers
				var marker = new Object;
				var marker_html = '<div id="marker_'+ marker_id +'"class="marker"></div>';
				marker_arr.push(marker);
				slider.prepend(marker_html);
				
				//set marker properties and position
				var num = marker_x/track.width()*100;
				var percentage = Math.round(num);
				marker.id = marker_id;
				marker.slide = $(ele);
				marker.x_pos = marker_x;
				marker.percent = percentage;
				marker.color = $(ele).children('span.color').text();
				marker.pin = $('#marker_'+ marker_id);
				marker.pin.css({
					'position' : 'absolute',
					'left' : marker.x_pos 					
				});
								
				marker.pin.click(function() 
				{
					global_dur = 2000;
				  snapToMarker(marker.x_pos);
				  auto_slide('false');
				});
				
				var offset_x = marker.x_pos - 3;
				
				marker.pin.hover(function()
				{
					$(this).animate({
						width:'16',
						height:'16',
						top: '-3',
						left: offset_x,
						backgroundColor : marker.color
					},{queue:false,duration:150, easing: 'easeInOutQuart'});
				}, function()
				{
					$(this).animate({
						width:'10',
						height:'10',
						top: '0',
						left: marker.x_pos,
						backgroundColor : 'white'
						
					},{queue:false,duration:150, easing: 'easeInOutQuart'});
				});
				
				$(ele).find('a').hover(function()
				{
					$(this).stop().animate({
						opacity:'1'
					},{queue:false,duration:300, easing: 'easeInOutQuart'});
				}, function()
				{
					$(this).stop().animate({
						opacity:'.8'
						
					},{queue:false,duration:300, easing: 'easeInOutQuart'});
				});
				
				if(marker.id == (slides.length - 1))
				{
					j_slider.css({overflow:'visible'});
					scrub();
					marker.pin.css({ 'left' : marker.x_pos });
					marker_gap = marker_arr[1].x_pos;
					global_dur = 2000;
					auto_slide('on');
				}
				
				//set slide background colors
				$(ele).children('.image_component').append('<div class="blinds"/>');
				$(ele).children('.richtext').append('<div class="blinds"/>');
				$(ele).children('div.richtext').css({'background-color' : marker.color });
				$(ele).find('a').css({'background-color' : marker.color, 'opacity' : .8 });
				adjustColor($(ele).children('div.richtext'), 10);
				adjustColor($(ele).find('a'), 25);
				
				//itterate marker values			
				marker_x += range;
				z_index+= 1;
				marker_id++;
			});
		});	
		
		function adjustColor(ele, percent) 
		{
			var darkenPercent = percent; // darken color by 15 percent
			var rgb = ele.css('background-color');
			rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
			var red = $.trim(rgb[0]);
			var green = $.trim(rgb[1]);
			var blue = $.trim(rgb[2]);
				
			// darken
			red = parseInt(red * (100 - darkenPercent) / 100);
			green = parseInt(green * (100 - darkenPercent) / 100);
			blue = parseInt(blue * (100 - darkenPercent) / 100);
			// lighten
			/* red = parseInt(red * (100 - darkenPercent) / 100);
			green = parseInt(green * (100 - darkenPercent) / 100);
			blue = parseInt(blue * (100 - darkenPercent) / 100); */
			
			rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
			ele.css('background-color', rgb);
		};				
	};
})(jQuery);