if(!MIO)
    var MIO={};

/**
 * Generate a random integer in range [low,high)
 * If high is omitted range is [0,low)
 **/
if(!MIO.random)
    MIO.random = function(low,high)
    {
        if(!high)
            return Math.floor(Math.random()*low)
        else
            return Math.floor(Math.random()*(high-low+1))+low;
    };


if(!MIO.Gallery)    
    MIO.Gallery = {};
    
/**
 * an object to store attributes needed for the gallery
 **/
MIO.Gallery.Picture = function(src,thumbnail,caption,title)
{
    this.src = src;
    this.thumbnail = thumbnail;
    this.caption=caption;
    this.title=title;
};
    
// an array of Picture objects to display
// the images and captions
MIO.Gallery.pictures = [
    new MIO.Gallery.Picture("images/screenshots/emergeo.jpg","images/screenshots/emergeo-small.jpg",
        "Map It Out has written emergency mapping and situational awareness software for EmerGeo",
        "EmerGeo - Emergency Management"
    ),
    

    new MIO.Gallery.Picture("images/screenshots/cier-mobile.jpg","images/screenshots/cier-mobile-small.jpg",
        "Using mobile applications written by Map It Out waste and fuel storage site information collected by CIER can be modified directly from within ArcPad" ,
        "CIER Mobile Data Collection"
    ),

    new MIO.Gallery.Picture( "images/screenshots/cier.jpg","images/screenshots/cier-small.jpg",
        "Map It Out has written web-based administration tools for CIER's ongoing assessment of waste and fuel storage sites in Ontario",
        "CIER - Web Data Management"
    ),

    new MIO.Gallery.Picture("images/screenshots/apos.jpg","images/screenshots/apos-small.jpg",
        "Map It Out provides ongoing support for APOS' ArcGIS integration",
        "APOS - Business Intelligence"
    ),

    new MIO.Gallery.Picture("images/screenshots/travelmb.jpg","images/screenshots/travelmb-small.jpg",
        "Manitoba travel and tourist information website",
        "Government of Manitoba - Tourism"
    ),
    
    new MIO.Gallery.Picture("images/screenshots/forestry.jpg","images/screenshots/forestry-small.jpg",
        "The Forest Area Volume desktop application lets users define stands of forest and generate reports",
        "Timberline - Environmental Services"
    ),

    new MIO.Gallery.Picture("images/screenshots/cp.jpg","images/screenshots/cp-small.jpg",
        "The Canadian Press uses a .NET map control created by Map It Out to record the locations of their stories",
        "Canadian Press - Geocoding"
    ),

    new MIO.Gallery.Picture("images/screenshots/hospital.jpg","images/screenshots/hospital-small.jpg",
        "A hospital resource tracking system implemented with ArcGIS and Adobe Flex",
        "Hospital Resource Tracking System"
    ),

    new MIO.Gallery.Picture("images/screenshots/contour.jpg","images/screenshots/contour-small.jpg",
        "Manitoba Hydro uses an ArcEngine application written by Map It Out to integrate field data into their data sets",
        "Manitoba Hydro - Rapid Capture"
    ),

    new MIO.Gallery.Picture("images/screenshots/parkres.jpg","images/screenshots/parkres-small.jpg",
        "Manitoba Provincial Park campground booking system",
        "Manitoba Parks - Reservations"
    ),
    
    new MIO.Gallery.Picture("images/screenshots/greenmap.jpg","images/screenshots/greenmap-small.jpg",
        "A public map of green initiatives in the city of Winnipeg<br/>The full site can be seen <a href='http://greenmap.mbeconetwork.org'>here</a>", 
        "City of Winnipeg - Green Map"
    ),

    new MIO.Gallery.Picture("images/screenshots/tools.jpg","images/screenshots/tools-small.jpg",
        "The ArcGIS Server Tools offer several methods of viewing and using map data <br/>The tools are available for free on our <a href='products.html'>products page</a>",
        "Free ArcGIS Server Tools"
    )
];

