;(function($) {

	$.fn.drawerslider = function(o) {
		return this.each(function() {
			new $ds(this, 0);
		});
	};
	
	var defaults = {
		opacity: 0.66,
		json_url: '/homepage-slider'
	};
		
	$.drawerslider = function(e, o) {
	
		this.options	= $.extend({}, defaults, o || {});
	

		this.ds_o		= null;		
		this.thumb_list = null;
		this.drawer     = null;
		this.paper      = null;
		this.c_out      = null;
		this.c_in       = null;
		this.a          = null;
		
		this.ds_o 		= $(e);

		
		this.draw_thumbnail_list();

	}
	
	var $ds = $.drawerslider;
	
	$ds.fn = $ds.prototype = {		
		drawerslider: '0.1.0'
	}
	
	$ds.fn.extend = $ds.extend = $.extend;
	
	$ds.fn.extend({
		draw_thumbnail_list: function() {
			// create local reference to object
			var self = this;
			
			// create empty jquery UL list
			this.thumb_list = $('<ul class="feature_drawer_slides"></ul>');
			
			// ajax call to the json formated list of items
			$.get(this.options.json_url,{},
			
				// callback on json data
				function(data) {
				
					// turn json data into object
					try {
						var dataJSON = eval('('+data+')');
					} catch(e) {}
					
					// if we have data, continue
					if (dataJSON != undefined) {
											
						// iterate through items
						$.each(dataJSON.slides, function(i, slide) {
						
							// create list item, anchor and image
							var thumb_li     = $('<li></li>');
							var thumb_anchor = $('<a href="'+ slide.fullsize +'"><img src="'+ slide.thumb +'" width="98" height="98" /></a>');
						
							// click action for the anchor	
							thumb_anchor.click(function() {
								// change the href and image source of the feature image. change the clicked on thumbnail to full opacity
								$('.feature_image_link', self.ds_o).attr('href', slide.link);
								$('img.feature_image', self.ds_o).attr('src', slide.fullsize);
								$('img', self.thumb_list).css('opacity', self.options.opacity);
								$(this).find('img').css('opacity', 1);
								
								// disable default click, prevent followthru
								return false;
							});
							
							// append the created anchor to the created list item
							thumb_li.append(thumb_anchor);
							
							// append the list item to the object's ul
							self.thumb_list.append(thumb_li);
							
						}); // end each
						
						// create the drawer. if no data in the json call, drawer is not created
						self.draw_drawer();
						
					} // end if undefined					
				} // end function
			); // end get					
		}, // end function
		draw_drawer: function() {
			// create the empty container div
			this.drawer = $('<div class="feature_drawer"></div>');
			// add the close/open anchor to the drawer
			this.drawer.append('<a href="#drawer" title="Close Slides" id="drawer_close"></a>');
			// add the json populated thumbnail list
			this.drawer.append(this.thumb_list);
			// add the drawer to the object
			this.ds_o.append(this.drawer);
			
			// draw the svg arrows on the close/open anchor
			this.draw_open_arrow();
			// call the carousel on the thumbnail list
			this.do_carousel();
			// assign the js events to the close/open anchor
			this.do_js();		
		}, // end function	
		draw_open_arrow: function() {
			this.paper = Raphael('drawer_close', 33, 33);
		
			this.c_out = this.paper.circle(16, 16, 16).attr({
				fill: "#fff",
				stroke: "none"
			});
			this.c_in  = this.paper.circle(16, 16, 9).attr({
				fill: "#eeb211",
				stroke: "none"
			});
			
			this.a  = this.paper.image('/Themes/Primary/images/drawer_arrow.png', 12.5, 12.5, 6, 8);	
		}, // end function
		do_carousel: function() {
			this.thumb_list.jcarousel({
				buttonPrevHTML: '<a href="#up" title="Scroll Up">Scroll Up</a>',
				buttonNextHTML: '<a href="#down" title="Scroll Down">Scroll Down</a>',
				vertical: true,
				wrap: 'circular',
				scroll: 1,
				animation: 'fast',
				easing: 'swing',
				start: $(this).find('li').length/2,
				initCallback: function(c, s) {
					c.list.css('marginLeft',c.list.width() + 10);
				}
			});
		}, // end funciton
		do_js: function() {
			var self = this;
			
			this.drawer.find(('a[href*="drawer"]'))
			.toggle(
				// Sliding in
				function() {
					// Move the slides
					self.thumb_list.animate({
						marginLeft: '0'
					}, 200, 'swing');
					
					// Move the navigation buttons
					$('a[href*="#up"], a[href*="#down"]', self.drawer).show().animate({
						left: '50%'
					}, 200, 'swing', function() {
						$('a[href*="#up"]', self.drawer).animate({
							top: '4px'
						}, 200, 'swing');
						$('a[href*="#down"]', self.drawer).animate({
							bottom: '4px'
						}, 200, 'swing');
					});
	
					// Move the drawer opener button
					$(this).animate({
						left: '1'
					}, 200, 'swing', function() {
						self.c_out.attr({fill:"#a46317"});
					});
					
					// Rotate the drawer opener button
					self.a.animate({rotation: 180, isAbsolute: true, x: 14}, 200, ">");
					self.c_out.animate({fill: "#a46317"}, 200, ">");
					
					return false;
				},
				// Sliding out
				function() {	
					// Move the slides, then hide the navigation buttons when done			
					self.thumb_list.animate({
						marginLeft: self.thumb_list.width() + 10
					}, 200, 'swing');
					
					// Move the navigation buttons
					$('a[href*="#up"], a[href*="#down"]', self.drawer).animate({
							left: '150%'
					}, 200, 'swing', function() {
						$(this).hide();
					});
					$('a[href*="#up"]', self.drawer).animate({
						top: '20px'
					}, 200, 'swing');
					$('a[href*="#down"]', self.drawer).animate({
						bottom: '20px'
					}, 200, 'swing');
					
					// Move the drawer opener button
					$(this).animate({
						left: self.thumb_list.outerWidth() +1 
					}, 200, 'swing', function() {
						self.c_out.attr({fill:"#fff"});
					});
					
					// Rotate the drawer opener button
					self.a.animate({rotation: 0, isAbsolute: true, x: 12.5}, 200, ">");
					self.c_out.animate({fill: "#fff"}, 200, ">");
					
					return false;
				}		
			) // end toggle
			.mouseover(function() {
				// > 1 : Drawer is closed
				if ( parseInt($(this).css('left')) > 1 ) {
					self.c_out.attr({fill:"#a46317"});
				} else {
					self.c_out.attr({fill:"#fff"});
				}			
			}) // end mouseover
			.mouseout(function() {
				// > 1 : Drawer is closed
				if ( parseInt($(this).css('left')) > 1 ) {
					self.c_out.attr({fill:"#fff"});
				} else {
					self.c_out.attr({fill:"#a46317"});
				}			
			}) // end mouseout
		} // end function
	});	// end fn.extend
	
	$ds.extend({
		defaults: function(d) {
			return $.extend(defaults, d || {});			
		}
		
	});
	

})(jQuery);