/**
 * @author Jan Cinert <jan.cinert@gmail.com>
 * @require prototype.js, scriptaculous.js
 */



PanzaniBlueBox = Class.create({
	initialize: function( box, data ){         
	  this.init( box, data );
	},
	init: function( box, data ) {
	  this.changeTimeout = 5000;
      this.effectDuration = 2.0;
	  this.current = -1;
	  this.remoteUrl = AjaxUrl + '?mode=';
	  this.template = [];
	  this.template[1] = '<div class="blueBoxItem">'+
	                    '<div class="blueBoxItemInner"#{style}>'+
	                    '<div class="blueBoxInfo">'+
	                      '<h4>#{title}</h4>'+
	                      '<p>#{perex}</p>'+
	                      '<div class="blueBoxLink"><a href="#{link}">#{link_text}</a></div>'+
	                    '</div>'+                    
	                    '</div>'+
	                  '</div>';
	  this.template[2] = '<div class="blueBoxItem" style="cursor: pointer">'+
	                    '<div class="blueBoxItemInner"#{style} onclick="document.location.href=\'#{link}\'">'+
	                    '</div>'+
	                  '</div>';
	  this.linkText = 'V�¡echny recepty z t�©to kategorie';
	  this.imageTemplate = '<img src="[+image+]" />';
	  
	  this.data = data;
    this.blocked = false;
    this.animate = false;
    this.timeout = false;
    this.even = true;
	  this.box = $(box);
	  this.box2 = this.box.cloneNode( true );
	  this.box2.setAttribute( 'id', this.box.getAttribute( 'id' ) + 2 );
	  this.box2.setStyle( { 'display': 'none' } );
	  this.box.parentNode.appendChild( this.box2 );
	  this.box2 = $( this.box2 );
    this.scheduleNextSlide();
	},
	stopSlideShow: function() {
	  try{
	    window.clearTimeout( this.timeout );
	  }
	  catch(e) {}
	},
	resetSlideShow: function() {
	  this.stopSlideShow();
	  this.scheduleNextSlide();
	},
	scheduleNextSlide: function() {
	  this.timeout = window.setTimeout( this.nextSlide.bind( this ), this.changeTimeout );
	},
	nextSlide: function() {
	  if( !this.blocked ) {
	    this.nextAnimated();
	    this.scheduleNextSlide();
	  }
	},
	seek: function( offset ) {
	  if( !this.blocked && offset != this.current ) {
  	  if( this.data.length > offset ) {
  	    this.current = offset;
  	    this.render();
	    }
	  } 
	},
	nextAnimated: function() {
	  this.animate = true;
	  this.next();
	},
	getNextIndex: function() {
	  if( this.data.length > this.current + 1 ) {
	    return this.current + 1;
	  }
	  else {
	    return 0;
	  }
	},
	next: function() {
	  this.seek( this.getNextIndex() );
	},
	previous: function() {
	  if( this.current > 0 ) {
	    this.seek( this.current - 1 );
	  }
	  else {
	    this.seek( this.data.length - 1 );
	  }	  
	},
	nextHandler: function( event ) {
	  if( !this.blocked ) {
	    this.stopSlideShow();
	    this.animate = false;
	    this.next();
	    this.scheduleNextSlide();
	  }
    Event.stop( event );
	},
	previousHandler: function( event ) {
	  if( !this.blocked ) {
	    this.stopSlideShow();
	    this.animate = false;
	    this.previous();
	    this.scheduleNextSlide();
	  }
	  Event.stop( event );
	},
	renderItem: function( index ) {
	  var templateType = this.data[index]['template'];
	  var template = new Template( this.template[templateType] );
	  var _data = [];
	  Object.extend( _data, this.data[index] );
      _data['image_tag'] = this.data[index]['image'] ? this.imageTemplate.replace( '[+image+]', this.data[index]['image'] ) : '';
	  _data['style'] = this.data[index]['image'] ? ' style="border: 3px solid #fff;padding:0px;background: url([+image+])"'.replace( '[+image+]', this.data[index]['image'] ) : '';
	  _data['link_text'] = this.linkText;
	  return template.evaluate( _data );
	},
	render: function() {
	  this.blocked = true;
	  if ( this.animate ) {
	    if( this.even ) {
	      var box = this.box2;
	      var box2 = this.box;
	    }
	    else {
	      var box = this.box;
	      var box2 = this.box2;
	    }
	    this.even = !this.even;
	    box.update( this.renderItem( this.getNextIndex() ) );
	    //box.show();
	    //box2.hide();
	    //this.animateFinishHandler();
	    new Effect.Parallel(
  				[
  					new Effect.Appear(box,{sync:true, to: 0.99}),
  					new Effect.Fade(box2,{sync:true, from: 0.99})
  				],
  				{
  					duration:this.effectDuration,
  					afterFinish: this.animateFinishHandler.bind(this)
  				}
      );
	  }
	  else {
	    this.box2.hide();
  	  var html = this.renderItem( this.current );
  	  this.box.update( html );
  	  this.box.show();
  	  this.blocked = false;
	  }
	  if( window.external && typeof window.XMLHttpRequest == "undefined" ) {
	    //$$('.blueBoxInfo').each( function( item ) { Element.setStyle( item, { opacity: 0.8 } ) } );
	  }
	},
	animateFinishHandler: function() {
	  this.blocked = false;
	  this.animate = false;
	},
	loadRemote: function( mode ) {
	  var url = this.remoteUrl + mode;
	  new Ajax.Request( url, {
      method: 'post',
      onSuccess: this.loadRemoteResponse.bind( this )
    });
	},
	loadRemoteResponse: function( transport ) {
    var json = transport.responseText.evalJSON( true );
    if( typeof( json ) == 'object' ) {
      this.data = json['entries'];
      this.seek(0);
    }
  },
	updateRemote: function( mode ) {
	  var url = this.remoteUrl + mode;
	  new Ajax.Request( url, {
      method: 'post',
      onSuccess: this.updateRemoteResponse.bind( this )
    });
	},
	updateRemoteResponse: function( transport ) {
    this.box.update( transport.responseText );
    this.box.show();
  }
})

