/* Usage
*
* Include a div element in your page with the class 'gallery' and a 'title' attribute with the url of
* your json data. Any number of div elements with class 'gallery' can be on one page.
*
* Dependencies
*
* Requires MooTools.js MOOdalBox.js mootools.css and loadingLg.gif
*
*/

var thumbNail = new Class ({
    
    options: {
        container: false //the user must pass in a container id or DOM element
    },
    
    initialize: function (options, image){ //image is a json object passed at instantiation
        this.options = $merge(image, options); // merge passed object for easier access ie this.options.title returned passed title
        this.setOptions(options);
        this.container = this.options.container;
        this.build();
    },
        
    
    
    build: function(){
	this.thumb = new Element('div', {'class': 'thumbNail'})
        .addEvent('click', this.moodalBox.bind(this));
        this.imageFrame = new Element('div', {'class': 'thumbFrame'}).injectInside(this.thumb);
        this.loadImg = new Element('img', {'alt': 'Loading...', 'src': '/library/js/img/loadingLg.gif'}).injectInside(this.imageFrame);
        this.title = new Element('h3').setHTML(this.options.title).injectAfter(this.loadImg);
	this.thumb.inject($(this.container));
        // Start loading image
        this.preload(this);
    },

    moodalBox: function  (){
        this.imageSrc = this.options.largeImg;
		this.width = this.options.width + 2;
		this.height = this.options.height + 2;
		this.size = this.width  + " " + this.height;
        MOOdalBox.open( // case matters
        this.imageSrc, // the link URL
        this.options.description, // the caption (link's title) - can be blank
        this.size // width and height of the box - can be left blank
        );
    },
    preload: function(obj){
        this.image = new Asset.images([this.options.thumbData],{
            'id': this.options.pid,
            'alt': this.options.description,
            onComplete: function(){
                obj.swapImage(obj);
                }
        });
    },
    
    swapImage: function(obj) {
        
         //preload image
        this.image.each(function(img){
            obj.doChain(img);
            
        });  
    },
    
    doChain: function(image){
        image.setStyle('opacity',0);
        image.setProperty('alt', this.options.description);
        var loadImage = this.loadImg; // set this variable so replace can access it
        var frame = this.imageFrame;
        var loadImageFx = new Fx.Style(loadImage, 'opacity');
        var replaceFx = new Fx.Style(image, 'opacity');
        // Create style object for fadeOutIn
        var preloadChain = new Chain(); // create chain object
        preloadChain.chain(function(){ // populate chain with events
                loadImageFx.start(1,0);
                }).chain(function(){
                $(loadImage).replaceWith($(image));// do replace with actual image
                }).chain(function(){    // fade new image in
                replaceFx.start(0,1);
                })
        var runChain = function() {   // run the chain
		preloadChain.callChain();
		if (preloadChain.chains.length == 0) {
                        runChain = $clear(timer);
                        } 
	}
        var timer = runChain.periodical(500); // set chain timer
        
    }
});
thumbNail.implement(new Options, new Events);
// end thumbnail class
//begin gallery class



var gallery = new Class({
        
        options: {
                galData: false, //the user can pass in an array of urls
                container: false //the user must pass in a container id or DOM element
        },
        
        initialize: function(options){
                this.setOptions(options)
                this.galData = this.options.galData;
                this.container = this.options.container;
                this.build(this.container);
        },
        
        build: function(container) {
        var url = this.galData;
	var request = new Json.Remote(url, {
                method: 'get',
		onComplete: function(jsonObj) {
                        this.preLoad(jsonObj, container);
                        }.bind(this)
                }).send();      
        },
        
        preLoad: function(obj, container){
        var images = obj.thumbNails;
        var myChain = new Chain();
	images.each(function(image) {
                myChain.chain( function(){
                        newThumb = new thumbNail({
                                container: container
                                },image);
                        });
                });
	var runChain = function() { 
		myChain.callChain();
		if (myChain.chains.length == 0) {
                        runChain = $clear(timer);
                        }
                        }
        var timer = runChain.periodical(1000);
        },
        
        addImage: function(image) {
        newThumb = new thumbNail({
                container: this.container
                },
                image);
        }
});
gallery.implement(new Options, new Events);
// end gallery class

window.addEvent('domready', function(){
        
function makeGallery(){
        var galElement = $$('div [class=gallery]');
        galElement.each(function(galElement,index) {
                galElement.setProperty('id', 'gallery' + index);
                var newGallery = new gallery ({
                        galData: galElement.getProperty('title'),
                        container: 'gallery' + index
                })
    })
        galElement.removeProperty('title');
}
makeGallery();
});