// * promoslider depends on jcarousel * //
/*
  example usage:
  <ul id="slider-categories">
    <li><a href="#" rel="aktuelles"/>Aktuelles</a></li>
    <li><a href="#" rel="neueste-produkte"/>Neueste Produkte</a></li>
  </ul>

  <ul id="aktuelles" class="jcarousel-skin-tango">
    <li>
      <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />
      <br />
      Produktname 01
      <br />
      Kosten 3&euro;
    </li>
    <li>
      <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
      <br />
      Produktname 02
      <br />
      Kosten 6&euro;
    </li>
    ...
  </ul>

  <ul id="neueste-produkte" class="jcarousel-skin-tango">
    <li>
      <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
      <br />
      Produktname 11
      <br />
      Kosten 3&euro;
    </li>
    ...
  </ul>
*/
(function($) {
	
  $.fn.promoslider=function(o) {
    return $(this).data('promoslider', new $.promoslider(this, o));
  };
  // promoslider object
  $.promoslider=function(e, o) {
    this.categories=e;
    this.init();
  };

  var $ps=$.promoslider;
  $ps.fn = $ps.prototype = {
      promoslider: '0.2.4'
  };
  $ps.fn.extend=$ps.extend=$.extend;

  // promoslider methods
  $ps.fn.extend({	
    init: function(){
	
      var self=this;
      for(i=0;i<this.categories.size();i++){
        // define category on click
        $(this.categories[i]).click(function(){
          self.stop();
          self.setActive(this);
        });
		/* Set sliding-time */
        if( i == 0 ) {
        	$('#'+this.categories[i].rel).jcarousel({animation:3000, scroll:1});
        } else {
        	// create sliders
            $('#'+this.categories[i].rel).jcarousel({animation:3000});
        }	
        
        // define stop on prev/next click
        $('.jcarousel-prev,.jcarousel-next').click(function(){
          self.stop();
        });
      }
      this.active=0;
$('.jcarousel-skin-tango').css({visibility: "visible"});
      this.next();
    },

    next: function(){
      if(typeof this.cycle=='undefined')
        this.cycle=1;
      if(this.active>=this.categories.size()){
        this.active=0;
        this.cycle++;
      }
      this.setActive(this.categories[this.active]);
      // scroll item
      if(typeof this.categories[this.active] != 'undefined')
      $('#'+this.categories[this.active].rel).jcarousel('scroll',1*this.cycle,true);
      this.active++;
      this.auto();
    },

    auto: function(){
      var self=this;
		/* Set time, item is show */
      this.timer=setTimeout(function(){self.next();}, 4*1000);
    },

    stop: function(){
      if(this.timer == null) return;
      clearTimeout(this.timer);
      this.timer=null;
    },

    setActive: function(active){
      // clear slider and category links
      $(this.categories).removeClass();
      $('.jcarousel-container').hide();
      // set slider and category link active
      $(active).addClass('slider-active');
      if(typeof active != 'undefined')
        $('#'+active.rel).closest('.jcarousel-container').show();
    }
  });

})(jQuery);


jQuery(document).ready(function() {	
	  if(jQuery('#slider-categories li a').size()>0)
	    jQuery('#slider-categories li a').promoslider();
	});