// the number of images in the gallery
MIO.Gallery.numImages = MIO.Gallery.pictures.length;

// the index of the currently-displayed image
MIO.Gallery.currentIndex = 0;

// the link that gets clicked on to open the full view
MIO.Gallery.screenshotLink = null;

// the image displayed in the link
MIO.Gallery.screenshotPreview = null;

// the caption for the thumbnail
MIO.Gallery.screenshotCaption = null;



/**
 * initialize the gallery
 * - set up the html element attributes (href/rel/src/alt/title/etc...)
 * - start the auto-cycling
 * - load a random first image
 **/
MIO.Gallery.init = function()
{
    // shuffle the image order
    //MIO.Gallery.shuffle();
    
    // get the elements we need to edit
    MIO.Gallery.screenshotLink = document.getElementById('gallery-link');
    MIO.Gallery.screenshotPreview = document.getElementById('gallery-thumbnail');
    MIO.Gallery.screenshotCaption = document.getElementById('gallery-caption');
    
    // set the preview to a loading gif just in case this takes a while
    MIO.Gallery.screenshotPreview.setAttribute('src','images/screenshots/loading.gif');
    
    // set the link to use Lightbox
    MIO.Gallery.screenshotLink.setAttribute('rel','lightbox[mapitout]');
    
    // create n-1 <a> tags (one for each image not currently shown
    
    //start the auto-cycle
    MIO.Gallery.playPause();
    MIO.Gallery.setOpacity(MIO.Gallery.screenshotPreview,0);
    MIO.Gallery.fadein(0);
    
    // set a random first image
    MIO.Gallery.random();
};

/**
 * shuffle the order of the images in the gallery
 * (this is really pretty useless as far as functionality goes
 * but it keeps the images in the gallery "fresh" -- especially
 * if it ever gets to the point where we have LOTS of images)
 **/
MIO.Gallery.shuffle = function()
{
    var rnd;
    var tmp;
    
    // walk through the list swapping each element with a random index
    // (this is your standard O(n) shuffle)
    for(var i=0; i<MIO.Gallery.pictures.length-1; i++)
    {
        rnd = MIO.random(i,MIO.Gallery.pictures.length-1);
        tmp = MIO.Gallery.pictures[i];
        MIO.Gallery.pictures[i] = MIO.Gallery.pictures[rnd];
        MIO.Gallery.pictures[rnd] = tmp;
    }
};

/**
 * display a particular image
 **/
MIO.Gallery.setImage = function(index)
{
    // set the loading image in case this takes a while
    MIO.Gallery.screenshotPreview.setAttribute('src','images/screenshots/loading.gif');
    
    // to prevent getting a duplicate image in the gallery change our "hidden" member
    // to a temp gallery (that will contain only itself
    //MIO.Gallery.gallery[index].setAttribute('rel','lightbox[tmp]');
    //MIO.Gallery.gallery[MIO.Gallery.currentIndex].setAttribute('rel','lightbox[mio]');  //reset the last-selected image
    
    
    // update the link to the gallery with the new image & caption
    MIO.Gallery.screenshotLink.setAttribute('href',MIO.Gallery.pictures[index].src);
    MIO.Gallery.screenshotLink.setAttribute('title',MIO.Gallery.pictures[index].caption);
    
    // update the thumbnail and mini-caption
    MIO.Gallery.screenshotCaption.innerHTML = MIO.Gallery.pictures[index].title;
    MIO.Gallery.screenshotPreview.setAttribute('src',MIO.Gallery.pictures[index].thumbnail);
    MIO.Gallery.screenshotPreview.setAttribute('title',MIO.Gallery.pictures[index].title);
    
    // change the selected image index
    MIO.Gallery.currentIndex = index;
    
    // toggle the pause to reset the timer
    MIO.Gallery.playPause();
    MIO.Gallery.playPause();
};

/**
 * display the next image in the sequence
 **/
MIO.Gallery.next = function()
{
    var i=MIO.Gallery.currentIndex+1;
    if(i>=MIO.Gallery.numImages)
        i=0;
        
    MIO.Gallery.setImage(i);
};

