(function( $ ){

  $.fn.slideshow = function() {

     var $this = this;
     
     if(this.length == 0){
	return;
     }
    
     var slides = this.find('div.slide');
     var classes = this[0].className;
    

     var option_map = 
     {
	'easing':
	{
	   'regex':new RegExp("ss-easing-([^\ ]*)"),
	   'Default':''
	},
	'speed':
	{
	   'regex':new RegExp("ss-speed-([^\ ]*)"),
	   'Default':''
	},
	'keyboard':
	{
	   'regex':new RegExp("ss-keyboard-off"),
	   'Default':true
	},
	'circular':
	{
	   'regex':new RegExp("ss-circular"),
	   'Default':false
	},
	'vertical':
	{
	   'regex':new RegExp("ss-vertical"),
	   'Default':false
	}


     };

     var slideshow_options=
     {
	'style':'',
	'navigation':'horizontal'
     };

     var scrollable_options = 
     {
	'items':'slide'
     };

     
     $(option_map).each(function(index,element) {
	   
	});

     for (var scrollable_option in option_map) {
	var option = option_map[scrollable_option];
	var match = option.regex.exec(classes);
	if(match){
	   if(match.length==1){
	      // Boolean option if no group returned from the regular expression      
	      if(option.Default == false){
		 scrollable_options[scrollable_option] = true;
	      }
	      if(option.Default == true){
		 scrollable_options[scrollable_option] = false;
	      }	      
	   }
	   if(match.length==2){
	      // If a group is returned, it is the value of the option
	      scrollable_options[scrollable_option] = match[1];
	   }

	}
     }




     if(slideshow_options.navigation == "buttons"){
	//create buttons div
     }

     //Wrap the slides in a slideshow div, the scrollable plugin needs this
     this.children('.slides').wrap('<div class="slideshow"/>');

     // Set the slideshow div and the slide divs to be the same size as the continer
     this.children('.slideshow').height(this.height()).width(this.width());
     this.children('.slideshow').children('.slides').children('.slide').height(this.height()).width(this.width());



     if(slideshow_options.navigation == "horizontal"){
	//bind left/right elements to next/previous
	var right_s = '#'+this.attr('id')+' .slideshow-button-right';
	var right = $(right_s);
	var right_id = this.attr('id')+'_next';
	right.css('display','block');
	right.attr('id',right_id);
	
	var left_s = '#'+this.attr('id')+' .slideshow-button-left';
	var left = $(left_s);
	var left_id = this.attr('id')+'_prev';
	left.css('display','block');
	left.attr('id',left_id);

	scrollable_options['next'] = '#'+right_id;
	scrollable_options['prev'] = '#'+left_id;
	/*
	//Bind callbacks to the image load, we need to know the image dimensions so that we can vertically center them
	this.find('.slideshow-button-left img,.slideshow-button-right img').load(function() {
	      var img = this;
	      var center = ( $this.height() - $(img).height() ) / 2;
	      $(img).parent().css('top',center);	      
	   });
	*/
     }



     //initialize the scrollable plugin
     var s = this.find('.slideshow').scrollable(scrollable_options);
     var scrollable = s.data('scrollable');

     
    
  };
})( jQuery );