var ImageFrame = Class.create();

ImageFrame.prototype = {

initialize: function(images) {
    this.currentimg = 0;   
    this.container = $('imageframe');
    this.infoBar = $('imagecaption');
    this.images = images;
    if( this.images.length < 2 ) return;

    // Events //////////////////////////////////////////////
    Event.observe('scrollLeft', 'click', function(){this.switchImage(-1)}.bind(this));
    Event.observe('scrollRight', 'click', function(){this.switchImage(1)}.bind(this));
    Event.observe(Element.down(this.container), 'click', function(e){this.fullScreen(this.currentimg);Event.stop(e);}.bind(this));
        
    var thumbloading = document.createElement('img');
    thumbloading.setAttribute('id', 'thumbloading');
    thumbloading.src = '/img/loading.gif';
    Element.hide(thumbloading);
    $('imageframe').appendChild(thumbloading);

    var overlay = document.createElement('div');
    overlay.setAttribute('id','overlay');
    Element.setStyle(overlay,{'display':'none','position':'absolute'});
    document.body.appendChild(overlay);
    this.switchImage(0);
},

switchImage: function(direction) {
    this.currentimg = ((direction + this.currentimg) + this.images.length)%this.images.length;
    var img = $('mainimg');
    var dim = Element.getDimensions(this.container);
    var src = this.createImgSrc(img, {img:unescape(this.images[this.currentimg]['filename'])});
    var preloader = new Image();
    Element.hide(img);
    var loadingEffect = new Effect.Appear('thumbloading', {duration: 4.0});
    preloader.onload = function(){
        img.src = src;
        loadingEffect.cancel();
        Element.hide('thumbloading');
        Element.setStyle(img, {marginTop: parseInt((dim['height']-preloader.height)/2)+'px'});
        new Effect.Appear(img, {duration:0.4});
    }
    preloader.src = src;
    this.setCaption(this.images[this.currentimg]['caption']);  

    var anchor = Element.down(this.container);
    anchor.href = '/img/gallery/'+this.images[this.currentimg]['filename'];
},


fullScreen: function(index){
    var overlay = $('overlay');
    Element.setStyle(overlay, {width:'100%',height:'100%','top':'0px',left:'0px',zIndex:100});
    new Effect.Appear(overlay, {duration:0,from:0,to:0.9});
    Event.observe(overlay, 'click',this.closeFullScreen.bind(this));
    
    var load = document.createElement('img');
    load.setAttribute('id','fullscreenLoad');
    load.src = '/img/loading.gif';
    Element.setStyle(load, {position:'absolute','top':'48%','left':'48%',zIndex:'1000',display:'none'});
    document.body.appendChild(load);

    var loadingEffect = new Effect.Appear(load, {duration: 4.0});
    
    // Build DOM nodes 
    var pad = 20;
    var fsContainer = document.createElement('div');
    fsContainer.setAttribute('id','fullscreenContainer');
    
    var img = document.createElement('img');
    img.setAttribute('id','fullscreenImage');
    fsContainer.appendChild(img);

    var imgData = document.createElement('div');
    imgData.setAttribute('id','fullscreenImageData');
    Element.addClassName(imgData, 'clearfix');
    fsContainer.appendChild(imgData);
    imgData.innerHTML = '&nbsp;';

    var caption = document.createElement('div');
    caption.setAttribute('id','fullscreenCaption');
    imgData.appendChild(caption);
    
    var closeButton = document.createElement('a');
    closeButton.setAttribute('id', 'fullscreenCloseButton');
    closeButton.href = '#';
    var closeImg = document.createElement('img');    
    closeImg.src = '/img/image.php?text=close&bg=fff';
    closeButton.appendChild(closeImg);
    closeButton.onclick = function(){this.closeFullScreen(); return false;}.bind(this);

    imgData.appendChild(closeButton);

    document.body.appendChild(fsContainer);
    
    // Set up Data
    Element.hide(fsContainer);
    caption.innerHTML = unescape(this.images[index]['caption']);
    var preload = new Image();
    preload.onload = function() {
        img.src = preload.src;
        // Position the Container
        var dim = getPageSize();
        var w = this.width + pad;
        Element.setStyle(fsContainer, {width:w+'px'});
        var t = parseInt((dim[1] - Element.getHeight(fsContainer))/2) - 12;
        if( t < 0) t = 0;
        var l = parseInt((dim[0] - Element.getWidth(fsContainer))/2);
        Element.setStyle(fsContainer,{'top':t+'px',left:l+'px'});
        loadingEffect.cancel();
        Element.hide('fullscreenLoad');
        Element.show(fsContainer);
    };
    var dim = this.getFullscreenSize();
    preload.src = '/img/thumbnail.php?img='+this.images[index]['filename']+'&w='+dim[0]+'&h='+dim[1];   
    
},

closeFullScreen: function(){
    Element.hide('overlay');
    var elem = $('fullscreenContainer');
    if( elem ) document.body.removeChild(elem);
    document.body.removeChild($('fullscreenLoad'));
},

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

// Set the caption
setCaption: function(caption) {
    this.infoBar.innerHTML = unescape(caption);
},

// Adjust the size of the images based on window dimensions
getFullscreenSize: function() {
    var dim = getPageSize();
    var w = dim[2], h = dim[3];
            
    if( w <= 800 || h <= 600 ) {
        imgMaxWidth = 800; imgMaxHeight = 600;
    }
    else if( w <= 1024 || h <= 768 ) {
        imgMaxWidth = 1024; imgMaxHeight = 1024;
    }
    else { 
        imgMaxWidth = 1280; imgMaxHeight = 1024;
    }
    
    imgMaxWidth = imgMaxWidth*0.85;
    imgMaxHeight = imgMaxHeight*0.50;
    return [imgMaxWidth, imgMaxHeight];
}

};


function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}