/**
 * display the previous image in the sequence
 **/
MIO.Gallery.prev = function()
{
    var i = MIO.Gallery.currentIndex-1;
    if(i<0)
        i=MIO.Gallery.numImages-1;
        
    MIO.Gallery.setImage(i);
};

/**
 * display a random image
 **/
MIO.Gallery.random = function()
{
    MIO.Gallery.setImage(MIO.random(MIO.Gallery.numImages));
};

/**
 * toggle the auto-cycling state of the gallery
 * 
 * an argument can be used to explicitely set the plaing state
 **/
MIO.Gallery.playPause = function(playing)
{
    var button = document.getElementById('gallery-playpause');
    
    if(playing!=undefined && playing!=null)
    {
        MIO.Gallery.playing = !playing;
    }
    
    if(MIO.Gallery.playing)
    {
        // stop the interval
        clearInterval(MIO.Gallery.interval);
        MIO.Gallery.playing = false;
        
        // change the button to "play"
        button.setAttribute('src','images/play.gif');
        button.setAttribute('alt','Play');
    }
    else
    {
        // start the interval
        MIO.Gallery.interval = setInterval("MIO.Gallery.autoCycle('fadeout')",7000);
        MIO.Gallery.playing = true;
        
        // set the button to "pause"
        button.setAttribute('src','images/pause.gif');
        button.setAttribute('alt','Pause');
    }
};

/**
 * Automatically shuffle through the images
 * This is called via document.setInterval
 * 
 * The old image fades out, the new one is set, and then it fades in
 **/
MIO.Gallery.autoCycle = function(action)
{
    // assume that no explicit action means we're starting at the beginning
    if(!action)
    {
        action = 'fadeout';
    }
    
    switch(action)
    {
        case 'fadeout':
            MIO.Gallery.fadeout(100);
            break;
        
        case 'fadein':
            MIO.Gallery.fadein(0);
            break;
        
        case 'change':
            MIO.Gallery.next();
            MIO.Gallery.autoCycle('fadein');
            break;
    }
};

/**
 * fade the gallery image in
 * The argument should be the CURRENT opacity
 * (i.e. fadeout(100) means "fade out from 100% to zero")
 * 
 * original source:
 * http://clagnut.com/sandbox/imagefades/
 **/
MIO.Gallery.fadeout = function(opacity)
{
    if (MIO.Gallery.screenshotPreview)
    {
        if (opacity >0)
        {
            MIO.Gallery.setOpacity(MIO.Gallery.screenshotPreview, opacity);
            //MIO.Gallery.setOpacity(MIO.Gallery.screenshotPreview.parentNode.parentNode, opacity);
            opacity -= 5;
            window.setTimeout("MIO.Gallery.fadeout("+opacity+")", 33);
        }
        else
            MIO.Gallery.autoCycle('change');
    }
};

/**
 * fade the gallery image out
 * The argument should be the CURRENT opacity
 * (i.e. fadein(0) means "fade in from 0% to full")
 * 
 * original source:
 * http://clagnut.com/sandbox/imagefades/
 **/
MIO.Gallery.fadein = function(opacity)
{
    if (MIO.Gallery.screenshotPreview)
    {
        if (opacity <= 100)
        {
            MIO.Gallery.setOpacity(MIO.Gallery.screenshotPreview, opacity);
            //MIO.Gallery.setOpacity(MIO.Gallery.screenshotPreview.parentNode.parentNode, opacity);
            opacity += 5;
            window.setTimeout("MIO.Gallery.fadein("+opacity+")", 33);
        }
    }
};

/**
 * set the opacity of an object
 * This sets multiple properties to account for browser stupidity
 * 
 * original source:
 * http://clagnut.com/sandbox/imagefades/
 **/
MIO.Gallery.setOpacity = function(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win (<IE8)
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox/Mozilla, Opera, CSS3
  obj.style.opacity = opacity/100;
}