// $HeadURL: https://joomgallery.org/svn/joomgallery/JG-1.5/Module/JoomCategories/trunk/assets/mod_joomcat.js $
// $Id: mod_joomcat.js 2112 2010-04-26 18:25:04Z erftralle $
/**
* Module JoomCategories for JoomGallery
* by JoomGallery::Project Team
* @package JoomGallery
* @copyright JoomGallery::Project Team
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License as published by the Free Software
* Foundation, either version 2 of the License, or (at your option) any later
* version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY, without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE.
* See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin St, Fifth Floor, Boston, MA 02110, USA
*/
var JoomCatModule = new Class({
  /***********/
  /* Options */
  /***********/
  options:{
      div: '',
      classname: '',
      delay:9000,
      fadeDuration: 500,
      showArrows: true,
      showCarousel: true,
      textShowCarousel: 'Pictures',
      showInfopane: true,
      manualData:[],
      maxWidth: 400,
      maxHeight: 300,
      errorMessage: ''
  },
  /********/
  /* Init */
  /********/  
  initialize: function(options){
    this.setOptions(options);

    // add slideshow container div to the document body
    $(document.body).adopt(new Element('div', {'id': this.options.div, 'class': this.options.classname}));
    
    // slideshow div
    this.slideshow = $(this.options.div);
    
    // make the slideshow div dragable
    this.slideshowdragmove = new Drag.Move(this.slideshow);

    // initially hide the slideshow div
    this.slideshow.setStyles({
      'visibility'  : 'hidden',
      'display'     : 'none'
    });
    
    // add an overlay div to the document body
    $(document.body).adopt(new Element('div', {'id': this.options.div + '_overlay'}));
    this.overlay = $(this.options.div + '_overlay');

    this.overlay.setStyle('position', 'absolute');
    this.overlay.setStyle('left', '0');
    this.overlay.setStyle('width', '100%');
    this.overlay.setStyle('background-color', '#000');
    this.overlay.setStyle('z-index', '999');
    this.overlay.setStyle('cursor', 'pointer'); 
    this.overlay.setStyle('visibility', 'hidden');
            
    // *** Events ***    
    // clicking in browser window fades out the slideshow if visible
    // document for IE
    document.addEvent('click', function(e)
    {
      if (this.slideshow.getStyles('visibility').visibility != 'hidden')
      {
        // stop slideshow
        this.gallery.clearTimer();
	    // stop info zone timer
		if(this.options.showInfopane)
		{
		  this.gallery.slideInfoZone.clearTimer();
		}
        // fade out slideshow
        this.fadeSlideshow(false);
		// remove gallery class from slideshow element
        this.slideshow.removeClass(this.gallery.options.baseClass);
      }
    }.bind(this));
    
    //resize of browser window
    window.addEvent('resize',function(e)
    {
      if (this.slideshow.getStyles('visibility').visibility != 'hidden')
      {
		this.positionOverlay();
        this.positionSlideshow();
      }
    }.bind(this));
    
    // when scrolling in browser window slideshow should follow 
    window.addEvent('scroll', function(e)
    {
      if (this.slideshow.getStyles('visibility').visibility != 'hidden')
      {
        this.positionOverlay();
        this.positionSlideshow();
      }
    }.bind(this));
      
    // scroll at srollbars, avoid dragging
    this.slideshow.addEvent('scroll', function(e)
    {
      alert('scroll slideshow');
      // avoid dragging when clicked on scrollbar
      this.slideshowdragmove.stop();
    }.bind(this));

    // click on slideshow div doesn't fades it out
    this.slideshow.addEvent('click', function(e)
    {
      new Event(e).stop();
    }.bind(this));
    // *** end Events ***
  },
  /*********************************************************************/
  /* Get inner width and height of browser window dependent on browser */
  /*********************************************************************/
  getInnerWidthHeight: function(){
    var Width = 0;
    var Height = 0;
    if(typeof(window.innerWidth) == 'number'){
      // Non-IE
      Width = window.innerWidth;
      Height = window.innerHeight;
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
      // IE 6+ in 'standards compliant mode'
      Width = document.documentElement.clientWidth;
      Height = document.documentElement.clientHeight;
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
      // IE 4 compatible
      Width = document.body.clientWidth;
      Height = document.body.clientHeight;
    }
    return[Width, Height];
  },
  /************************************************************/
  /* Get scroll offset of browser window dependent on browser */
  /************************************************************/
  getScrollXY: function(){
    var scrOfX = 0;
    var scrOfY = 0;
    if(typeof(window.pageYOffset) == 'number'){
      // Netscape compliant
      scrOfY = window.pageYOffset;
      scrOfX = window.pageXOffset;
    } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)){
      // DOM compliant
      scrOfY = document.body.scrollTop;
      scrOfX = document.body.scrollLeft;
    } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)){
      // IE6 standards compliant mode
      scrOfY = document.documentElement.scrollTop;
      scrOfX = document.documentElement.scrollLeft;
    }
    return [scrOfX, scrOfY];
  },
  /********************************/
  /* Positioning of the slideshow */
  /********************************/
  positionSlideshow: function() {
    this.slideshowwidth   = this.options.maxWidth;
    this.slideshowheight  = this.options.maxHeight;
    this.slideshowtop     = this.getScrollXY()[1] + parseInt((this.getInnerWidthHeight()[1] / 2), 10) - parseInt((this.slideshowheight / 2), 10);
    this.slideshowleft    = this.getScrollXY()[0] + parseInt((this.getInnerWidthHeight()[0] / 2), 10) - parseInt((this.slideshowheight / 2), 10);

    this.slideshow.setStyles({
      'top'     : this.slideshowtop+'px',
      'left'    : this.slideshowleft+'px',
      'width'   : this.slideshowwidth+'px',
      'height'  : this.slideshowheight+'px'      
    });        
  },
  /********************************/
  /* Positioning of the overlay   */
  /****s***************************/
  positionOverlay: function() {
    this.overlay.setStyles({top: this.getScrollXY()[1], height: this.getInnerWidthHeight()[1]});
  },
  /*************************/
  /* Fade in/out slideshow */
  /*************************/  
  fadeSlideshow: function(fadeIn){
    if(fadeIn){
      // fading in slideshow
      var fadeOverlayfx = new Fx.Styles(this.overlay, {
        duration: 500,
        wait: true,
        transition: Fx.Transitions.Quad.easeOut
      }).addEvent('onComplete', function() {
        var fadeSlideshowfx = new Fx.Styles(this.slideshow, {
          duration: 500,
          wait: true,
          transition: Fx.Transitions.Quad.easeOut
        }).addEvent('onComplete', function() {  
          // clear slideshow container
          this.slideshow.innerHTML = '';        
          // create a new gallery object and start showing a slideshow
          this.gallery = new gallery( this.slideshow, {
                                        timed: true,
                                        delay: this.options.delay,
                                        fadeDuration: this.options.fadeDuration,
                                        showArrows: this.options.showArrows,
                                        showCarousel: this.options.showCarousel,
                                        textShowCarousel: this.options.textShowCarousel,
                                        showInfopane: this.options.showInfopane,
                                        embedLinks: false,
                                        manualData: this.options.manualData,
                                        preloader: false,
                                        populateData: false,
                                        maxWidth:this.options.maxWidth,
                                        maxHeight:this.options.maxHeight
          });
        }.bind(this));
        this.slideshow.setStyle('display', 'block');
        fadeSlideshowfx.start({
          'opacity': [0, 1]
        });
      }.bind(this));
      fadeOverlayfx.start({
        'opacity': [0,0.7]
      });
    }
    else{
      // fading out slideshow
      var fadeSlideshowfx = new Fx.Styles(this.slideshow, {
        duration: 500,
        wait: true,
        transition: Fx.Transitions.Quad.easeOut
      }).addEvent('onComplete', function() {
        var fadeOverlayfx = new Fx.Styles(this.overlay, {
          duration: 500,
          wait: true,
          transition: Fx.Transitions.Quad.easeOut
        });
        this.slideshow.setStyle('display', 'none');
        fadeOverlayfx.start({
          'opacity': [0.8, 0]
        });
      }.bind(this));
      fadeSlideshowfx.start({
        'opacity': [1,0]
      });      
    }
  },
  /*******************/
  /* Start slideshow */
  /*******************/
  startSlideshow: function(){   
    if(this.options.errorMessage == ''){
      // position the slideshow
      this.positionSlideshow();      
      // position overlay
      this.positionOverlay();
      // fade in slideshow
      this.fadeSlideshow(true);   
    }
    else{
      alert(this.options.errorMessage); 
    }      
  }
});
JoomCatModule.implement(new Options);