var ImageFrame = function() {
    return this.initialize.apply(this, arguments);
}

ImageFrame.prototype = {

initialize : function(images, obj, settings) {
    var self = this;
    self.pad = 3;
    self.currentimg = 0;   
    self.container = obj;
    self.preloads = 0;
    
    self.settings = $.extend( {
        fullscreen : false,
        captionID : 'image-caption',
        label : null
    }, settings);

    self.images = images;

    var $img = $('> img:eq(0)', self.container);
    if( $img.length < 1) $img = $('> a:eq(0) > img', self.container);
    if( $img.length < 1) $img = $('<img src="/img/thumbnail.php?img='+encodeURIComponent(images[0]['filename'])+'" alt="" />').prependTo(self.container);
    self.image = $img[0];

    var $next = $('#image-next');
    var $prev = $('#image-prev');
    if( $next.length < 1 ) {
        $next = $('<a class="image-next"><img src="/img/next.png" alt="next" /></a>').css({position: 'absolute'}).
        appendTo(self.container).rollover();
    }
    if( $prev.length < 1 ) {
        $prev = $('<a class="image-prev"><img src="/img/prev.png" alt="next" /></a>').css({position: 'absolute'}).
        appendTo(self.container).rollover();
    }
    
    if( ! self.settings.label && images.length < 2 ) {
        $next.hide(); 
        $prev.hide();
    }

    // Events //////////////////////////////////////////////
    if( self.settings.fullscreen ) $('> img', self.container).click( function(){ self.fullScreen(self.currentimg) });
    $next.click( function(){ self.rotateImage(1) });    
    $prev.click( function(){ self.rotateImage(-1) });    

    // Hookup to Thickbox
    var $anchor = $('> a:eq(0)', self.container);
    $anchor.click( function() {
        var dim = self.getFullscreenSize();
        if( self.images[self.currentimg]['href'] ) {
            this.href = self.images[self.currentimg]['href'];
        } else {
            this.href = '/img/'+self.images[self.currentimg]['filename'];
        }
        //this.title = unescape(self.images[self.currentimg]['caption']);
        return false;
    });
    tb_init($anchor[0]);
    
    
    self.switchImage(0);

    self.container.ImageFrame = this;
},

rotateImage: function(direction) {
    var self = this;
    direction = parseInt(direction);
    // UGLY HACK HACK HACK To link installation with work in sequence
    if( self.settings.label ) {
        if( self.settings.label == 'installation' ) {
            var obj = $('#work-image-frame')[0];
            if( obj && self.currentimg + direction == self.images.length ) {
                $('#work-trigger').click();
                obj.ImageFrame.switchImage(0);
                return;                
            }
            else if ( obj && self.currentimg + direction == -1 ) {
                $('#work-trigger').click();
                obj.ImageFrame.switchImage( obj.ImageFrame.images.length-1 );
                return;
            }
        }
        else if( self.settings.label == 'work' ) {
            var obj = $('#installation-image-frame')[0];
            if( obj && (self.currentimg + direction == self.images.length )){
                $('#installation-trigger').click();
                obj.ImageFrame.switchImage(0);
                return;                
            }
            else if( obj && self.currentimg + direction == -1 ) {
                $('#installation-trigger').click();
                obj.ImageFrame.switchImage( obj.ImageFrame.images.length-1);
                return;
            }
        }
    }
    var i = ((direction + self.currentimg) + self.images.length)%self.images.length;
    self.switchImage(i);
},

switchImage: function(index) {
    index = parseInt(index);
    this.currentimg = index;
    this.loadImage();
},

// Load single full size image into frame
loadImage: function() {
    var self = this;
    var $container = $(self.container);
    var $img = $(self.image);

    var $loading = $('<img id="thumbloading" src="/img/modal/loading.gif" />');
    $loading.hide().appendTo($container).css({position:'absolute',left:'45%',top:'40%'});

    var framedim = {
        width : $container.width(),
        height : $container.height()
    };
    
    var pad = self.pad * 2;
    var width = (self.settings.width)? self.settings.width : framedim['width'] - pad; 
    var height = (self.settings.height)? self.settings.height :  framedim['height'] - pad;
    var src = self.createImgSrc($img.attr('src'), {
        img: self.images[self.currentimg]['filename'],
        crop:0,w: width, h: height
      });

    var preload = new Image();
    $img.hide();
    $loading.fadeIn(4.0); 
    preload.onload = function () {
        $img.attr('src', preload.src);
        $loading.remove();
        var t = 0; //parseInt((framedim['height']-preload.height)/2);
        var l = 0; //parseInt((framedim['width']-preload.width)/2);
        $img.css({
            'margin':'0px','float':'',
            'margin-top' : t+'px',
            'margin-left': l+'px'
        });
        
        if( self.settings.height )$container.height( this.height ); 
        if( self.settings.width ) $container.width( this.width );
        
        var caption = unescape(self.images[self.currentimg]['caption']);
        $('#'+self.settings.captionID).empty().append(caption).fadeIn(500);
        $img.fadeIn(500);

        var anchor = $img.parent()[0];
        if( anchor.tagName.toLowerCase() == 'a' && self.images[self.currentimg]['href'] ) {
            anchor.href = self.images[self.currentimg]['href'];
        }
    }    
    preload.src = src;    
},

fullScreen: function(index){
    var self = this;
    $overlay = $('#overlay');
    var $overlay = $('<div id="overlay"></div>').
        css({display : 'none', 'position' : 'fixed'}).
        appendTo(document.body).
        click(self.closeFullScreen);
    $overlay.css({width:'100%',height:'100%','top':'0px','left':'0px',zIndex:100});
    $overlay.show().css('opacity', 0.9);

    var $loading = $('<img id="thumbloading" src="/img/modal/loading.gif" />');
    $loading.hide().appendTo(document.body);

    var pad = 20;

    // Build DOM nodes 
    var $fsContainer = $('<div id="fullscreenContainer"><img id="fullscreenImage" /><div id="fullscreenImageData">'+
        '<span id="fullscreenCaption"></span>'+
        '<a id="fullscreenCloseButton" href="#"><img src="/img/image.php?text=CLOSE%20X&bg=fff&size=12&color=000" /></a>'+
        '</div></div>').appendTo(document.body);
    
    $('#fullscreenCloseButton').click( function(){ self.closeFullScreen(); return false; } );
    
   
    // Set up Data
    $fsContainer.hide();
    $('#fullscreenCaption').append( unescape(self.images[index]['caption']) );

    var preload = new Image();
    preload.onload = function() {
        $('#fullscreenImage').attr('src', preload.src );
        // Position the Container
        var dim = [ $(window).width(), $(window).height() ];
        var w = this.width + pad;
        var h = this.height + pad;
        $fsContainer.css({width:w+'px'});

        var t = parseInt(( dim[1] - $fsContainer.height() )/2) - 20;
        if( t < 0) t = 0;
        var l = parseInt(( dim[0] - $fsContainer.width() )/2);
        $fsContainer.css({'position':'absolute','top':t+'px','left':l+'px'});

        $loading.remove();
        $fsContainer.show();
    };
    var dim = self.getFullscreenSize();
    preload.src = '/img/thumbnail.php?img='+self.images[index]['filename']+'&w='+dim[0]+'&h='+dim[1];   
},

closeFullScreen: function(){
    $('#overlay').hide().remove();
    $('#fullscreenContainer').remove();
},

// Create a new image url from given image and changed attributes
createImgSrc: function(src, attributes) {
    var qstr = parseQstr(src);
    $.extend(qstr,attributes);
    return '/img/thumbnail.php?'+objToQstr(qstr);
},


// Adjust the size of the images based on window dimensions
getFullscreenSize: function() {
    var dim = [
        $(window).width(), $(window).height(),
        $(document.body).width(), $(document.body).height()
    ];
    var w = dim[0], h = dim[1];
            
    if( w <= 800 || h <= 600 ) {
        imgMaxWidth = 800; imgMaxHeight = 600;
    }
    else if( w <= 1024 || h <= 768 ) {
        imgMaxWidth = 1024; imgMaxHeight = 768;
    }
    else if( w <= 1280 || h <= 1024 ) {
        imgMaxWidth = 1280; imgMaxHeight = 1024;
    }
    else if( w <= 1600 || h <= 1200 ) {
        imgMaxWidth = 1600; imgMaxHeight = 1200;
    }
    else {
        imgMaxWidth = 2048; imgMaxHeight = 1280;
    }
    
    imgMaxWidth = parseInt(imgMaxWidth*0.9);
    imgMaxHeight = parseInt(imgMaxHeight*0.58);
    return [imgMaxWidth, imgMaxHeight];
}

};


function parseQstr ( str ) {
    var h = new Object();
    str = str.replace(/^.*\?/,'');
    var p = str.split(/[&;]/);
    for (var i=0; i<p.length; i++) {
        var n = p[i].split('=');
        var k = decodeURIComponent(n[0]);
        if (n.length == 2) var v = decodeURIComponent(n[1]);
        else var v = k;
        if (typeof h[k] == 'undefined') h[k] = v;
        else {
            var a = eval(h[k]);
            a.push(v);
            h[k] = a;
        }
    }
    return h;
}

function objToQstr( obj ) {
    var str = '';
    $.each( obj, function(key, val) {
        str+= key+'='+val + '&';
    });
    return str.replace(/&$/,'');
}



jQuery.ImageFrame = {
    list : []
};
jQuery.fn.ImageFrame = function(images, settings) {
    return this.each( function () {
        jQuery.ImageFrame.list.push (
            new ImageFrame(images, this, settings )
        );
    });
}