/**
 * TODO write documentation
 + short: takes id of div element
 + element has to have a trigger element with class name dropdown-trigger
 + element has to have a content element with class name dropdown-content
 + content will be shown when trigger was clicked
 + div element will be added which acts as close button. Class name of it will be dropdown-close
 */
function DropdownContent (id,show_on_init,t) {
  this.id = id;
  this.effect_time = t?t:0.2;
  this.dropdown_wrapper = null;
  this.content_item = null;
  this.link_item = null;
  this.close_item = null;
  this.show_on_init = show_on_init?show_on_init:false; // if show_on_init is true, the content will be shown by default
  this.is_droped = false; // keeps track about whether the contentet is droped or not

  this.initialize = function() {
    // get dropdown wrapper
    this.dropdown_wrapper = $(this.id);
    // get the link tag
    this.link_item = $$('#'+this.id+' .dropdown-trigger')[0];
    // get the content tag
    this.content_item = $$('#'+this.id+' .dropdown-content')[0];
    // generate the close "button"
    this.close_item = new Element('div', {'class':'dropdown-close', 'title':'Zamknij'}); // TODO: internationalisieren
    // add close button to the DOM
    this.content_item.insert({top:this.close_item});

    if ( ! (this.close_item && this.link_item) ) {
      return null; // return null when we can't find the items. This way we avoid error messages
    };
    // register click event listener on the link
    this.link_item.observe('click',this.showContent.bind(this));
    // register click event listener on the close "button"
    this.close_item.observe('click',this.hideContent.bind(this));
    if ( this.show_on_init ) {
      this.showContent(null,true,true);
    };
  };


  /**
   *  This method shows the content of dropdown-content
   *  Arguments: 
   *    noanimate:  if true the showing will be animated
   *    noscroll:   if true the we won't scroll to the contents top
   **/
  this.showContent = function(event,noanimate,noscroll) {
    var noanimate = noanimate?noanimate:false;
    var noscroll = noscroll?noscroll:true;
    this.link_item.hide();
    this.dropdown_wrapper.removeClassName('dropdown-closed');
    this.dropdown_wrapper.addClassName('dropdown-opened');
    if ( noanimate ) {
      this.content_item.show();
    }
    else {
      Effect.SlideDown(this.content_item, {duration:this.effect_time});
    };
    if ( ! noscroll ) {
      this.scrollToContent.bind(this).delay(this.effect_time);
    };
    this.is_droped = true;
  };

  this.hideContent = function() {
    Effect.SlideUp(this.content_item, {duration:this.effect_time});
    this.showTrigger.bind(this).delay(this.effect_time);
    this.is_droped = false;
  };

  this.showTrigger = function() {
    this.dropdown_wrapper.removeClassName('dropdown-opened');
    this.dropdown_wrapper.addClassName('dropdown-closed');
    this.link_item.show();
  };

  this.scrollToContent = function() {
    this.dropdown_wrapper.scrollTo();
  };
  
  this.isDroped = function() {
    return this.is_droped;
  };
  
  this.initialize();
}

function showAboutUs (e) {
  e.stop(); // stoping the event, we do not want the default behavior
  // console.log("href: "+document.location.href);
  if ( document.location.href.match(/^(.*(polkwiat|polflowers)\.(home|com|eu|de)\/)?(.*shop.*)?$/) ) {
    if ( dropdown_content.isDroped() ) {
      dropdown_content.hideContent();
    }
    else {
      dropdown_content.showContent();
    }
    
  }
  else {
    // here we are on some other page and not on a shop page
    // we have to redirect to a shop page and put some marker to the
    // GET url, so that we can later drop down the about us content.
    document.location.href = 'shop.html?showaboutus=1'; // sollte noch internationalisiert werden
  }
  
}