PanzaniTabs =  {
  init: function( selector, box ) {
    this.current = 0;
    this.box = box;
    this.anchors = $$( selector );
    this.anchors.each( function( item, index ) { item.observe( 'click', this.eventHandler.bindAsEventListener( this, index + 1 ) ) }, this );
  },
  setActive: function( index ) {
    if( this.box.blocked ) return;
    this.box.stopSlideShow();
    this.box.animate = false;
    this.box.current = -1;
    this.box.box.hide();
    this.box.box2.hide();
    this.even = true;
    switch ( index )
    {
    /*
    case 1:
      this.box.loadRemote(6);
      var className = 'Soutez';
      this.box.scheduleNextSlide();
      break;
    */
    case 1:
      this.box.linkText = 'Všechny recepty této kategorie'; 
      this.box.loadRemote(1);
      var className = 'Recepty';
      this.box.scheduleNextSlide();
      break;
    case 2:
      this.box.linkText = 'Ví­ce'; 
      this.box.loadRemote(2); 
      var className = 'Figle';
      this.box.scheduleNextSlide();
      break;
    case 3:
      this.box.updateRemote(3); 
      var className = 'Najdete'; 
      break;
    default:
    }
    
    if( this.current ) {
      this.anchors[this.current-1].removeClassName( 'active' );
    }

    this.anchors[index-1].addClassName( 'active' );
    $('blueBoxWrapper').className = 'type' + className;   

    this.current = index;
  },
  eventHandler: function( event, index ) {
    this.setActive( index );    
    Event.stop( event ); 
  }
}


Event.observe( window, 'load', function() {

    var blueBox = new PanzaniBlueBox( 'blueBox', [] );

    PanzaniTabs.init( '#blueBoxWrapper .blueBoxTabs li a', blueBox );
    PanzaniTabs.setActive(1);
  
    
    var item = $$('#blueBoxWrapper .blueBoxContent .blueBoxLeft a')[0];
    item.observe( 'click', blueBox.previousHandler.bindAsEventListener( blueBox ) );
    var item = $$('#blueBoxWrapper .blueBoxContent .blueBoxRight a')[0];
    item.observe( 'click', blueBox.nextHandler.bindAsEventListener( blueBox ) );

  }
);