/**
 * Plugin do tworzenia prostego slideshow z przyciskami po bokach
 * @author  Dorota Sadza <dsadza at mp dot pl>
 * @version $Id$
 * Usage:
 * <div id="slideshow">
      <div class="slide active"><img src=".." alt="" /><span>krok 1</span></div>
      <div class="slide"><img src=".." alt="" /><span>krok 2</span></div>
      <div class="slide"><img src=".." alt="" /><span>krok 3</span></div>
      <div class="slide"><img src=".." alt="" /><span>krok 4</span></div>
      <div class="slide"><img src=".." alt="" /><span>krok 5</span></div>
  </div>
  
  $("#slideshow").simpleSlide();
  
  Jeśli nie dostanie width i height, bierze je z wymiarów obrazka 
  - jeśli slajd składa się np. z tekstu i obrazka, trzeba podac wymiary ręcznie.
 */

jQuery.fn.simpleSlide = function(customOptions) {

    var options = {
      width: $(this).find('.active img').width(),
      height: $(this).find('.active img').height(),
      buttonWidth : '40px',
      buttonColor : 'white',
      buttonFontSize : '30px',
      commentSize : '30px',
      commentPadding: '5px', 
      commentColor: 'white', 
      commentFontSize: '20px',
      commentBackground : 'white'
      
    };

    $.extend(options, customOptions); 
    
    var tmp1 = parseInt(options.height)+parseInt(options.commentSize)+parseInt(options.commentPadding);
    
    $(this).css({
                 'height': tmp1,
                 'width': options.width
                 });
                              

    
    var self = $(this);
    
    var tmp2 = parseInt(options.width)-parseInt(options.commentPadding);
      tmp2 = tmp2 + "px";
    
    self.find('.slide span').css({
                             'top':options.height,
                             'width':tmp2,
                             'height':options.commentSize,
                             'padding-left':options.commentPadding,
                             'padding-top':options.commentPadding,
                             'color':options.commentColor,
                             'font-size':options.commentFontSize,
                             'background-color':options.commentBackground
                             
                             });

    return this.each(function() {

      $(this).wrap("<div id='simpleslide-container'></div>");
      
      $("#simpleslide-container").css('position','relative');
      
      $("<button id='prev_photo'>").html('&laquo;')
          .css({
                  'width': options.buttonWidth,
                  'height': options.height,
                  'color': options.buttonColor,
                  'font-size': options.buttonFontSize

          })
          .prependTo('#simpleslide-container');
      var tmp = parseInt(options.width)-parseInt(options.buttonWidth);
      tmp = tmp + "px";
      
      $("<button id='next_photo'>").html('&raquo;')
          .css({
                  'left' : tmp,
                  'width': options.buttonWidth,
                  'height': options.height,
                  'color': options.buttonColor,
                  'font-size': options.buttonFontSize

          })
          .appendTo('#simpleslide-container');

      $("#next_photo").bind('click',function(){
          var $active = self.find('.active');

          if ( $active.length === 0 ) {$active = self.find('.slide:last');}

          var $next =  $active.next().length ? $active.next()
              : self.find('.slide:first');

          $active.addClass('last-active');
          $next.css({height: '0%'})
              .addClass('active')
              .animate({height: '100%'}, 1000, function() {
                  $active.removeClass('active last-active');
                  
          });
          
          
      });
      $("#prev_photo").bind('click',function(){
        var $active = self.find('.active');

        if ( $active.length === 0 ) {$active = self.find('.slide:first');}

        var $next =  $active.prev().length ? $active.prev()
            : self.find('.slide:last');

        $active.addClass('last-active');

        $next.css({height: '0%'})
            .addClass('active')
            .animate({height: '100%'}, 1000, function() {
                $active.removeClass('active last-active');
                
            });
            
      });    
    
    });

};