if (!Ascribe) {
	var Ascribe = {};
}

if (typeof(Ascribe.Gallery) == 'undefined') {
	Ascribe.Gallery = function(config) {
		// misc configs
		this.loadingInProgress = false;
		
		// scope adjustment
		var that = this;
		
		// id options
		this.largeImageContainerID = config.largeImageContainerID || 'large-image-container';
		this.largeImageID = config.largeImageID || 'default-photo';
		this.currentLargeImageSrc = '';
		this.loadingID = config.loadingID || 'loading';
		this.viewFullSizeID = config.viewFullSizeID || 'view-full-size';
		this.thumbnailsScrollerID = config.thumbnailsScrollerID || 'gallery-thumbnails-scroller';
		this.thumbnailsScrollerTrackID = config.thumbnailsScrollerTrackID || 'gallery-thumbnails-scroller-track';
		this.thumbnailsScrollerHandleID = config.thumbnailsScrollerHandleID || 'gallery-thumbnails-scroller-handle';
		
		// misc options
		this.effectMorphBackgroundColor = config.effectMorphBackgroundColor || 'background-color: #000;';
		this.nodeFirstChild = '&nbsp;';
		this.viewFullSizeSrc = 'http://assets.ascribehq.com/integrations/images/misc/view_full_size.png';
		this.viewFullSizeAlt = 'View Full Size';
		
		if (config.tables) {
		  document.observe("dom:loaded", function() {
  		  this.slider1 = new Control.Slider(this.thumbnailsScrollerHandleID, this.thumbnailsScrollerTrackID, {
      		onSlide: function(v) {
      		  this.scrollHorizontal(v, $(this.thumbnailsScrollerID), this.slider1);
      		}.bind(this),
      		onChange: function(v) {
      		  this.scrollHorizontal(v, $(this.thumbnailsScrollerID), this.slider1);
      		}.bind(this)
      	});
  		}.bind(this));
	  }
	  else {
	    this.slider1 = new Control.Slider(this.thumbnailsScrollerHandleID, this.thumbnailsScrollerTrackID, {
    		onSlide: function(v) {
    		  this.scrollHorizontal(v, $(this.thumbnailsScrollerID), this.slider1);
    		}.bind(this),
    		onChange: function(v) {
    		  this.scrollHorizontal(v, $(this.thumbnailsScrollerID), this.slider1);
    		}.bind(this)
    	});
	  }
	  
	  // event listeners
	  Event.observe(window, 'load', function () {
      if ($(this.thumbnailsScrollerID).scrollWidth <= $(this.thumbnailsScrollerID).offsetWidth) {
    		this.slider1.setDisabled();
    		$(this.thumbnailsScrollerTrackID).hide();
    	} else {
        $(this.thumbnailsScrollerTrackID).style.visibility = 'visible';
      }
    }.bind(this));

		Event.observe(this.largeImageID, 'load', this.fadeImage.bindAsEventListener(this));
		
		////////////////////////////////////////////////////////////////////////////
		// ie patch for marks
		//
		// As of 7/17/2008 there was an error w/ marks v2 and the slider in IE 6/7
  	// clearing the mousemove event for document fixed it
		this.timers = [];
		
		this.iePatch = function() {
    	this.setObservations = function(element) {
        Event.observe(element, 'mouseover', function(e) {
          Event.stopObserving(document, "mousemove", this.slider1.eventMouseMove);
          this.cancelTimer(element.id.match(/\d+/));
        }.bind(this));

        Event.observe(element, 'mouseout', function(e) {
          this.createTimer(element.id.match(/\d+/));
        }.bind(this));
      },

      this.cancelTimer = function(id) {
        if (this.timers[id]) {
          clearTimeout(this.timers[id]);
          this.timers[id] = null;
        }
      },

      this.createTimer = function(id) {
        this.timers[id] = setTimeout(function(e) {
          Event.observe(document, "mousemove", this.slider1.eventMouseMove);
        }.bind(this), 500);
      }
    	
      $$('.mark').each(function(element) {
        this.setObservations(element);
      }.bind(this));

      $$('.mark-toggle').each(function(element) {
        this.setObservations(element);
      }.bind(this));
    }
    
    Event.observe(window, 'load', this.iePatch.bindAsEventListener(this));
		// ie patch for marks
		////////////////////////////////////////////////////////////////////////////
	} // constructor
}

Ascribe.Gallery.prototype = {
	loadImage: function(largePhotoSrc, xlargePhotoSrc) {      
	  if (this.currentLargeImageSrc == largePhotoSrc) {
			return false;
		}

		this.loadingInProgress = true;
		
		$(this.loadingID).style.visibility = 'visible';
		
		new Effect.Morph(this.largeImageContainerID, {
	    style: this.effectMorphBackgroundColor,
	    duration: 0.2
	  });

	  new Effect.Opacity(this.largeImageID, {
	    from: 1,
	    to: .5,
	    duration: .2
	  });

		$(this.largeImageID).src = largePhotoSrc; 
		$(this.largeImageContainerID).href = xlargePhotoSrc;
		this.currentLargeImageSrc = largePhotoSrc;
	},
	
	fadeImage: function(event) {
	  this.loadingInProgress = false;
	  
		$(this.loadingID).style.visibility = 'hidden';
		
	  new Effect.Morph(this.largeImageContainerID, {
	    style: 'background: none;',
	    duration: 0.2
	  });

	  new Effect.Opacity(this.largeImageID, {
	    from: 0,
	    to: 1.0,
	    duration: .5
	  });
	},

	show_view_full_size: function() {
	  if (this.loadingInProgress == false) {
  	  $(this.viewFullSizeID).style.visibility = 'visible';
    }
	},

	hide_view_full_size: function() {
	  $(this.viewFullSizeID).style.visibility = 'hidden';
	},
	
	scrollHorizontal: function(value, element, slider) {
  	element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
} // Ascribe.Gallery.prototype
