///////////////////////////////////////////////////////////////////////////
// ARTIKEL MOUSEOVER
///////////////////////////////////////////////////////////////////////////

/*
 * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */


/* tooltip-0.2.js - Small tooltip library on top of Prototype 
 * by Jonathan Weiss <jw@innerewut.de> distributed under the BSD license. 
 *
 * This tooltip library works in two modes. If it gets a valid DOM element 
 * or DOM id as an argument it uses this element as the tooltip. This 
 * element will be placed (and shown) near the mouse pointer when a trigger-
 * element is moused-over.
 * If it gets only a text as an argument instead of a DOM id or DOM element
 * it will create a div with the classname 'tooltip' that holds the given text.
 * This newly created div will be used as the tooltip. This is usefull if you 
 * want to use tooltip.js to create popups out of title attributes.
 * 
 *
 * Usage: 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     // with valid DOM id
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *
 *     // with text
 *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
 *
 *     // create popups for each element with a title attribute
 *    Event.observe(window,"load",function() {
 *      $$("*").findAll(function(node){
 *        return node.getAttribute('title');
 *      }).each(function(node){
 *        new Tooltip(node,node.title);
 *        node.removeAttribute("title");
 *      });
 *    });
 *    
 *   </script>
 * 
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears. 
 * 
 * Example:
 * 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip) {
    var options = Object.extend({
      default_css: false,
      margin: "0px",
        padding: "5px",
        backgroundColor: "#fff",
        min_distance_x: 5,
      min_distance_y: 5,
      delta_x: 0,
      delta_y: 0,
      zindex: 1000
    }, arguments[2] || {});

    this.element      = $(element);

    this.options      = options;
    
    // use the supplied tooltip element or create our own div
    if($(tool_tip)) {
      this.tool_tip = $(tool_tip);
    } else {
      this.tool_tip = $(document.createElement("div")); 
      document.body.appendChild(this.tool_tip);
      this.tool_tip.addClassName("tooltip");
      this.tool_tip.appendChild(document.createTextNode(tool_tip));
    }

    // hide the tool-tip by default
    this.tool_tip.hide();

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },

  moveTooltip: function(event){
      Event.stop(event);
      // get Mouse position
    var mouse_x = Event.pointerX(event);
      var mouse_y = Event.pointerY(event);
    
      // decide if wee need to switch sides for the tooltip
      var dimensions = Element.getDimensions( this.tool_tip );
      var element_width = dimensions.width;
      var element_height = dimensions.height;
    
      if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
          mouse_x = mouse_x - element_width;
          // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_x = mouse_x - this.options.min_distance_x;
      } else {
          mouse_x = mouse_x + this.options.min_distance_x;
      }
    
      if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
          mouse_y = mouse_y - element_height;
        // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_y = mouse_y - this.options.min_distance_y;
      } else {
          mouse_y = mouse_y + this.options.min_distance_y;
      } 
    
      // now set the right styles
      this.setStyles(mouse_x, mouse_y);
  },
    
        
  showTooltip: function(event) {
    Event.stop(event);
    this.moveTooltip(event);
      new Element.show(this.tool_tip);
  },
  
  setStyles: function(x, y){
    // set the right styles to position the tool tip
      Element.setStyle(this.tool_tip, { position:'absolute',
                                        top:y + this.options.delta_y + "px",
                                        left:x + this.options.delta_x + "px",
                                        zindex:this.options.zindex
                                      });
    
      // apply default theme if wanted
      if (this.options.default_css){
          Element.setStyle(this.tool_tip, { margin:this.options.margin,
                                                            padding:this.options.padding,
                                              backgroundColor:this.options.backgroundColor,
                                                              zindex:this.options.zindex
                                            }); 
      } 
  },

  hideTooltip: function(event){
      new Element.hide(this.tool_tip);
  },

  getWindowHeight: function(){
    var innerHeight;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerHeight = document.body.clientHeight;
    } else {
          innerHeight = window.innerHeight;
    }
    return innerHeight; 
  },
 
  getWindowWidth: function(){
    var innerWidth;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerWidth = document.body.clientWidth;
    } else {
          innerWidth = window.innerWidth;
    }
    return innerWidth;  
  }

}

///////////////////////////////////////////////////////////////////////////
// ARTICLE SCROLLER
///////////////////////////////////////////////////////////////////////////

var ArticleScroller = Class.create({

    _index: 0,
    
    _current: 0,

    initialize: function(element) {
        
        this.element = $(element);
        this.prev = this.element.getElementsByClassName('prev')[0];
        this.next = this.element.getElementsByClassName('next')[0];
        this.slider = this.element.getElementsByTagName('ul')[0];

        this._attachMouseEvents();
        
        if (typeof(artikelId) != 'undefined') {
            var artikelCollection = $(this.slider).getElementsByClassName('artikel-' + artikelId);
            if (artikelCollection) {
                var artikel = this.slider.getElementsByClassName('artikel-' + artikelId)[0];
                if (artikel) {
                    var index = artikel.className.split(' ')[0].split('-')[1];
                    var pageIndex = Math.ceil((parseInt(index)+1) / 14);
                    
                    if (pageIndex > 1) {
                        
                        // hack i.v.m fout in berekening door ruimte die over is
                        if (index >= 38) {
                            pageIndex++;
                        }
                        
                        Event.observe(window, 'load', function() { 
                            this.slide(-(pageIndex-1), true)
                        }.bind(this) );
                    }
                    
                }
            }
            
            this._setActive(artikelId);            
        }
    },
    
    slide: function(offset, noEffect) {
        if (typeof(this.moving) == 'undefined' || this.moving == false) {

            var actualOffset = offset * 14 * 50;
        
            this._index += offset;
        
            if (!noEffect) {
    	        new Effect.Move(this.slider, { 
    	            duration: 0.3,
    	            x: actualOffset,
    	            beforeStart: function() {
    	                this.moving = true;
    	            }.bind(this),
    	            afterFinish: function() {
    	                this.moving = false;
    	            }.bind(this)
    	        });
                
            } else {
                this.slider.style.left = actualOffset + 'px';            
            }
        
	    
		    if (this._index == -3) {
		       this.next.hide();
		    } else {
		       this.next.show();
		    }
		    
		    if (this._index == 0) {
		       this.prev.hide();
		    } else {
		       this.prev.show();
		    }
		    
		}
        
    },
    
    _setActive: function(artikelId) {
        var artikel = $(this.slider.getElementsByClassName('artikel-' + artikelId))[0];
        if (artikel) {
            artikel.addClassName('active');
            if (this._current != 0) {
                var prev = $('artikel' + this._current);
                prev.removeClassName('active');
            }
            this._current = artikelId;
        }
    },
    
    _attachMouseEvents: function() {
        Event.observe(this.prev, 'click', function() { this.slide(1) }.bind(this));
        Event.observe(this.next, 'click', function() { this.slide(-1) }.bind(this));
    }

});

///////////////////////////////////////////////////////////////////////////
// EVENT OBSERVERS
///////////////////////////////////////////////////////////////////////////

document.observe('dom:loaded', function() {
    
    var menu = new Menu('bottomLeftHor');
    
    var wrappers = $$('div.article-scroller-wrapper-external');

    for (var i = 0; i < wrappers.length; i++) {
        new ArticleScroller(wrappers[i]);
        
    }
    
    var links = $$('a.article-link');
	var randomLinks = $$('a.fancy-tooltip');
	randomLinks.each(function(rlink) {
		links.push(rlink);	
	});
    if (links) {
        links.each(function(link, key) {
            var titleExploded = link.title.split('|');
            var title = titleExploded[0];
            var content = '';
            
            for (var i = 1; i < titleExploded.length; i++) {
                content += titleExploded[i];
            }
            
            var div = document.createElement('div');
            div.className = 'tooltip';
            div.style.display = 'none';
            div.id = 'tooltip-contents-' + key;
            var header = document.createElement('h1');
            header.innerHTML = title;
            var contentTag = document.createElement('div');
            contentTag.innerHTML = content;
            
            div.appendChild(header);
            div.appendChild(contentTag);
            
            document.getElementsByTagName('body')[0].appendChild(div);
            
            link.removeAttribute('title');
            
            new Tooltip(link, 'tooltip-contents-' + key);     
        });
    }
    
});