/* einige weitere Effekte und Funktionalitaeten fuer den Basic-Shop */

/* ================================================================================== 
   Funktionalitaeten fuer den Shop
   
   ==================================================================================
*/

/*
  basicForm
  =========
  sorgt fuer die Submit-Funktionalitaet eines per shopButton-CSS-Class gebauten Buttons in einem Formular
  
  Parameter
  ---------
  formId: die ID des Form-Tags die submitted werden soll
  firstFieldFocus: true - legt den Fokus auf das erste Input-Feld des Formulars
  noValidation: true - das Formular wird ohne Validierung abgeschickt
  noKeyboard: true - es findet keine Tastaturauswertung statt (somit ist der submit nur per Maus moeglich)
  
  Rueckgabe
  ---------
  das neue VarienFormObjekt
*/
basicForm = function( formId, firstFieldFocus, noValidation, noKeyboard ) {
  var formElem = $( formId ) || null;
  if ( formElem==null ) return;
  
  var firstFieldFocus = ( firstFieldFocus==true ) ? true : false;
  var noValidation = ( noValidation==true ) ? true : false;
  var noKeyboard = ( noKeyboard==true ) ? true : false;
  var varienFormObj = new VarienForm( formId, firstFieldFocus );

  if ( noValidation ) {
    varienFormObj.submit = function() {
      this.form.submit();
    }.bind(varienFormObj);
  }
  
  if ( !noKeyboard ) {
    varienFormObj.hitEnterKey = function( e ) {
      var code = e.which || e.keyCode;
      if ( code == Event.KEY_RETURN ) { 
        Event.stop(e);
        if ( e.type=='keydown' ) {
          this.submit();
        }
      }
    }.bind(varienFormObj);
  
    varienFormObj.form.observe( 'keypress', varienFormObj.hitEnterKey );
    varienFormObj.form.observe( 'keydown', varienFormObj.hitEnterKey );
  }
  
  return varienFormObj;
}

/* ================================================================================== 
   Effekte fuer den Shop
   
   ==================================================================================
*/

/* Neudefinition der scriptaculous-Methoden */
Effect.SlideDown = function(element) {
  element = $(element).cleanWhitespace();
  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
  var oldInnerBottom = element.down().getStyle('bottom');
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({ 
    scaleContent: false, 
    scaleX: false, 
    scaleFrom: window.opera ? 0 : 1,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      element.toggleSlide = -1;
      effect.element.makePositioned();
      effect.element.down().makePositioned();
      if(window.opera) effect.element.setStyle({top: ''});
      effect.element.makeClipping().setStyle({height: '0px'}).show(); 
    },
    afterUpdateInternal: function(effect) {
      effect.element.down().setStyle({bottom:
        (effect.dims[0] - effect.element.clientHeight) + 'px' }); 
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping().undoPositioned();
      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
      element.toggleSlide = 0;}
    }, arguments[1] || {})
  );
}

Effect.SlideUp = function(element) {
  element = $(element).cleanWhitespace();
  var oldInnerBottom = element.down().getStyle('bottom');
  return new Effect.Scale(element, window.opera ? 0 : 1,
   Object.extend({ scaleContent: false, 
    scaleX: false, 
    scaleMode: 'box',
    scaleFrom: 100,
    restoreAfterFinish: true,
    beforeStartInternal: function(effect) {
      element.toggleSlide = -1;
      effect.element.makePositioned();
      effect.element.down().makePositioned();
      if(window.opera) effect.element.setStyle({top: ''});
      effect.element.makeClipping().show();
    },  
    afterUpdateInternal: function(effect) {
      effect.element.down().setStyle({bottom:
        (effect.dims[0] - effect.element.clientHeight) + 'px' });
    },
    afterFinishInternal: function(effect) {
      effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom});
      effect.element.down().undoPositioned();
      element.toggleSlide = 1;
    }
   }, arguments[1] || {})
  );
}



/* die selbst erzeugten Objekte */
var BasicEffects = {
  
  /*  toggleSliding
      -------------
      Aus- und Einfahren von Block-Elementen
      
      Parameter
      ---------
      options - siehe Effects.SlideUp
        direction (String, optional): die Bewegungsrichtung beim ersten Togglen 
                                      down (Std.) | up
        plusElement (Element od. Element-ID, optional): das Element bzw. dessen ID fuer den zugeklappten Zustand 
        minusElement (Element od. Element-ID, optional): wenn plusElement definiert, kann auch das minusElement definiert werden => es wird
                                                         beim Ausklappen das plusElement ausgeblendet und das minusElement eingeblendet
        cssClass (String, optional): die erweiternde CSS-Klasse fuer den zweiten Zustand, Voraussetzung ist, dass nur das plusElement definiert 
                                     wurde (Anm.: es spielt keine Rolle, ob am Anfang die Box ausgeklappt oder zugeklappt ist!
        plusElementType (String, optional): block (Std.) | inline
                                            nur interessant, wenn minusElement definiert ist - Wahrung von inline/block-Elementtyp 
  */
  toggleSliding: function( element, options ) {
    if ( $(element)==null ) return;
    element = $(element).cleanWhitespace();

    options = ( typeof(options)=='object' ) ? options : {};
    
    plusElement = ( options.plusElement!=undefined ) ? $(options.plusElement) : null;
    minusElement = ( plusElement!=null && options.minusElement!=undefined ) ? $(options.minusElement) : null;
    cssClass = ( plusElement!=null && minusElement==null && typeof(options.cssClass)=='string' ) ? options.cssClass : null;
    
    if ( element.toggleSlide==undefined ) {
      element.toggleSlide = ( options.direction=='up' ) ? 1 : 0;
    } else if ( element.toggleSlide == -1 ) {
      return false;
    } else { 
      element.toggleSlide++;
      element.toggleSlide%=2;
    }

    // ggf. die CSS-Klasse vom plusElement tauschen
    if ( cssClass!=null ) {
      plusElement.toggleClass = ( plusElement.toggleClass==undefined ) ? '' : plusElement.toggleClass;
      plusElement.toggleClassName( cssClass );
    } 
    // ggf. plusElement und minusElement wechselseitig aus/einblenden
    else if ( minusElement!=null ) {
      plusElementType = ( options.plusElementType!=undefined ) ? options.plusElementType : 'block';
      if ( element.toggleSlide==0 ) {
        plusElement.setStyle( { display:'none' } );
        minusElement.setStyle( { display:plusElementType } );
      } else {
        plusElement.setStyle( { display:plusElementType } );
        minusElement.setStyle( { display:'none' } );
      }
    }
 
    // das Ein-/Ausfahren der Box starten
    ( element.toggleSlide == 0 ) ? Effect.SlideDown( element, options ) : Effect.SlideUp( element, options );  
  }
};