/*
 * Galleria v 1.2 prerelease 1.0 2010-10-20
 * http://galleria.aino.se
 *
 * Copyright (c) 2010, Aino
 * Licensed under the MIT license.
 */

(function($) {

 // some references
var undef,
    window = this,
    doc    = document,
    $doc   = $( doc );
    
// internal constants
var DEBUG = false,
    NAV   = navigator.userAgent.toLowerCase(),
    HASH  = window.location.hash.replace(/#\//,''),
    CLICK = function() {
        // use this to make mobile devices snappier
        return Galleria.MOBILE ? 'touchstart' : 'click';
    },
    IE    = (function(){
        var v = 3, 
            div = doc.createElement( 'div' );
        while (
            div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
            div.getElementsByTagName('i')[0]
        );
        return v > 4 ? v : undef;
    }() ),
    DOM   = function() {
        return {
            html:  doc.documentElement,
            body:  doc.body,
            head:  doc.getElementsByTagName('head')[0],
            title: doc.title
        }
    },
    
    // Debug TOOLS
    
    // log wrapper
    log = function() {
        try { 
            window.console.log.apply( window.console, Utils.array(arguments) ); 
        } catch( e ) {
            try {
                opera.postError.apply( opera, arguments ); 
            } catch( er ) { 
                  trace( arguments ); 
            } 
        }
    },
    
    // raise errors
    raise = function( msg, force ) {
        if ( DEBUG || force ) {
            throw new Error( msg );
        }
    },
    
    // cross-browser tracer
    _tracer = {
        
        ts : new Date().getTime(),
        
        initialized : false,
        
        open: true,
        
        init : function() {
            this.initialized = true;
            this.elem = $('<div id="log">').css({
                background: '#fff', opacity: .8, padding: '20px', width: 300, height: '80%',
                position: 'fixed', top:10, left:10, zIndex: 100000,
                color:'#000', overflow:'auto', font: '11px/1.2 arial,sans-serif'
            }).click(function() {
                $(this).css({
                    height: _tracer.open ? 0 : '80%',
                    opacity: _tracer.open ? .1 : .8
                });
                _tracer.open = !_tracer.open;
            }).appendTo( DOM().body );
        
        },
        
        log: function( msg ) {
            
            if ( !this.initialized ) {
                this.init();
            }

            var now = ( new Date().getTime() - _tracer.ts );
            _tracer.elem.html( 
                _tracer.elem.html() + now.toString() + ' ms: <strong>' + msg + '</strong><br>'
            );
            
            // keep scroll in bottom
            _tracer.elem[0].scrollTop = _tracer.elem[0].scrollHeight;
        }
    },
    
    trace = function() {
        $.each( Utils.array( arguments ), function(i, msg) {
            _tracer.log.call( _tracer, msg );
        })
    },
    
    // the internal timeouts object
    // provides helper methods for controlling timeouts
    _timeouts = {
        
        trunk: {},
        
        add: function( id, fn, delay, loop ) {
            loop = loop || false;
            this.clear( id );
            if ( loop ) {
                var old = fn;
                fn = function() {
                    old();
                    _timeouts.add( id, fn, delay );
                }
            }
            this.trunk[ id ] = window.setTimeout( fn, delay );
        },
        
        clear: function( id ) {
            
            var del = function( i ) {
                window.clearTimeout( this.trunk[ i ] );
                delete this.trunk[ i ];
            }
            
            if ( !!id && id in this.trunk ) {
                del.call( _timeouts, id );
                
            } else if ( typeof id == 'undefined' ) {
                for ( var i in this.trunk ) {
                    del.call( _timeouts, i );
                }
            }
        }
    },
    
    
    // the Utils singleton
    Utils = (function() {
    
        return {
        
            array : function( obj ) {
                return Array.prototype.slice.call(obj);
            },
        
            create : function( className, nodeName ) {
                nodeName = nodeName || 'div';
                var elem = doc.createElement( nodeName );
                elem.className = className;
                return elem;
            },
        
            forceStyles : function( elem, styles ) {
                elem = $(elem);
                if ( elem.attr( 'style' ) ) {
                    elem.data( 'styles', elem.attr( 'style' ) ).removeAttr( 'style' );
                }
                elem.css( styles );
            },
        
            revertStyles : function() {
                $.each( Utils.array( arguments ), function( i, elem ) {
                    
                    elem = $( elem ).removeAttr( 'style' );
                    
                    if ( elem.data( 'styles' ) ) {
                        elem.attr( 'style', elem.data('styles') ).data( 'styles', null );
                    }
                });
            },
        
            moveOut : function( elem ) {
                Utils.forceStyles( elem, {
                    position: 'absolute',
                    left: -10000
                })
            },
        
            moveIn : function() {
                Utils.revertStyles.apply( Utils, Utils.array( arguments ) );
            },
        
            hide : function( elem, speed, callback ) {
                elem = $(elem);
                
                // save the value if not exist
                if (! elem.data('opacity') ) {
                    elem.data('opacity', elem.css('opacity') );
                }
                
                // always hide
                var style = { opacity: 0 };
            
                if (speed) {
                    elem.stop().animate( style, speed, callback );
                } else {
                    elem.css( style );
                };
            },
        
            show : function( elem, speed, callback ) {
                elem = $(elem);
                
                // bring back saved opacity
                var saved = parseFloat( elem.data('opacity') ) || 1,
                    style = { opacity: saved };
                
                // reset save if opacity == 1
                if (saved == 1) {
                    elem.data('opacity', null);
                }
                
                // animate or toggle
                if (speed) {
                    elem.stop().animate( style, speed, callback );
                } else {
                    elem.css( style );
                };
            },
        
            addTimer: function() {
                _timeouts.add.apply( _timeouts, Utils.array( arguments ) );
                return this;
            },

            clearTimer: function() {
                _timeouts.clear.apply( _timeouts, Utils.array( arguments ) );
                return this;
            },
        
            wait : function(options) {
                options = $.extend({
                    until : function() { return false; },
                    success : function() {},
                    error : function() { raise('Could not complete wait function.'); },
                    timeout: 3000
                }, options);
            
                var start = Utils.timestamp(),
                    elapsed,
                    now;
            
                window.setTimeout(function() {
                    now = Utils.timestamp();
                    elapsed = now - start;
                    if ( options.until( elapsed ) ) {
                        options.success();
                        return false;
                    }
                    
                    if (now >= start + options.timeout) {
                        options.error();
                        return false;
                    }
                    window.setTimeout(arguments.callee, 2);
                }, 2);
            },
        
            toggleQuality : function( img, force ) {
                
                if ( !( IE == 7 || IE == 8 ) || !!img === false ) {
                    return;
                }
            
                if ( typeof force === 'undefined' ) {
                    force = img.style.msInterpolationMode == 'nearest-neighbor';
                }
            
                img.style.msInterpolationMode = force ? 'bicubic' : 'nearest-neighbor';
            },
            
            insertStyleTag : function( styles ) {
                var style = doc.createElement( 'style' );
                DOM().head.appendChild( style );
                
                if ( style.styleSheet ) { // IE
                    style.styleSheet.cssText = styles;
                } else {
                    var cssText = doc.createTextNode( styles );
                    style.appendChild( cssText );
                }
            },
            
            // a loadscript method that works for local scripts
            loadScript: function( url, callback ) {
                var done = false, 
                    script = $('<scr'+'ipt>').attr({
                        src: url,
                        async: true
                    }).get(0);

               // Attach handlers for all browsers
               script.onload = script.onreadystatechange = function() {
                   if ( !done && (!this.readyState ||
                       this.readyState == "loaded" || this.readyState == "complete") ) {
                       done = true;

                       if (typeof callback == 'function') {
                           callback.call( this, this );
                       }

                       // Handle memory leak in IE
                       script.onload = script.onreadystatechange = null;
                   }
               };
           
           
               var s = doc.getElementsByTagName( 'script' )[0];
               s.parentNode.insertBefore( script, s );
            },
        
            // parse anything into a number
            parseValue: function( val ) {
                if (typeof val == 'number') {
                    return val;
                } else if (typeof val == 'string') {
                    var arr = val.match(/\-?\d/g);
                    return arr && arr.constructor == Array ? arr.join('')*1 : 0;
                } else {
                    return 0;
                }
            },
        
            // timestamp abstraction
            timestamp: function() {
                return new Date().getTime();
            },

            // this is pretty crap, but works for now
            // it will add a callback, but it can't guarantee that the styles can be fetched using getComputedStyle
            // further checking needed, possibly a dummy element
            loadCSS : function( href, id, callback ) {

                var link,
                    ready = false,
                    length;
                    
                // look for manual css
                $('link[rel=stylesheet]').each(function() {
                    if ( new RegExp( href ).test( this.href ) ) {
                        log(this)
                        link = this;
                        return false;
                    }
                });
                
                if ( typeof id == 'function' ) {
                    callback = id;
                    id = undef;
                }
                
                callback = callback || function(){}; // dirty
                
                // if already present, return
                if ( link ) {
                    callback.call( link, link );
                    return link;
                }
                
                // save the length of stylesheets to check against
                length = doc.styleSheets.length;
                
                // add timestamp if DEBUG is true
                if ( DEBUG ) {
                    href += '?' + Utils.timestamp();
                }
                
                // check for existing id
                if( $('#'+id).length ) {
                    $('#'+id).attr('href', href);
                    length--;
                    ready = true;
                } else {
                    link = $( '<link>' ).attr({
                        rel: 'stylesheet',
                        href: href,
                        id: id
                    }).get(0);
                    
                    window.setTimeout(function() {
                        var styles = $('link[rel="stylesheet"],style');
                        if ( styles.length ) {
                            styles.get(0).parentNode.insertBefore( link, styles[0] );
                        } else {
                            DOM().head.appendChild( link );
                        }
                        
                        if ( IE ) {
                            link.attachEvent( 'onreadystatechange', function(e) {
                                if( link.readyState == 'complete' ) {
                                    ready = true;
                                }
                            })
                        } else {
                            // what to do here? returning for now.
                            ready = true;
                        }
                    }, 10);
                }
                
                if (typeof callback == 'function') {
                    
                    Utils.wait({
                        until: function() {
                            return ready && doc.styleSheets.length > length
                        },
                        success: function() {
                            Utils.addTimer( 'css', function() {
                                callback.call( link, link );
                            }, 100);
                        },
                        error: function() {
                            raise( 'Theme CSS could not load' );
                        },
                        timeout: 1000
                    });
                }
                return link;
            }
        };
    })();


// The private Picture class
// Adds preload, cache and scale functionality
var Picture = function( id ) {
    
        // save the id
        this.id = id || null;
    
        // the image should be null until loaded
        this.image = null;
    
        // Create a new container
        this.container = Utils.create('galleria-image');
    
        // add container styles
        $( this.container ).css({
            overflow: 'hidden',
            position: 'relative' // for IE Standards mode
        });
    
        // saves the original meassurements
        this.original = {
            width: 0,
            height: 0
        };
    
        // flag when the image is ready
        this.ready = false;
        
        // flag when the image is loaded
        this.loaded = false;
        
    };

Picture.prototype = {
    
    // the inherited cache object
    cache: {},
    
    // creates a new image and adds it to cache when loaded
    add: function( src ) {
        
        var self = this;

        // create the image
        var image = new Image();
        
        // force a block display
        $( image ).css( 'display', 'block');
        
        if ( self.cache[ src ] ) {
            // no need to onload if the image is cached
            image.src = src;
            self.loaded = true;
            self.original = {
                height: image.height,
                width: image.width
            };
            return image;
        }

        // begin preload and insert in cache when done
        image.onload = function() {
            self.original = {
                height: this.height,
                width: this.width
            };
            self.cache[ src ] = src; // will override old cache
            self.loaded = true;
        }
        
        image.src = src;
        return image;
        
    },
    
    // show the image on stage
    show: function() {
        Utils.show( this.image );
    },
    
    // hide the image
    hide: function() {
        Utils.moveOut( this.image );
    },
    
    clear: function() {
        this.image = null;
    },
    
    // checks if the image is cached
    isCached: function(src) {
        return !!this.cache[src];
    },
    
    // the load function
    // returns the jquery container object
    load: function(src, callback) {
        
        // save the instance
        var self = this;

        $( this.container ).empty(true);
        
        // add the image to cache and hide it
        this.image = this.add( src );
        Utils.hide( this.image );
        
        // append the image into the container
        $( this.container ).append( this.image );
        
        // check for loaded image using a timeout
        Utils.wait({
            until: function() {
                // TODO this should be properly tested in Opera
                return self.loaded && self.image.complete && self.image.width;
            },
            success: function() {
                // call success
                window.setTimeout(function() { callback.call( self, self ) }, 1 );
            },
            error: function() {
                callback.call( self, self );
                Galleria.raise('image not loaded in 5 seconds: '+ src);
            },
            timeout: 5000
        });
        
        // return the container
        return this.container;
    },
    
    // scales the image into it's container
    scale: function(options) {
        
        // extend some defaults
        options = $.extend({
            width: 0,
            height: 0,
            min: undef,
            max: undef,
            margin: 0,
            complete: function(){},
            position: 'center',
            crop: false
        }, options);
        
        // return the element if no image found
        if (!this.image) {
            return this.container;
        }
        
        // store locale variables of width & height
        var width,
            height,
            self = this,
            $container = $( self.container );
        
        // wait for the width/height
        Utils.wait({
            until: function() {
                
                width  = options.width
                    || $container.width()
                    || Utils.parseValue( $container.css('width') );
                    
                height = options.height
                    || $container.height()
                    || Utils.parseValue( $container.css('height') );

                return width && height;
            },
            success: function() {
                // calculate some cropping
                var newWidth = ( width - options.margin*2 ) / self.original.width,
                    newHeight = ( height- options.margin*2 ) / self.original.height,
                    cropMap = {
                        'true'  : Math.max( newWidth, newHeight ),
                        'width' : newWidth,
                        'height': newHeight,
                        'false' : Math.min( newWidth, newHeight )
                    },
                    ratio = cropMap[ options.crop.toString() ];

                // allow max_scale_ratio
                if ( options.max ) {
                    ratio = Math.min( options.max, ratio );
                }
                
                // allow min_scale_ratio
                if ( options.min ) {
                    ratio = Math.max( options.min, ratio );
                }
                
                $( self.container ).width( width ).height( height );
                
                // round up the width / height
                $.each( ['width','height'], function( i, m ) {
                    $( self.image )[ m ]( self[ m ] = Math.ceil( self.original[ m ] * ratio ) );
                });
                
                // calculate image_position
                var pos = {},
                    mix = {},
                    getPosition = function(value, meassure, margin) {
                        var result = 0;
                        if (/\%/.test(value)) {
                            var flt = parseInt(value) / 100;
                            result = Math.ceil( $( self.image )[ meassure ]() * -1 * flt + margin * flt );
                        } else {
                            result = Utils.parseValue( value );
                        }
                        return result;
                    },
                    positionMap = {
                        'top': { top: 0 },
                        'left': { left: 0 },
                        'right': { left: '100%' },
                        'bottom': { top: '100%' }
                    };
                
                $.each( options.position.toLowerCase().split(' '), function( i, value ) {
                    if ( value == 'center' ) {
                        value = '50%';
                    }
                    pos[i ? 'top' : 'left'] = value;
                });
                
                $.each( pos, function( i, value ) {
                    if ( positionMap.hasOwnProperty( value ) ) {
                        $.extend( mix, positionMap[ value ] );
                    }
                });
                
                pos = pos.top ? $.extend( pos, mix ) : mix;
            
                pos = $.extend({
                    top: '50%',
                    left: '50%'
                }, pos);
                
                // apply position
                $( self.image ).css({
                    position : 'relative',
                    top :  getPosition(pos.top, 'height', height),
                    left : getPosition(pos.left, 'width', width)
                });
                
                // show the image
                self.show();
                
                // flag ready and call the callback
                self.ready = true;
                options.complete.call( self, self );
            },
            error: function() {
                raise('Could not scale image: '+self.image.src);
            },
            timeout: 1000
        });
        return this;
    }
};

// The main Galleria class

var Galleria = function() {
    
    var self = this;
    
    // the theme used
    this._theme = undef;
    
    // internal options
    this._options = {};
    
    // flag for controlling play/pause
    this._playing = false;
    
    // internal interval for slideshow
    this._playtime = 5000;
    
    // internal variable for the currently active image
    this._active = null;
    
    // the internal queue, arrayified
    this._queue = { length:0 };
    
    // the internal data array
    this._data = [];
    
    // the internal dom collection
    this._dom = {};
    
    // the internal thumbnails array
    this._thumbnails = [];
    
    // internal init flag
    this._initialized = false;
    
    // global stagewidth/height
    this._stageWidth = 0;
    this._stageHeight = 0;
    
    // target holder
    this._target = undef;
    
    // instance id
    this._id = Utils.timestamp();
    
    // add some elements
    var divs =  'container stage images image-nav image-nav-left image-nav-right ' + 
                'info info-text info-title info-description info-author ' +
                'thumbnails thumbnails-list thumbnails-container thumb-nav-left thumb-nav-right ' +
                'loader counter tooltip',
                
        spans = 'current total';
        
    $.each( divs.split(' '), function( i, elemId ) {
        self._dom[ elemId ] = Utils.create( 'galleria-' + elemId );
    });
    
    $.each( spans.split(' '), function( i, elemId ) {
        self._dom[ elemId ] = Utils.create( 'galleria-' + elemId, 'span' );
    })
    
    // the internal keyboard object
    // keeps reference of the keybinds and provides helper methods for binding keys
    this._keyboard = {
        
        keys : {
            UP: 38,
            DOWN: 40,
            LEFT: 37,
            RIGHT: 39,
            RETURN: 13,
            ESCAPE: 27,
            BACKSPACE: 8
        },
        
        map : {},
        
        bound: false,
        
        press: function(e) {
            var key = e.keyCode || e.which;
            if ( key in self._keyboard.map && typeof self._keyboard.map[key] == 'function' ) {
                self._keyboard.map[key].call(self, e);
            }
        },
        
        attach: function(map) {
            for( var key in map ) {
                var up = key.toUpperCase();
                if ( up in this.keys ) {
                    this.map[ this.keys[up] ] = map[key];
                }
            }
            if ( !this.bound ) {
                this.bound = true;
                $doc.bind('keydown', this.press);
            }
        },
        
        detach: function() {
            this.bound = false;
            $doc.unbind('keydown', this.press);
        }
    };
        
    // internal controls for keeping track of active / inactive images
    this._controls = {
        
        0: undef,
        
        1: undef,
        
        active : 0,
        
        swap : function() {
            this.active = this.active ? 0 : 1;
        },
        
        getActive : function() {
            return this[this.active];
        },
        
        getNext : function() {
            return this[ 1 - this.active ];
        }
    };
    
    // internal carousel object
    // todo
    this._carousel = {
        
        // shortcuts
        next: this.$('thumb-nav-right'),
        prev: this.$('thumb-nav-left'),
        
        // cache the width
        width: 0,
        
        // track the current position
        current: 0,
        
        // cache max value
        max: 0,
        
        // save all hooks for each width in an array
        hooks: [],
        
        // update the carousel
        // you can run this method anytime, f.ex on window.resize
        update: function() {
            var w = 0,
                h = 0,
                hooks = [0];

            $.each( self._thumbnails, function( i, thumb ) {
                if ( thumb.ready ) {
                    w += thumb.outerWidth || $( thumb.container ).outerWidth( true );
                    hooks[ i+1 ] = w;
                    h = Math.max( h, thumb.outerHeight || $( thumb.container).outerHeight() );
                }
            });
            self.$( 'thumbnails-container' ).toggleClass( 'galleria-carousel', w > self._stageWidth );
            
            self.$( 'thumbnails' ).css({ 
                width: w,
                height: h
            });

            // use global context in case ov event triggering
            self._carousel.max = w;
            self._carousel.hooks = hooks;
            self._carousel.width = self.$( 'thumbnails-list' ).width();
            self._carousel.setClasses();

            // todo: fix so the carousel moves to the left
        },
        
        bindControls: function() {
            
            var carousel = this
            this.next.bind( CLICK(), function(e) {
                e.preventDefault();
                
                if ( self._options.carousel_steps == 'auto' ) {
                    
                    for ( var i = carousel.current; i < carousel.hooks.length; i++ ) {
                        if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.width ) {
                            carousel.set(i-2);
                            break;
                        }
                    }
                    
                } else {
                    carousel.set( carousel.current + self._options.carousel_steps);
                }
            });
            
            this.prev.bind( CLICK(), function(e) {
                e.preventDefault();
                
                if ( self._options.carousel_steps == 'auto' ) {
                    
                    for ( var i = carousel.current; i>=0; i-- ) {
                        if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.width ) {
                            carousel.set( i+2 );
                            break;
                        } else if ( i == 0 ) {
                            carousel.set( 0 );
                            break;
                        }
                    }
                } else {
                    carousel.set( carousel.current - self._options.carousel_steps );
                }
            });
        },
        
        // calculate and set positions
        set: function( i ) {
            i = Math.max( i, 0 );
            while ( this.hooks[i-1] + this.width > this.max && i >= 0 ) {
                i--;
            }
            this.current = i;
            this.animate();
        },
        
        // get the last position
        getLast: function(i) {
            return ( i || this.current ) -1;
        },
        
        // follow the active image
        follow: function(i) {
            
            //don't follow if position fits
            if ( i == 0 || i == this.hooks.length-2 ) {
                this.set( i );
                return;
            }
            
            // calculate last position
            var last = this.current;
            while( this.hooks[last] - this.hooks[ this.current ] < this.width && last <= this.hooks.length) {
                last ++;
            }
            
            // set position
            if ( i-1 < this.current ) {
                this.set( i-1 );
            } else if ( i+2 > last) {
                this.set( i - last + this.current + 2 );
            }
        },
        
        // helper for setting disabled classes
        setClasses: function() {
            this.prev.toggleClass( 'disabled', !this.current );
            this.next.toggleClass( 'disabled', this.hooks[ this.current ] + this.width > this.max )
        },
        
        // the animation method    
        animate: function(to) {
            this.setClasses();
            var num = this.hooks[this.current] * -1;
            
            if ( isNaN( num ) ) {
                return;
            }
            
            self.$( 'thumbnails' ).animate({
                left: num
            },{
                duration: self._options.carousel_speed,
                easing: self._options.easing,
                queue: false
            });
        }
    };
    
    // tooltip control
    // added in 1.99
    // not implemented yet!
    this._tooltip = {
        
        initialized : false,
        
        active: null,
        
        open: false,
        
        init: function() {
            
            this.initialized = true;
            
            var css = '.galleria-tooltip{padding:3px 8px;max-width:50%;background:#ffe;color:#000;z-index:3;position:absolute;font-size:11px;line-height:1.3' +
                      'opacity:0;box-shadow:0 0 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 2px rgba(0,0,0,.4);}';
            
            Utils.insertStyleTag(css);
            
            self.$( 'tooltip' ).css('opacity',.8);
            Utils.hide( self.get('tooltip') );
            
        },
        
        // move handler
        move: function( e ) {
            var mouseX = self.getMousePosition(e).x,
                mouseY = self.getMousePosition(e).y,
                $elem = self.$( 'tooltip' ),
				x = mouseX,
				y = mouseY,
				height = $elem.outerHeight( true ) + 1,
				width = $elem.outerWidth( true ),
				limitY = height + 15;
            
            var maxX = self._stageWidth - width;
            var maxY = self._stageHeight - height;
            
            if ( !isNaN(x) && !isNaN(y) ) {
                
                x += 15;
                y -= 35;

                x = Math.max( 0, Math.min( maxX, x ) );
                y = Math.max( 0, Math.min( maxY, y ) );
                
                if( mouseY < limitY ) {
                    y = limitY;
                }
                
                $elem.css({ left: x, top: y });
            }
        },
        
        // bind elements to the tooltip
        // you can bind multiple elementIDs using { elemID : function } or { elemID : string }
        // you can also bind single DOM elements using bind(elem, string)
        bind: function( elem, value ) {
            
            if (! this.initialized ) {
                this.init();
            }
            
            var hover = function( elem, value) {
                
                self._tooltip.define( elem, value );
                
                $( elem ).hover(function() {

                    self._tooltip.active = elem;
                    Utils.clearTimer('switch_tooltip');
                    self.$('container').bind( 'mousemove', self._tooltip.move ).trigger( 'mousemove' );
                    self._tooltip.show( elem );
                    
                    Galleria.utils.addTimer( 'tooltip', function() {
                        
                        Utils.show( self.get( 'tooltip' ), 400 );
                        self._tooltip.open = true;
                        
                    }, self._tooltip.open ? 0 : 1000);
                    
                }, function() {
                    
                    self._tooltip.active = null;
                    
                    self.$( 'container' ).unbind( 'mousemove', self._tooltip.move );
                    Utils.clearTimer( 'tooltip' );
                    
                    Utils.hide( self.get( 'tooltip' ), 200, function() {
                        Utils.addTimer('switch_tooltip', function() {
                            self._tooltip.open = false;
                        }, 1000);
                    });
                })
            }
            
            if (typeof value == 'string') {
                hover( ( elem in self._dom ? self.get(elem) : elem ), value );
            } else {
                // asume elemID here
                $.each( elem, function( elemID, val ) {
                    hover( self.get(elemID), val );
                });
            }
        },
        
        show: function( elem ) {
            var text = $(elem).data('tt');
            if (! text ) {
                return;
            }
            text = typeof text == 'function' ? text() : text;
            self.$( 'tooltip' ).html( text.replace(/\s/,'&nbsp;') );
        },
        
        // redefine the tooltip here
        define: function( elem, value ) {
            
            // we store functions, not strings
            if (typeof value !== 'function') {
                var s = value;
                value = function() {
                    return s;
                }
            }
            
            if ( elem in self._dom ) {
                elem = self.get( elem );
            }
            
            $(elem).data('tt', value);
            
            self._tooltip.show( elem );

        },
        
        refresh: function() {
            $.each( arguments, function(i, elem) {
                if ( self._tooltip.active == elem ) {
                    self._tooltip.show( elem );
                }
            });
        }
    };
    
    // internal fullscreen control
    // added in 1.195
    // still kind of experimental
    this._fullscreen = {
        scrolled: 0,
        enter: function(callback) {
            
            // hide the image until rescale is complete
            Utils.hide( self.getActiveImage() );
            
            self.$( 'container' ).addClass( 'fullscreen' );
            
            this.scrolled = $(window).scrollTop();
            
            // begin styleforce
            Utils.forceStyles(self.get('container'), {
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                zIndex: 10000
            });
            
            var htmlbody = {
                height: '100%',
                overflow: 'hidden',
                margin:0,
                padding:0
            };
            
            Utils.forceStyles( DOM().html, htmlbody );
            Utils.forceStyles( DOM().body, htmlbody );
            
            // attach some keys
            self.attachKeyboard({
                escape: self.exitFullscreen,
                right: self.next,
                left: self.prev
            });
            
            // init the first rescale and attach callbacks
            self.rescale(function() {
                
                Utils.addTimer('fullscreen_enter', function() {
                    // show the image after 50 ms
                    Utils.show( self.getActiveImage() );
                    
                    if (typeof callback == 'function') {
                        callback.call( self );
                    }
                    
                }, 50);
                
                self.trigger( Galleria.FULLSCREEN_ENTER );
            });
            
            // bind the scaling to the resize event
            $(window).resize( function() {
                self._fullscreen.scale();
            } );
        },
        
        scale : function() {
            self.rescale();
        },
        
        exit: function(callback) {
            
            Utils.hide( self.getActiveImage() );

            self.$('container').removeClass( 'fullscreen' );
            
            // revert all styles
            Utils.revertStyles( self.get('container'), DOM().html, DOM().body );
            
            // scroll back
            window.scrollTo(0, this.scrolled);
            
            // detach all keyboard events (is this good?)
            self.detachKeyboard();
            
            self.rescale(function() {
                Utils.addTimer('fullscreen_exit', function() {
                    
                    // show the image after 50 ms
                    Utils.show( self.getActiveImage() );
                    
                    if ( typeof callback == 'function' ) {
                        callback.call( self );
                    }
                    
                }, 50);
                
                self.trigger( Galleria.FULLSCREEN_EXIT );
            });
            
            $(window).unbind('resize', this.scale);
        }
    };
    
    // the internal idle object for controlling idle states
    // TODO occational event conflicts
    this._idle = {
        
        trunk: [],
        
        bound: false,
        
        add: function(elem, to) {
            if (!elem) {
                return;
            }
            if (!this.bound) {
                this.addEvent();
            }
            elem = $(elem);
            
            var from = {};
            
            for (var style in to) {
                from[style] = elem.css(style);
            }
            elem.data('idle', {
                from: from,
                to: to,
                complete: true,
                busy: false
            });
            this.addTimer();
            this.trunk.push(elem);
        },
        
        remove: function(elem) {
            
            elem = jQuery(elem);
            
            $.each(this.trunk, function(i, el) {
                if ( el.length && !el.not(elem).length ) {
                    self._idle.show(elem);
                    self._idle.trunk.splice(i,1);
                }
            });
            
            if (!this.trunk.length) {
                this.removeEvent();
                Utils.clearTimer('idle');
            }
        },
        
        addEvent : function() {
            this.bound = true;
            self.$('container').bind('mousemove click', this.showAll );
        },
        
        removeEvent : function() {
            this.bound = false;
            self.$('container').unbind('mousemove click', this.showAll );
        },
        
        addTimer : function() {
            Utils.addTimer('idle', function() {
                self._idle.hide();
            }, self._options.idle_time );
        },
        
        hide : function() {
            self.trigger( Galleria.IDLE_ENTER );
            
            $.each(this.trunk, function(i, elem) {
                
                var data = elem.data('idle');
                
                if (! data) {
                    return;
                }
                
                data.complete = false;
                
                elem.stop().animate(data.to, {
                    duration: 600,
                    queue: false,
                    easing: 'swing'
                });
            });
        },
        
        showAll : function() {
            Utils.clearTimer('idle');
            
            $.each(self._idle.trunk, function( i, elem ) {
                self._idle.show( elem );
            });
        },
        
        show: function(elem) {

            var data = elem.data('idle');
            
            if (!data.busy && !data.complete) {
                
                data.busy = true;
                
                self.trigger( Galleria.IDLE_EXIT );
                
                elem.animate(data.from, {
                    duration: 300,
                    queue: false,
                    easing: 'swing',
                    complete: function() {
                        $(this).data('idle').busy = false;
                        $(this).data('idle').complete = true;
                    }
                });
            }
            this.addTimer();
        }
    };
    
    // internal lightbox object
    // creates a predesigned lightbox for simple popups of images in galleria
    this._lightbox = {
        
        width : 0,
        
        height : 0,
        
        initialized : false,
        
        active : null,
        
        image : null,
        
        elems : {},
        
        init : function() {
            
            // trigger the event
            self.trigger( Galleria.LIGHTBOX_OPEN );
            
            if (this.initialized) {
                return;
            }
            this.initialized = true;
            
            // create some elements to work with
            var elems = 'overlay box content shadow title info close prevholder prev nextholder next counter image',
                el = {},
                op = self._options,
                css = '',
                cssMap = {
                    overlay:    'position:fixed;display:none;opacity:'+op.overlay_opacity+';top:0;left:0;width:100%;height:100%;background:'+op.overlay_background+';z-index:99990',
                    box:        'position:fixed;display:none;width:400px;height:400px;top:50%;left:50%;margin-top:-200px;margin-left:-200px;z-index:99991',
                    shadow:     'position:absolute;background:#000;width:100%;height:100%;',
                    content:    'position:absolute;background-color:#fff;top:10px;left:10px;right:10px;bottom:10px;overflow:hidden',
                    info:       'position:absolute;bottom:10px;left:10px;right:10px;color:#444;font:11px/13px arial,sans-serif;height:13px',
                    close:      'position:absolute;top:10px;right:10px;height:20px;width:20px;background:#fff;text-align:center;cursor:pointer;color:#444;font:16px/22px arial,sans-serif;z-index:99999',
                    image:      'position:absolute;top:10px;left:10px;right:10px;bottom:30px;overflow:hidden',
                    prevholder: 'position:absolute;width:50%;height:100%;cursor:pointer',
                    nextholder: 'position:absolute;width:50%;height:100%;right:0;cursor:pointer',
                    prev:       'position:absolute;top:50%;margin-top:-20px;height:40px;width:30px;background:#fff;left:20px;display:none;line-height:40px;text-align:center;color:#000',
                    next:       'position:absolute;top:50%;margin-top:-20px;height:40px;width:30px;background:#fff;right:20px;left:auto;display:none;line-height:40px;text-align:center;color:#000',
                    title:      'float:left',
                    counter:    'float:right;margin-left:8px'
                },
                hover = function(elem) {
                    return elem.hover(
                        function() { $(this).css( 'color','#bbb' ) },
                        function() { $(this).css( 'color','#444' ) }
                    );
                };
            
            // create and insert CSS
            $.each(cssMap, function( key, value ) {
                css += '.galleria-lightbox-'+key+'{'+value+'}';
            });
            
            Utils.insertStyleTag( css );
            
            // create the elements            
            $.each(elems.split(' '), function( i, elemId ) {
                self.addElement( 'lightbox-' + elemId );
                el[ elemId ] = self._lightbox.elems[ elemId ] = self.get( 'lightbox-' + elemId );
            });

            // initiate the image
            this.image = new Picture();

            // append the elements
            self.append({
                'lightbox-box': ['lightbox-shadow','lightbox-content', 'lightbox-close','lightbox-prevholder','lightbox-nextholder'],
                'lightbox-info': ['lightbox-title','lightbox-counter'],
                'lightbox-content': ['lightbox-info', 'lightbox-image'],
                'lightbox-prevholder': 'lightbox-prev',
                'lightbox-nextholder': 'lightbox-next'
            });
            
            $( el.image ).append( this.image.container );
            
            $( DOM().body ).append( el.overlay, el.box );
            
            // add the prev/next nav and bind some controls

            hover( $( el.close ).bind( CLICK(), this.hide ).html('&#215;') );
            
            $.each( ['Prev','Next'], function(i, dir) {
                
                var $d = $( el[ dir.toLowerCase() ] ).html( /v/.test( dir ) ? '‹&nbsp;' : '&nbsp;›' );
                
                $( el[ dir.toLowerCase()+'holder'] ).hover(function() {
                    $d.show();
                }, function() {
                    $d.fadeOut(200);
                }).bind( CLICK(), function() {
                    self._lightbox[ 'show' + dir ]()
                });
                
            })
            $( el.overlay ).bind( CLICK(), this.hide );

        },
        
        rescale: function(event) {
            
            var lightbox = self._lightbox;
            
            // calculate
            var width = Math.min( $(window).width(), lightbox.width ),
                height = Math.min( $(window).height(), lightbox.height ),
                ratio = Math.min( (width-60) / lightbox.width, (height-80) / lightbox.height ),
                destWidth = ( lightbox.width * ratio ) + 40,
                destHeight = ( lightbox.height * ratio ) + 60,
                to = {
                    width: destWidth,
                    height: destHeight,
                    marginTop: Math.ceil( destHeight / 2 ) *- 1,
                    marginLeft: Math.ceil( destWidth / 2 ) *- 1
                };
            
            // if rescale event, don't animate
            if ( event ) {
                $( lightbox.elems.box ).css( to );
            } else {
                $( lightbox.elems.box ).animate(
                    to, 
                    self._options.lightbox_transition_speed, 
                    self._options.easing, 
                    function() {
                        var image = lightbox.image,
                            speed = self._options.lightbox_fade_speed;
                            
                        self.trigger({
                            type: Galleria.LIGHTBOX_IMAGE,
                            imageTarget: image.image
                        });
                        
                        image.show();
                        Utils.show( image.image, speed );
                        Utils.show( self._lightbox.elems.info, speed );
                    }
                );
            }
        },
        
        hide: function() {
            
            var lightbox = self._lightbox;
            
            // remove the image
            lightbox.image.image = null;
            
            $(window).unbind('resize', lightbox.rescale);
            
            $( lightbox.elems.box ).hide();
            
            Utils.hide( lightbox.elems.info );
            
            Utils.hide( lightbox.elems.overlay, 200, function() {
                $( this ).hide().css( 'opacity', self._options.overlay_opacity );
                self.trigger( Galleria.LIGHTBOX_CLOSE );
            });
        },
        
        showNext: function() {
            self._lightbox.show( self.getNext( self._lightbox.active ) );
        },
        
        showPrev: function() {
            self._lightbox.show( self.getPrev( self._lightbox.active ) );
        },
        
        show: function(index) {
            
            this.active = index = typeof index == 'number' ? index : self.getIndex();
            
            if (!this.initialized) {
                this.init();
            }
            
            $(window).unbind('resize', this.rescale );
            
            var data = self.getData(index),
                total = self.getDataLength();
            
            Utils.hide( this.elems.info );
            
            var lightbox = this;
            
            this.image.load( data.image, function( image ) {
                
                lightbox.width = image.original.width;
                lightbox.height = image.original.height;
                
                $( image.image ).css({
                    width: '100.5%',
                    height: '100.5%',
                    top:0,
                    zIndex: 99998,
                    opacity: 0
                });
                
                lightbox.elems.title.innerHTML = data.title;
                lightbox.elems.counter.innerHTML = (index+1) + ' / ' + total;
                $(window).resize( lightbox.rescale );
                lightbox.rescale();
            });

            $( lightbox.elems.overlay ).show();
            $( lightbox.elems.box ).show();
        }
    };
};

// end Galleria constructor

Galleria.prototype = {
    
    // the public init() is used to assign target, options and a THEMELOAD event
    init: function( target, options ) {

        var self = this;
        
        // save the instance
        Galleria.galleries.push( this );
        
        // save the original ingredients
        this._original = {
            target: target,
            options: options,
            data: null
        }
        
        // save the target here
        this._target = this._dom.target = target.nodeName ? 
            target : $( target ).get(0);

        // raise error if no target is detected
        if ( !this._target ) {
             raise('Target not found.');
             return;
        }
        
        // apply options
        this._options = {
            autoplay: false,
            carousel: true,
            carousel_follow: true,
            carousel_speed: 400,
            carousel_steps: 'auto',
            clicknext: false,
            data_config : function( elem ) { return {}; },
            data_selector: 'img',
            data_source: this._target,
            debug: undef,
            easing: 'galleria',
            extend: function(options) {},
            height: 'auto',
            idle_time: 3000,
            image_crop: false,
            image_margin: 0,
            image_pan: false,
            image_pan_smoothness: 12,
            image_position: '50%',
            keep_source: false,
            lightbox_fade_speed: 200,
            lightbox_transition_speed: 500,
            link_source_images: true,
            max_scale_ratio: undef,
            min_scale_ratio: undef,
            on_image: function(img,thumb) {},
            overlay_opacity: .85,
            overlay_background: '#0b0b0b',
            pause_on_interaction: true, // 1.9.96
            popup_links: false,
            preload: 2,
            queue: true,
            show: 0,
            show_info: true,
            show_counter: true,
            show_imagenav: true,
            thumb_crop: true,
            thumb_event_type: CLICK(),
            thumb_fit: true,
            thumb_margin: 0,
            thumb_quality: 'auto',
            thumbnails: true,
            transition: 'fade',
            transition_initial: undef,
            transition_speed: 400,
            width: 'auto'
        };
        
        // apply debug
        if ( options && options.debug === true ) {
            DEBUG = true;
        }
        
        // hide all content
        $( this._target ).children().hide();

        // now we just have to wait for the theme...
        if ( Galleria.theme ) {
            
            this._init();
            
        } else {
            
            Utils.addTimer('themeload', function() {
                raise( 'No theme found. ');
            }, 2000)
            
            $doc.one( Galleria.THEMELOAD, function() {
                Utils.clearTimer( 'themeload' );
                self._init.call( self );
            });
        }
    },
    
    // the internal _init is called when the THEMELOAD event is triggered
    // this method should only be called once per instance
    // for manipulation of data, use the .load method
    _init: function() {
        var self = this;
        
        if ( this._initialized ) {
            raise( 'Init failed: Gallery instance already initialized.' );
            return this;
        }
        
        this._initialized = true;
        
        if ( !Galleria.theme ) {
            raise( 'Init failed: No theme found.' );
            return this;
        }
        
        // merge the theme & caller options
        $.extend( true, this._options, Galleria.theme.defaults, this._original.options );

        // bind the gallery to run when data is ready
        this.bind( Galleria.DATA, function() {
            
            // save the new data
            this._original.data = this._data;
            
            // lets show the counter here
            this.get('total').innerHTML = this.getDataLength();
            
            // cache the container
            var $container = this.$( 'container' );
            
            // the gallery is ready, let's just wait for the css
            var num = { width:0, height:0 };
            var testElem =  Utils.create('galleria-image');
            
            // check container and thumbnail height
            Utils.wait({
                
                until: function() {
                    
                    // keep trying to get the value
                    $.each(['width', 'height'], function( i, m ) {

                        if (self._options[ m ] && typeof self._options[ m ] == 'number') {
                            num[ m ] = self._options[ m ];
                        } else {
                            num[m] = $container[ m ]() || 
                                     Utils.parseValue( $container.css( m ) ) || 
                                     self.$( 'target' )[ m ]() ||
                                     Utils.parseValue( self.$( 'target' ).css( m ) );
                        }
                        
                        $container[m]( num[ m ] );
                    });
                    
                    var thumbHeight = function() {
                        return true;
                    }
                    
                    // make sure thumbnails have a height as well
                    if ( self._options.thumbnails ) {
                        self.$('thumbnails').append( testElem );
                        thumbHeight = function() {
                            return !!$( testElem ).height();
                        }
                    }
                    
                    return thumbHeight() && num.width && num.height;
                
                },
                
                success: function() {
                    
                    // remove the testElem
                    $( testElem ).remove();
                    
                    // for some strange reason, webkit needs a single setTimeout to play ball
                    if ( Galleria.WEBKIT ) {
                        window.setTimeout( function() {
                            self._run()
                        }, 1);
                    } else {
                        self._run();
                    }
                },
                error: function() {
                    raise('Width & Height not found.')
                },
                timeout: 2000
            });
        });
        
        // postrun some stuff after the gallery is ready
        // make sure it only runs once
        var one = false;
        
        this.bind( Galleria.READY, function() {
            
            // show counter
            Utils.show( this.get('counter') );
            
            // bind clicknext
            if ( this._options.clicknext ) {
                $.each( this._data, function( i, data ) {
                    delete data.link;
                });
                this.$( 'stage' ).css({ cursor : 'pointer' }).bind( CLICK(), function(e) {
                    self.next();
                });
            }
            
            // bind carousel nav
            if ( this._options.carousel ) {
                this._carousel.bindControls();
            }
            
            // start autoplay
            if ( this._options.autoplay ) {
                
                this.pause();
                
                if ( typeof this._options.autoplay == 'number' ) {
                    this._playtime = this._options.autoplay;
                }
                
                this.trigger( Galleria.PLAY );
                this._playing = true;
            }
            
            // if second load, just do the show and return
            if ( one ) {
                this.show( this._options.show );
                return;
            }
            
            one = true;

            // initialize the History plugin
            if ( Galleria.History ) {

                // bind the show method
                Galleria.History.change(function(e) {
                    
                    // grab history ID
                    var val = parseInt( e.value.replace( /\//, '' ) );
                    
                    // if ID is NaN, the user pressed back from the first image
                    // return to previous address
                    if (isNaN(val)) {
                        window.history.go(-1);
                    
                    // else show the image
                    } else {
                        self.show( val, undef, true );
                    }
                });
            }
            
            // call the theme init method
            Galleria.theme.init.call( this, this._options );
            
            // call the extend option
            this._options.extend.call( this, this._options );
            
            // show the initial image
            // first test for permalinks in history
            if ( /^[0-9]{1,4}$/.test( HASH ) && Galleria.History ) {
                this.show( HASH, undef, true );
                
            } else {
                this.show( this._options.show );
            }
            
        });
        
        // build the gallery frame
        this.append({
            'info-text' :
                ['info-title', 'info-description', 'info-author'],
            'info' : 
                ['info-text'],
            'image-nav' : 
                ['image-nav-right', 'image-nav-left'],
            'stage' : 
                ['images', 'loader', 'counter', 'image-nav'],
            'thumbnails-list' :
                ['thumbnails'],
            'thumbnails-container' : 
                ['thumb-nav-left', 'thumbnails-list', 'thumb-nav-right'],
            'container' : 
                ['stage', 'thumbnails-container', 'info', 'tooltip']
        });
        
        Utils.hide( this.$( 'counter' ).append(
            this.get( 'current' ),
            ' / ',
            this.get( 'total' )
        ) );
        
        this.setCounter('&#8211;');
        
        // add images to the controls
        $.each( new Array(2), function(i) {
            
            // create a new Picture instance
            var image = new Picture();
            
            // apply some styles
            $( image.container ).css({
                position: 'absolute',
                top: 0,
                left: 0
            });
            
            // append the image
            self.$( 'images' ).append( image.container );
            
            // reload the controls
            self._controls[i] = image;
            
        });
        
        // some forced generic styling
        this.$( 'images' ).css({
            position: 'relative',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        });
        
        this.$( 'thumbnails, thumbnails-list' ).css({
            overflow: 'hidden',
            position: 'relative'
        });
        
        // bind image navigation arrows
        this.$( 'image-nav-right, image-nav-left' ).bind( CLICK(), function(e) {
            
            // tune the clicknext option
            if ( self._options.clicknext ) {
                e.stopPropagation();
            }
            
            // pause if options is set
            if ( self._options.pause_on_interaction ) {
                self.pause();
            }
            
            // navigate
            var fn = /right/.test( this.className ) ? 'next' : 'prev';
            self[ fn ]();

        });
        
        // hide controls if chosen to
        $.each( ['info','counter','image-nav'], function( i, el ) {
            if ( self._options[ 'show_'+el.replace(/-/,'') ] === false ) {
                Utils.moveOut( self.get( el ) );
            }
        });
        
        // load up target content
        this.load();
        
        // now it's usually safe to remove the content
        // IE will never stop loading if we remove it, so let's keep it hidden for IE (it's usually fast enough anyway)
        if ( !this._options.keep_source && !IE ) {
            this._target.innerHTML = '';
        }
        
        // append the gallery frame
        this.$( 'target' ).append( this.get( 'container' ) );
        
        // parse the carousel on each thumb load
        if ( this._options.carousel ) {
            this.bind( Galleria.THUMBNAIL, function() {
                this.updateCarousel()
            });
        }
        
        // bind on_image helper
        this.bind( Galleria.IMAGE, function( e ) {
            this._options.on_image.call( this, e.imageTarget, e.thumbTarget );
        });
        
        return this;
    },
    
    // the internal _run method should be called after loading data into galleria 
    // creates thumbnails and makes sure the gallery has proper meassurements
    _run : function() {
        // shortcuts
        var self = this,
            o = this._options,
            
            // width/height for calculations
            width  = 0,
            height = 0,
            
            // cache the thumbnail option
            optval = typeof o.thumbnails == "string" ? o.thumbnails.toLowerCase() : null;
        
        // loop through data and create thumbnails
        for( var i=0; this._data[i]; i++ ) {
            
            var thumb,
                data = this._data[i],
                $container;
            
            if ( o.thumbnails === true ) {
                
                // add a new Picture instance
                thumb = new Picture(i);
                
                // get source from thumb or image
                var src = data.thumb || data.image;
                
                // append the thumbnail
                this.$( 'thumbnails' ).append( thumb.container );
                
                // cache the container
                $container = $( thumb.container );
                
                // move some data into the instance
                thumb.data = {
                    width  : Utils.parseValue( $container.css('width') ),
                    height : Utils.parseValue( $container.css('height') ),
                    order  : i
                };
                
                // grab & reset size for smoother thumbnail loads
                $container.css(( o.thumb_fit && o.thumb_crop !== true ) ?
                    { width: 0, height: 0 } :
                    { width: thumb.data.width, height: thumb.data.height });
                
                // load the thumbnail
                thumb.load( src, function( thumb ) {
                    
                    // scale when ready
                    thumb.scale({
                        width:    thumb.data.width,
                        height:   thumb.data.height,
                        crop:     o.thumb_crop,
                        margin:   o.thumb_margin,
                        complete: function( thumb ) {
                            
                            // shrink thumbnails to fit
                            var top = ['left', 'top'];
                            var arr = ['Width', 'Height'];
                            
                            // calculate shrinked positions
                            $.each(arr, function( i, meassure ) {
                                var m = meassure.toLowerCase();
                                if ( (o.thumb_crop !== true || o.thumb_crop == m ) && o.thumb_fit ) {
                                    var css = {};
                                    css[m] = thumb[m];
                                    $( thumb.container ).css( css )
                                    css = {};
                                    css[top[i]] = 0;
                                    $( thumb.image ).css( css);
                                }
                                
                                // cache outer meassures
                                thumb['outer' + meassure] = $( thumb.container )['outer' + meassure]( true );
                            });
                            
                            // set high quality if downscale is moderate
                            Utils.toggleQuality( thumb.image, 
                                o.thumb_quality === true || 
                                ( o.thumb_quality == 'auto' && thumb.original.width < thumb.width * 3 )
                            );
                            
                            // trigger the THUMBNAIL event
                            self.trigger({
                                type: Galleria.THUMBNAIL,
                                thumbTarget: thumb.image,
                                thumbOrder: thumb.data.order
                            });
                        }
                    });
                });
                
                // preload all images here
                if ( o.preload == 'all' ) {
                    thumb.add( data.image );
                }
            
            // create empty spans if thumbnails is set to 'empty'
            } else if ( optval == 'empty' || optval == 'numbers' ) {
                
                thumb = {
                    container:  Utils.create( 'galleria-image' ),
                    image: Utils.create( 'img', 'span' ),
                    ready: true
                };
                
                // create numbered thumbnails
                if ( optval == 'numbers' ) {
                    $( thumb.image ).text( i + 1 );
                }
                
                
                $( thumb.container ).append( thumb.image );
                this.$( 'thumbnails' ).append( thumb.container );
                
                self.trigger({
                    type: Galleria.THUMBNAIL,
                    thumbTarget: thumb.image,
                    thumbOrder: i
                });
            
            
            // create null object to silent errors
            } else {
                thumb = {
                    container: null,
                    image: null
                }
            }
            
            // add events for thumbnails
            // you can control the event type using thumb_event_type
            // we'll add the same event to the source if it's kept
            
            $( thumb.container ).add( o.keep_source && o.link_source_images ? data.original : null )
                .data('index', i).bind(o.thumb_event_type, function(e) {
                    // pause if option is set
                    if ( o.pause_on_interaction ) {
                        self.pause();
                    }
                    
                    // extract the index from the data
                    var index = $( e.currentTarget ).data( 'index' );
                    if ( self.getIndex() !== index ) {
                        self.show( index );
                    }
                    
                    e.preventDefault();
            });
            
            this._thumbnails.push( thumb );
        }
        
        // make sure we have a stageHeight && stageWidth
        
        Utils.wait({
            
            until: function() {
                self._stageWidth  = self.$( 'stage' ).width();
                self._stageHeight = self.$( 'stage' ).height();
                return( self._stageWidth && self._stageHeight > 50 ); // what is an acceptable height?
            },
            
            success: function() {
                self.trigger( Galleria.READY );
            },
            
            error: function() {
                raise('stageM not found')
            }
            
        })
    },
    
    // the public load method loads new data into galleria
    // triggers the DATA event when ready
    load : function( source, selector, config ) {
        
        var self = this;
        
        // empty the data array
        this._data = [];
        
        // empty the thumbnails
        this._thumbnails = [];
        this.$('thumbnails').empty();
        
        // shorten the arguments
        if ( typeof selector == 'function' ) {
            config = selector;
            selector = null;
        }

        // use the source set by target
        source = source || this._options.data_source;
        
        // use selector set by option
        selector = selector || this._options.data_selector;
        
        // use the data_config set by option
        config = config || this._options.data_config;
        
        // check if the data is an array already
        if ( source.constructor == Array ) {
            if ( this.validate( source) ) {
                this._data = source;
                this.trigger( Galleria.DATA );
            } else {
                raise( 'Load failed: JSON Array not valid.' );
            }
            return this;
        }
        // loop through images and set data
        $( source ).find( selector ).each( function( i, img ) {
            var data = {},
                img = $( img ),
                parent = img.parent(),
                href = parent.attr( 'href' );
            
            // check if it's a link to another image
            if ( /\.(png|gif|jpg|jpeg)$/i.test(href) ) {
                data.image = href;
            
            // else assign the href as a link if it exists
            } else if ( href ) {
                data.link = href;
            }
            
            // mix default extractions with the hrefs and config
            // and push it into the data array
            self._data.push( $.extend({
                
                title:       img.attr('title'),
                thumb:       img.attr('src'),
                image:       img.attr('src'),
                description: img.attr('alt'),
                link:        img.attr('longdesc'),
                original:    img.get(0) // saved as a reference
                
            }, data, config( img ) ) );
            
        });
        // trigger the DATA event and return
        if ( this.getDataLength() ) {
            this.trigger( Galleria.DATA );
        } else {
            raise('Load failed: no data found.');
        }
        return this;
        
    },
    
    _getActive: function() {
        return this._controls.getActive();
    },
    
    validate : function( data ) {
        // todo: validate a custom data array
        return true;
    },
    
    bind : function(type, fn) {
        this.$( 'container' ).bind( type, this.proxy(fn) );
        return this;
    },
    
    unbind : function(type) {
        this.$( 'container' ).unbind( type );
    },
    
    trigger : function( type ) {
        type = typeof type == 'object' ? 
            $.extend( type, { scope: this } ) : 
            { type: type, scope: this };
        this.$( 'container' ).trigger( type );
        return this;
    },
    
    addIdleState: function() {
        this._idle.add.apply( this._idle, Utils.array( arguments ) );
        return this;
    },
    
    removeIdleState: function() {
        this._idle.remove.apply( this._idle, Utils.array( arguments ) );
        return this;
    },
    
    enterIdleMode: function() {
        this._idle.hide();
        return this;
    },
    
    exitIdleMode: function() {
        this.idle._show();
        return this;
    },
    
    enterFullscreen: function() {
        this._fullscreen.enter.apply( this, Utils.array( arguments ) );
        return this;
    },
    
    exitFullscreen: function() {
        this._fullscreen.exit.apply( this, Utils.array( arguments ) );
        return this;
    },
    
    bindTooltip: function() {
        this._tooltip.bind.apply( this._tooltip, Utils.array(arguments) );
    },
    
    defineTooltip: function() {
        this._tooltip.define.apply( this._tooltip, Utils.array(arguments) );
    },
    
    refreshTooltip: function() {
        this._tooltip.refresh.apply( this._tooltip, Utils.array(arguments) );
    },
    
    openLightbox: function() {
        this._lightbox.show.apply( this._lightbox, Utils.array( arguments ) );
    },
    
    closeLightbox: function() {
        this._lightbox.hide.apply( this._lightbox, Utils.array( arguments ) );
    },
    
    getActiveImage: function() {
        return this._getActive().image || undef;
    },
    
    getActiveThumb: function() {
        return this._thumbnails[ this._active ].image || undef;
    },
    
    getMousePosition : function(e) {
        return {
            x: e.pageX - this.$( 'stage' ).offset().left,
            y: e.pageY - this.$( 'stage' ).offset().top
        };
    },
    
    // the public addPan method adds a panning effect to the image
    addPan : function( img ) {

        if ( this._options.image_crop === false ) {
            return;
        }
        
        img = $( img || this.getActiveImage() );
        
        // define some variables and methods
        var self = this,
            x = img.width() / 2,
            y = img.height() / 2,
            curX = destX = parseInt( img.css( 'left' ) ) || 0,
            curY = destY = parseInt( img.css( 'top' ) ) || 0,
            distX = 0,
            distY = 0,
            active = false,
            ts = Utils.timestamp(),
            cache = 0,
            move = 0,
            
            // positions the image
            position = function( dist, cur, pos ) {
                if ( dist > 0 ) {
                    move = Math.round( Math.max( dist * -1, Math.min( 0, cur ) ) );
                    if ( cache != move ) {
                        
                        cache = move;
                        
                        if ( IE == 8 ) { // scroll is faster for IE
                            img.parent()[ 'scroll' + pos ]( move * -1 );
                        } else {
                            var css = {};
                            css[ pos.toLowerCase() ] = move;
                            img.css(css);
                        }
                    }
                }  
            },
            
            // calculates mouse position after 50ms
            calculate = function(e) {
                if (Utils.timestamp() - ts < 50) {
                    return;
                }
                active = true;
                x = self.getMousePosition(e).x;
                y = self.getMousePosition(e).y;
            },
            
            // the main loop to check
            loop = function(e) {
                
                if (!active) {
                    return;
                }

                distX = img.width() - self._stageWidth;
                distY = img.height() - self._stageHeight;
                destX = x / self._stageWidth * distX * -1;
                destY = y / self._stageHeight * distY * -1;
                curX += ( destX - curX ) / self._options.image_pan_smoothness;
                curY += ( destY - curY ) / self._options.image_pan_smoothness;
                
                position( distY, curY, 'Top' );
                position( distX, curX, 'Left' );

            };
        
        // we need to use scroll in IE8 to speed things up
        if ( IE == 8 ) {
            
            img.parent().scrollTop( curY * -1 ).scrollLeft( curX * -1 );
            img.css({ 
                top: 0, 
                left: 0 
            });
            
        }
        
        // unbind and bind event
        this.$( 'stage' ).unbind( 'mousemove', calculate ).bind( 'mousemove', calculate );
        
        // loop the loop
        Utils.addTimer('pan', loop, 50, true);
        
        return this;
    },
    
    proxy : function( fn, scope ) {
        if ( typeof fn !== 'function' ) {
            return function() {};
        }
        scope = scope || this;
        return function() {
            return fn.apply( scope, Utils.array( arguments ) );
        };
    },
    
    removePan: function() {
        
        if ( IE == 8 ) {
            // todo: doublecheck this
        }
        this.$( 'stage' ).unbind( 'mousemove' );
        
        Utils.clearTimer('pan');
        
        this.rescale();
        
        return this;
    },
    
    addElement : function() {
        
        var dom = this._dom;
        
        $.each( Utils.array(arguments), function( i, blueprint ) {
           dom[ blueprint ] = Utils.create( 'galleria-' + blueprint );
        });
        
        return this;
    },
    
    attachKeyboard : function() {
        this._keyboard.attach.apply( this._keyboard, Utils.array( arguments ) );
        return this;
    },
    
    detachKeyboard : function() {
        this._keyboard.detach.apply( this._keyboard, Utils.array( arguments ) );
        return this;
    },
    
    // Fast helper for appending galleria elements by blueprint
    appendChild : function( parent, child ) {
        this.$( parent ).append( this.get( child ) || child );
        return this;
    },
    
    // Fast helper for prepending galleria elements by blueprint
    prependChild : function( parent, child ) {
        this.$( parent ).prepend( this.get( child ) || child );
        return this;
    },
    
    // Remove galleria elements by blueprint
    remove : function() {
        this.$( Utils.array( arguments ).join(',') ).remove();
        return this;
    },
    
    // a fast helper for building dom structures
    append : function(data) {
        for( var i in data) {
            if ( data[i].constructor == Array ) {
                for( var j=0; data[i][j]; j++ ) {
                    this.appendChild( i, data[i][j] );
                }
            } else {
                this.appendChild( i, data[i] );
            }
        }
        return this;
    },
    
    // an internal helper for scaling according to options
    _scaleImage : function( image, options ) {
        
        options = $.extend({
            width:    this._stageWidth, 
            height:   this._stageHeight, 
            crop:     this._options.image_crop, 
            max:      this._options.max_scale_ratio,
            min:      this._options.min_scale_ratio,
            margin:   this._options.image_margin,
            position: this._options.image_position
        }, options );
        
       ( image || this._controls.getActive() ).scale( options );
        
        return this;
    },
    
    updateCarousel : function() {
        this._carousel.update();
    },
    
    // A public method for rescaling the gallery
    rescale : function( width, height, callback ) {
        
        var self = this;
        
        // allow rescale(fn)
        if ( typeof width == 'function' ) {
            callback = width;
            width = undef;
        }
        
        var scale = function() {
            
            // shortcut
            var o = self._options;
            
            // set stagewidth
            self._stageWidth = width || self.$( 'stage' ).width();
            self._stageHeight = height || self.$( 'stage' ).height();
            
            // scale the active image
            self._scaleImage();
            
            if ( self._options.carousel ) {
                self.updateCarousel();
            }
            
            self.trigger( Galleria.RESCALE );
            
            if ( typeof callback == 'function' ) {
                callback.call( self );
            }
        };
        
        if ( Galleria.WEBKIT && !width && !height ) {
            Utils.addTimer( 'scale', scale, 5 );// webkit is too fast
        } else {
            scale.call( self ); 
        }
    },
    
    // the public proxy for displaying the image
    // adds the image to a transition queue if set
    show : function( index, rewind, history ) {
        // do nothing if queue is false and transition is in progress
        if ( !this._options.queue && this._queue.stalled ) {
            return;
        }
        index = Math.max( 0, Math.min( parseInt(index), this.getDataLength() - 1 ) );
        
        rewind = typeof rewind != 'undefined' ? !!rewind : index < this.getIndex();
        
        history = history || false;
        
        // do the history thing and return
        if ( !history && Galleria.History ) {
            Galleria.History.value( index.toString() );
            return;
        }
        
        this._active = index;
        
        Array.prototype.push.call( this._queue, {
            index : index,
            rewind : rewind
        });
        if ( !this._queue.stalled ) {
            this._show();
        }
        
        return this;
    },
    
    // the internal _show method does the actual showing
    _show : function() {

        // shortcuts
        var self = this,
            queue = this._queue[ 0 ],
            data = this.getData( queue.index ),
            src = data.image,
            active = this._controls.getActive(),
            next = this._controls.getNext(),
            cached = next.isCached( src ),
            thumb = this._thumbnails[ queue.index ];
            
            // to be fired when loading & transition is complete:
        var complete = function() {
            
            // remove stalled
            self._queue.stalled = false;
            
            // optimize quality
            Utils.toggleQuality( next.image, self._options.image_quality );
            
            // swap
            $( active.container ).css({
                zIndex: 0,
                opacity: 0
            });
            $( next.container ).css({
                zIndex: 1,
                opacity: 1
            });
            self._controls.swap();
            
            // add pan according to option 
            if ( self._options.image_pan ) {
                self.addPan( next.image );
            }
            
            // make the image link
            if ( data.link ) {
                $( next.image ).css({
                    cursor: 'pointer'
                }).bind( CLICK(), function() {
                    
                    // popup link
                    if ( self._options.popup_links ) {
                        var win = window.open( data.link, '_blank' );
                    } else {
                        window.location.href = data.link;
                    }
                });
            }
            
            // remove the queued image
            Array.prototype.shift.call( self._queue );
            
            // if we still have images in the queue, show it
            if ( self._queue.length ) {
                self._show();
            }
            
            // check if we are playing
            self._playCheck();
            
            // trigger IMAGE event
            self.trigger({
                type:        Galleria.IMAGE,
                index:       queue.index,
                imageTarget: next.image,
                thumbTarget: thumb.image
            });
        };
        
        // let the carousel follow
        if ( this._options.carousel && this._options.carousel_follow ) {
            this._carousel.follow( queue.index );
        }
        
        // preload images
        if ( this._options.preload ) {
            
            var p,
                n = this.getNext();
                
            try {
                for ( var i = this._options.preload; i > 0; i-- ) {
                    p = new Picture();
                    p.add( self.getData( n ).image );
                    n = self.getNext( n );
                }
            } catch(e) {}
        }
        
        // show the next image, just in case
        Utils.show( next.container );
        
        // add active classes
        $( self._thumbnails[ queue.index ].container )
            .addClass( 'active' )
            .siblings( '.active' )
            .removeClass( 'active' );
        
        // trigger the LOADSTART event
        self.trigger( {
            type: Galleria.LOADSTART,
            cached: cached,
            index: queue.index,
            imageTarget: next.image,
            thumbTarget: thumb.image
        });
        
        // begin loading the next image
        next.load( src, function( next ) {
            self._scaleImage( next, {
                
                complete: function( next ) {

                    Utils.show( next.container );
                    
                    // toggle low quality for IE
                    if ( 'image' in active ) {
                        Utils.toggleQuality( active.image, false );
                    }
                    Utils.toggleQuality( next.image, false );
                    
                    // stall the queue
                    self._queue.stalled = true;
                    
                    // remove the image panning, if applied
                    self.removePan();
                    
                    // set the captions and counter
                    self.setInfo( queue.index );
                    self.setCounter( queue.index );
                    
                    // trigger the LOADFINISH event
                    self.trigger({
                        type: Galleria.LOADFINISH,
                        cached: cached,
                        index: queue.index,
                        imageTarget: next.image,
                        thumbTarget: self._thumbnails[ queue.index ].image
                    });
                    
                    var transition = active.image === null && self._options.transition_initial ? 
                        self._options.transition_initial : self._options.transition;
                    
                    // validate the transition
                    if ( transition in Galleria.transitions === false ) {
                        
                        complete();
                    
                    } else {
                        var params = {
                            prev:   active.image,
                            next:   next.image,
                            rewind: queue.rewind,
                            speed:  self._options.transition_speed || 400
                        };
                        
                        // call the transition function and send some stuff
                        Galleria.transitions[ transition ].call(self, params, complete );
                        
                    }
                }
            });
        });
    },
    
    // getNext() returns the next index, or he first if you are at the last
    // base is optional and defines where to start looking
    getNext : function( base ) {
        base = typeof base == 'number' ? base : this.getIndex();
        return base == this.getDataLength() - 1 ? 0 : base + 1;
    },
    
    // getPrev() returns the previous index, or he last if you are at the first
    // base is optional and defines where to start looking
    getPrev : function( base ) {
        base = typeof base == 'number' ? base : this.getIndex();
        return base === 0 ? this.getDataLength() - 1 : base - 1;
    },
    
    // next() shows the next image in line
    next : function() {
        if ( this.getDataLength() > 1 ) {
            this.show( this.getNext(), false );
        }
        return this;
    },
    
    // prev() shows the previous image in line
    prev : function() {
        if ( this.getDataLength() > 1 ) {
            this.show( this.getPrev(), true );
        }
        return this;
    },
    
    // get() returns the internal DOM element
    get : function( elemId ) {
        return elemId in this._dom ? this._dom[ elemId ] : null;
    },
    
    // getData() returns the data object
    // if no index specified it will take the currently active image
    getData : function( index ) {
        return index in this._data ? 
            this._data[ index ] : this._data[ this._active ];
    },
    
    // getDataLength() returns the length of the data object
    getDataLength : function() {
        return this._data.length;
    },
    
    // getIndex() returns the current index
    getIndex : function() {
        return typeof this._active === 'number' ? this._active : 0;
    },
    
    // get the stage height
    getStageHeight : function() {
        return this._stageHeight;
    },
    
    // get the stage width
    getStageWidth : function() {
        return this._stageWidth;
    },
    
    // get options
    // if no key specified it will return all options
    getOptions : function( key ) {
        return typeof key == 'undefined' ? this._options : this._options[ key ];
    },
    
    // set options
    // you can set options using setOptions( 'autoplay', true ) or setOptions({ autoplay: true });
    setOptions : function( key, value ) {
        if ( typeof key == 'object' ) {
            $.extend( this._options, key );
        } else {
            this._options[ key ] = value;
        }
    },
    
    play : function(delay) {
        
        this.trigger( Galleria.PLAY );
        
        this._playing = true;
        this._playtime = delay || this._playtime;
        
        this._playCheck();
        
        return this;
    },
    
    pause : function() {
        this.trigger( Galleria.PAUSE );
        this._playing = false;
        return this;
    },
    
    _playCheck : function() {
        var self = this,
            played = 0,
            interval = 20,
            now = Utils.timestamp();
            
        if ( this._playing ) {
            
            Utils.clearTimer('play');
            var fn = function() {
                
                played = Utils.timestamp() - now;
                if ( played >= self._playtime && self._playing ) {
                    Utils.clearTimer('play');
                    self.next();
                    return;
                }
                if ( self._playing ) {
                    
                    // trigger the PROGRESS event
                    self.trigger({
                        type:         Galleria.PROGRESS,
                        percent:      Math.ceil( played / self._playtime * 100 ),
                        seconds:      Math.floor( played / 1000 ),
                        milliseconds: played
                    });
                    
                    Utils.addTimer( 'play', fn, interval );
                }
            };
            Utils.addTimer( 'play', fn, interval );
        }
    },
    
    // manually set another index
    setIndex: function( val ) {
        this._active = val;
        return this;
    },
    
    // manually modify the counter
    setCounter: function( index ) {

        if ( typeof index == 'number' ) {
            index++;
        } else if ( typeof index == 'undefined' ) {
            index = this.getIndex()+1;
        }

        this.get( 'current' ).innerHTML = index;
        
        if ( IE == 8 ) { // weird IE8 bug
            
            var opacity = this.$( 'counter' ).css( 'opacity' );
            this.$( 'counter' ).css( 'opacity', opacity );
            
        }
        
        return this;
    },
    
    // manually set captions
    setInfo : function( index ) {
        
        var self = this,
            data = this.getData( index );
        
        $.each( ['title','description','author'], function( i, type ) {
            
            var elem = self.$( 'info-' + type );
            
            if ( !!data[type] ) {
                elem[ data[ type ].length ? 'show' : 'hide' ]().html( data[ type ] );
            } else {
               elem.empty().hide();
            }
        });
        
        return this;
    },
    
    // check if the data contains any captions
    hasInfo : function( index ) {
        
        var d = this.getData( index );
        var check = 'title description'.split(' ');
        for ( var i=0; check[i]; i++ ) {
            if ( !!this.getData( index )[ check[i] ] ){
                return true;
            }
        }
        return false;
        
    },
    
    // returns a jQuery object of elements based on elemId
    // you can call for multiple IDs separated with commas
    jQuery : function( str ) {
        
        var self = this,
            ret = [];
        
        $.each( str.split(','), function( i, elemId ) {
            elemId = $.trim( elemId );
            
            if ( self.get( elemId ) ) {
                ret.push( elemId );
            }
        });
        
        var jQ = $( self.get( ret.shift() ) );
        
        $.each( ret, function( i, elemId ) {
            jQ = jQ.add( self.get( elemId ) );
        })

        return jQ;
    },
    
    // shortcut for jQuery
    $ : function() {
        return this.jQuery.apply( this, Utils.array( arguments ) );
    }

};

// End of Galleria prototype

// Begin statics

$.extend( Galleria, {
    
    // Events
    DATA:             'data',
    READY:            'ready',
    THUMBNAIL:        'thumbnail',
    LOADSTART:        'loadstart',
    LOADFINISH:       'loadfinish',
    IMAGE:            'image',
    THEMELOAD:        'themeload',
    PLAY:             'play',
    PAUSE:            'pause',
    PROGRESS:         'progress',
    FULLSCREEN_ENTER: 'fullscreen_enter',
    FULLSCREEN_EXIT:  'fullscreen_exit',
    IDLE_ENTER:       'idle_enter',
    IDLE_EXIT:        'idle_exit',
    RESCALE:          'rescale',
    LIGHTBOX_OPEN:    'lightbox_open',
    LIGHTBOX_CLOSE:   'lightbox_close',
    LIGHTBOX_IMAGE:   'lightbox_image',
    
    // Browser helpers
    IE9:     IE == 9,
    IE8:     IE == 8,
    IE7:     IE == 7,
    IE6:     IE == 6,
    IE:      !!IE,
    WEBKIT:  /webkit/.test( NAV ),
    SAFARI:  /safari/.test( NAV ),
    CHROME:  /chrome/.test( NAV ),
    QUIRK:   ( IE && doc.compatMode && doc.compatMode == "BackCompat" ),
    MAC:     /mac/.test( navigator.platform.toLowerCase() ),
    OPERA:   !!window.opera,
    IPHONE:  /iphone/.test( NAV ),
    IPAD:    /ipad/.test( NAV ),
    ANDROID: /android/.test( NAV ),
    MOBILE:  !!( /iphone/.test( NAV ) || /ipad/.test( NAV ) || /android/.test( NAV ) ),
    
    // addTheme
    addTheme: function( theme ) {

        // make sure we have a name
        if ( !!theme['name'] === false ) {
            raise('No theme name specified');
        }
        
        if ( typeof theme.defaults != 'object' ) {
            theme.defaults = {};
        }
        
        if ( typeof theme.css == 'string' ) {
            
            var css;
            
            // look for the absolute path
            $('script').each(function( i, script ) {
                
                // look for the theme script
                var reg = new RegExp( 'galleria\\.' + theme.name.toLowerCase() + '\\.' );
                if( reg.test( script.src )) {

                    // we have a match
                    css = script.src.replace(/[^\/]*$/, "") + theme.css;

                    Utils.addTimer( "css", function() {
                        Utils.loadCSS( css, 'galleria-theme', function() {
                            Galleria.theme = theme;
                            $doc.trigger( Galleria.THEMELOAD );
                        });
                    }, 1);

                }
            });
            
            if ( !css ) {
                raise('No theme CSS loaded');
            }
        }
        return theme;
    },
    
    // loadTheme
    loadTheme: function( src, options ) {
        
        var loaded = false,
            length = Galleria.galleries.length;
        
        // first clear the current theme, if exists
        Galleria.theme = undef;
        
        // load the theme
        Utils.loadScript( src, function() {
            loaded = true;
        } );

        // set a 1 sec timeout, then display a hard error if no theme is loaded
        Utils.wait({
            until: function() {
                return loaded;
            },
            error: function() {
                raise( "Theme at " + src + " could not load, check theme path.", true )
            },
            success: function() {
                
                // check for existing galleries and reload them with the new theme
                if ( length ) {
                
                    // temporary save the new galleries
                    var refreshed = [];

                    // refresh all instances
                    // when adding a new theme to an existing gallery, all options will be resetted but the data will be kept
                    // you can apply new options as a second argument
                    $.each( Galleria.get(), function(i, instance) {

                        // mix the old data and options into the new instance
                        var op = $.extend( instance._original.options, {
                            data_source: instance._data
                        }, options);

                        // remove the old container
                        instance.$('container').remove();

                        // create a new instance 
                        var g = new Galleria();

                        // move the id
                        g._id = instance._id;

                        // initialize the new instance
                        g.init( instance._original.target, op );

                        // push the new instance
                        refreshed.push( g );
                    });

                    // now overwrite the old holder with the new instances
                    Galleria.galleries = refreshed;
                }
            },
            timeout: 1000
        });
    },
    
    // array of instances
    galleries: [],
    
    // get any instance
    get: function( index ) {
        if ( !!this.galleries[ index ] ) {
            return this.galleries[ index ];
        } else if ( typeof index !== 'number' ) {
            return this.galleries;
        } else {
            raise('Gallery index ' + index + ' not found');
        }
    },
    
    // transitions object
    transitions: {
        
        fade:      function(params, complete) {
            jQuery(params.next).css('opacity',0).show().animate({
                opacity: 1
            }, params.speed, complete);

            if (params.prev) {
                jQuery(params.prev).css('opacity',1).show().animate({
                    opacity: 0
                }, params.speed);
            }
        },
        
        flash:     function(params, complete) {
            jQuery(params.next).css('opacity',0);
            if (params.prev) {
                jQuery(params.prev).animate({
                    opacity: 0
                }, (params.speed/2), function() {
                    jQuery(params.next).animate({
                        opacity: 1
                    }, params.speed, complete);
                });
            } else {
                jQuery(params.next).animate({
                    opacity: 1
                }, params.speed, complete);
            }
        },
        
        pulse:     function(params, complete) {
            if (params.prev) {
                $(params.prev).hide();
            }
            jQuery(params.next).css('opacity',0).animate({
                opacity:1
            }, params.speed, complete);
        },
        
        slide:     function(params, complete) {
            var image  = $(params.next).parent(),
                images = this.$('images'), // ??
                width  = this._stageWidth,
                easing = this.getOptions( 'easing' );
                
            image.css({
                left: width * ( params.rewind ? -1 : 1 )
            });
            images.animate({
                left: width * ( params.rewind ? 1 : -1 )
            }, {
                duration: params.speed,
                queue: false,
                easing: easing,
                complete: function() {
                    images.css('left',0);
                    image.css('left',0);
                    complete();
                }
            });
        },
        
        fadeslide: function(params, complete) {
            
            var x = 0,
                easing = this.getOptions("easing");
            
            if (params.prev) {
                x = Utils.parseValue( $(params.prev).css("left") );
                $(params.prev).css({
                    opacity: 1,
                    left: x
                }).animate({
                    opacity: 0,
                    left: x + ( 50 * ( params.rewind ? 1 : -1 ) )
                },{
                    duration: params.speed,
                    queue: false,
                    easing: easing
                });
            }
            
            x = Utils.parseValue( $(params.next).css("left") );
            
            $(params.next).css({
                left: x + ( 50 * ( params.rewind ? -1 : 1 ) ), 
                opacity: 0
            }).animate({
                opacity: 1,
                left: x
            }, {
                duration: params.speed,
                complete: complete,
                queue: false,
                easing: easing
            });
        }
    },
    
    // add your own transition
    addTransition: function( name, fn ) {
        this.transitions[name] = fn;
    },

    // bring the utils
    utils: Utils,
    
    // bring the Picture class
    Picture: Picture,
    
    // bring the log
    log: log,
    
    // bring raise
    raise: raise
    
});

// our own easings
$.extend( $.easing, {
    galleria: function (_, t, b, c, d) {
        if ((t/=d/2) < 1) { 
            return c/2*t*t*t*t + b;
        }
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    galleriaIn: function (_, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	galleriaOut: function (_, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	}
});

// the plugin initializer
$.fn.galleria = function( options ) {
    
    return this.each(function() {
        
        var gallery = new Galleria();
        gallery.init( this, options )

    });
};

// expose Galleria
window.Galleria = Galleria;

// phew

})( jQuery );