function displaymessage(txt)
{
	alert(txt);
}

// written by chris kelley, october 07
// for use with mootools framework.

// ScreenshotButtons has no parameters- it will search the page
// for all screenshot images and convert them, whereas the ImageFader
// and ImageScroller classes require the parent element to work with.
// this is simply because the latter two have the option for more customization
// with each instance

var ScreenshotButtons = new Class ({
  
  initialize: function ()
  {
    
    // for each image with the class "screenshot",
    // add the "show screenshot" button and hide the image.
    // also, add js effects
   
    $$('img.screenshot').each (function(screenshot, index)
    {
       
      // create elements
      var image = $(screenshot);
      var outer = new Element ('div', {'class': 'screenshotfg-container'});
      var button = new Element ('img',{
        'class': 'screenshot-button',
        'src': '/images/stories/' + (screenshot.getAttribute('id') != "" ? screenshot.getAttribute('id') : 'see_screenshot250') + '.png',
        'border': 0
      });
      
      button.setStyle ('cursor','pointer');

      // put div before image, move image and button into div
      outer.injectBefore (image);
      button.injectInside (outer);
      image.injectInside (outer);

      var slide = new Fx.Slide (image, {duration: 750});
      var opacity = new Fx.Style (image, 'opacity');
      opacity.none = true;

      // hide screenshot initially
      slide.hide();
      
      // onclick function event
    	button.addEvent ('click', function (e)
    	{
    		slide.toggle();

    		if (opacity.none) opacity.start(0,1);
    		else if (!opacity.none) opacity.start(1,0);
    		opacity.none = !opacity.none;
    	});
    });

  }
});



// ImageFader class. very simple. give it a div full of images and it will
// rotate them in order fading in and out.

// usage: var imgfdr = new ImageFader ('mydiv');
// where mydiv holds a few image tags.

var ImageFader = new Class({
  options: {
    speed: 500,
    delay: 1000,
    transitionType: Fx.Transitions.Quart.easeInOut
  },
  
  initialize: function (div, opts)
  {
   	if(typeof opts != "undefined") {
		for(p in opts) {
			this.options[p] = opts[p];
		}
	}
	
    this.images = $ES('img',$(div));
  
    this.current = 0;
    this.total = 0;

    // set all images to have default props, add fx fade object
    for (var i = 0; i < this.images.length; i++, this.total++)
    {
      this.images[i] = $(this.images[i]);
      this.images[i].fade = new Fx.Style (this.images[i], 'opacity',{duration: this.options.speed, transition: this.options.transitionType});
      this.images[i].fade.hide();
    }
  
    if (this.total > 0) {
      // fade in first image and set periodical
      this.images[this.current++].fade.start(0,1);
      this._swapImages.periodical (this.options.delay, this);
    }
    
  },
  
  _swapImages: function ()
  {
    
    var last = this.current - 1;
    // swap out old image, then fade in new
    this.images[last].fade.start(1,0);
    
    // ambiguous function in parens allows the use of the delay()
    // function, giving previous image enough time to fade out before this one fades in
    var t = this;
    (function () {
      
      if (t.current == t.total) t.current = 0;
      
      t.images[last].setStyle ('display','none');
      
      t.images[t.current].setStyle ('display','');
      t.images[t.current].fade.start(0,1);
      
      this.current++;
      
    }).delay (t.speed + 1,t);

  }
});



// for more info on this and a demo, check here:
// http://demos.mootools.net/Fx.Scroll

var ImageScroller = new Class ({
  initialize: function (div)
  {
    this.labels = [];
    this.menu = [];
    this.container = $(div);
    
    // make sure that the container has proper styles
    this.container.setStyles ({
      overflow: 'hidden',
      border: '1px solid #ddd',
      position: 'relative',
      margin: '5px'
    });
    
    // first, wrap a div around img tag, make 
    // img background of div, and remove the img tag
    var img = $E('img', this.container);
    var imgdiv = new Element ('div',{'class': 'imgcontainer'});
    imgdiv.setStyles(
      'background-image: url('+img.src+');'+
      'background-position: top left;'+
      'width: '+img.width+'px;' +
      'height: '+img.height+'px;' +
      'position: relative;'
    ); 
    imgdiv.injectTop (this.container);
    
    // add a spot for the labels menu
    var menu = new Element ('ul', {
      'class': 'imagescroller-menu'
    });
    menu.injectBefore (this.container)
    new Element ('br',{'styles':{'clear':'both'}}).injectAfter(menu);
    
    // set up scrolling for the container
    var scroll = new Fx.Scroll(this.container, {
    	wait: false,
    	duration: 2500,
    	offset: {'x': -50, 'y': -50},
    	transition: Fx.Transitions.Cubic.easeInOut
    });
    
    // get labels, style and place them
    var t = this;
    var labels = $$('div.labels div', this.container);
    labels.pop();
     
    labels.each (function (label, index)
    {
      // make sure the labels have proper styles

      var li = new Element ('li');
    
      // add html link to the menu
      var ln = new Element ('a', {
        'href': '#',
        'class': 'imagescroller-menu-link',
        'events': {
          'click': function (event)
          {
            event = new Event(event).stop();
            scroll.toElement(label);
          }
        }
      });
  
    ln.setText (label.getText());
    ln.injectInside (li);
    li.injectInside (menu);
    
    });

    // move labels to imgdiv, remove unused elements
    $ES('div.labels div', this.container).injectInside (imgdiv);
    $E('div.labels', this.container).remove ();
    $E('img', this.container).remove ();
  }
});