var mccGallery = new Class(
{
	Implements: [Options], 
		
    options: 
    {  	
    	
    },
    
    initialize: function(options)
    {
    	this.setOptions(options);
    	this.path = this.options.path;
    	this.gallery = $(this.options.gallery);
    	this.images = [];
    	this.texts = [];
    		
    	$each(this.options.assets, function(item,key){
    		
    		var thumb = new Asset.image(this.path+item.th, {title: 'click to view larger photo'});
    		
    		thumb.set({
    		'styles':{
    			'opacity':0.8
    		},
    		
    		'events':{
				'mouseover': function(){
				this.setStyles({'cursor':'pointer'});
				this.retrieve('fx').start({'opacity':1});
				},
				
				'mouseout': function(){
				this.retrieve('fx').start({'opacity':0.8});
				},
					
				'click': function(){
				this.show(key);
				}.bind(this)
    		}    		
    		});
    		
    		thumb.store('fx', new Fx.Morph(thumb, {duration: 300, transition: 'sine:in:out', link: 'cancel'}));
    		thumb.inject(this.gallery);
    		    		
    		var photo = new Asset.image(this.path+item.img);
    		photo.store('fx',new Fx.Morph(photo, {duration: 200, transition: 'sine:in:out'}));
    		photo.set({
    			'styles': {
    				'opacity' : 0
    			}
    		})
    		
    		this.images[key] = photo;
    		
    		this.texts[key] = item.text; 
    	}.bind(this));
    	
    	this.dim = {x:0,y:0,xx:0,yy:0};
    	this.x = $(window).getSize().x;	    	   	
        this.y = $(window).getSize().y;
        this.offset = {x:($(window).getScrollSize().x-this.x),y:($(window).getScrollSize().y-this.y)};
        this.scroll = {x:($(window).getScroll().x),y:($(window).getScroll().y)};	
        this.setlayout();
        
    	   	
    	window.addEvents({
    	'resize':function(){
    		this.adjust();
    		this.setfactor();
    		this.frame.setStyles({'margin-left':this.factor.left.to,'margin-top':this.factor.top.to});
    	}.bind(this)    	
    	});
    	
    	
    	this.total = this.images.length; 
    },

    show: function(key)
    {   	
    	window.fireEvent('resize');
    	this.index = key;
    	this.next.removeEvents('click');
		this.prev.removeEvents('click');
		this.controls.dispose();
	    	
       	this.n = this.setnext(this.index);
    	this.p = this.setprev(this.index);
    	   	
    	this.frame.getElements('img').each(function(item){
    		item.dispose();
    	});

    	var ch = this.caption.getSize().y;
    	this.caption.setStyles({'margin-top':ch,'opacity':0});
    	
    	var w = this.images[this.index].width;
    	var h = this.images[this.index].height;
    	
    	this.dim.xx = w;
    	this.dim.yy = h;
    	    	
    	if(this.viewport.getStyle('opacity') > 0)
    	{
    		this.resizeframe();
    	}
    	else
    	{
	    	this.viewport.retrieve('fx').start({'opacity':0.85}).chain(function(){
	    		this.resizeframe();
	    	}.bind(this));	
    	}				
    },
    
    resizeframe: function()
    {
    	this.setfactor();
    	var frame = this.frame.retrieve('fx');
			frame.set({'marginLeft':this.factor.left.from});
    		frame.set({'marginTop':this.factor.top.from});
    		frame.start({
	    	'opacity':1,
	    	'height':[this.dim.y,this.dim.yy],
	    	'marginTop':[this.factor.top.from,this.factor.top.to],
	    	'width':[this.dim.x,this.dim.xx],
	    	'marginLeft':[this.factor.left.from,this.factor.left.to]
    		}).chain(function(){
					this.setimage();
					this.viewport.set({
					'events': {
						'click': function(){
    					this.terminate();
    					}.bind(this)
					}					
					});
    			}.bind(this));	
    },
       
    setimage: function()
    {
    	this.caption.dispose();
    	this.images[this.index].setStyle('opacity',0);
    	this.images[this.index].inject(this.frame);
    	var photo = this.images[this.index].retrieve('fx');
    	this.next.setStyles({'opacity':0.3});
    	this.prev.setStyles({'opacity':0.3});
    	this.close.setStyles({'opacity':0.3});
		photo.start({'opacity':1}).chain(function(){
						if(this.texts[this.index])
						{
							this.text.set('html',this.texts[this.index]);
							this.text.inject(this.caption);
							this.caption.inject(this.frame);
							this.caption.getElements('a').each(function(item){
								item.setStyles({'color':'#6bc0f6'});
							});
							this.caption.setStyles({'opacity':0.7});
							var ch = this.caption.getSize().y;
							var caption = this.caption.retrieve('fx');	
							caption.start({'margin-top':-ch-5});
							
						}
				
						this.prev.addEvent('click', function(){this.show(this.p)}.bind(this));
						this.next.addEvent('click', function(){this.show(this.n)}.bind(this));
						
						this.controls.adopt(this.prev,this.next,this.close);
						
						this.frame.grab(this.controls);
						
						
						this.dim.x = this.dim.xx;
						this.dim.y = this.dim.yy;		
		}.bind(this));
		
    },
    
   	setfactor: function()
   	{
   		this.factor = {
   		left:{
   			from:((this.x-this.dim.x-20).round()+(this.scroll.x*2))/2,
   			to:((this.x-this.dim.xx-20).round()+(this.scroll.x*2))/2
   			},
   		top:{
   			from:((this.y-this.dim.y-20).round()+(this.scroll.y*2))/2,
   			to:((this.y-this.dim.yy-20).round()+(this.scroll.y*2))/2
   			}
   		}
   		
   	},
  
    setnext: function(n)
    {
    	var key = ((n + 1) > this.total - 1) ? 0 : n + 1;
    	return key;
    },
  
    setprev: function(n)
    {
    	var key = ((n - 1) < 0) ? this.total - 1 : n - 1;
    	return key;
    },
    
    terminate: function()
    {
    	this.dim.x = 0;
    	this.dim.y = 0;
    	this.viewport.removeEvents('click');
    	this.frame.setStyles({'opacity':0,'width':0,'height':0});
    	this.images[this.index].dispose();
    	this.controls.dispose();
	    this.viewport.retrieve('fx').start({'opacity':0});
    },
    
    adjust: function()
    {
    	this.x = $(window).getSize().x;	    	   	
        this.y = $(window).getSize().y;
        this.offset = {x:($(window).getScrollSize().x-this.x),y:($(window).getScrollSize().y-this.y)};
        this.scroll = {x:($(window).getScroll().x),y:($(window).getScroll().y)};
    },
    
     setlayout: function()
    {
    	this.viewport = new Element('div', {
    	'styles': {
    	'background' : '#000',
		'position' : (Browser.Engine.trident4) ? 'absolute' : 'fixed',
		'left' : '0px',	
		'top' : '0px',	
		'width' : (Browser.Engine.trident4) ? window.getWidth() : '100%',	
		'height' : (Browser.Engine.trident4) ? window.getHeight() : '100%',	
    	'opacity' : 0,
    	'z-index' : 901		
    	}
    	});
    	
    	this.viewport.store('fx', new Fx.Morph(this.viewport,{duration: 200, transition: 'quad:in:out',link: 'cancel'}));
    	
    	this.frame = new Element('div', {
    	'styles': {
        'background': '#efefef',
    	'padding': 0,
    	'position': 'absolute',
    	'border': '10px solid #efefef',
    	'left': 0,
    	'top': 0,
    	'opacity': 0,
    	'z-index': 902,
    	'overflow':'hidden'
    	}
    	});
  	
    	this.frame.store('fx', new Fx.Morph(this.frame,{duration: 300, transition: 'sine:out'}));
    	
    	this.caption = new Element('div', {	
    	'styles': {
        'padding': 10,
    	'background': '#000',
		'margin-top':10,
		'position':'relative',
		'border-top': '1px solid #222',
		'border-bottom': '1px solid #222',
		'opacity':0.7
    	},
    	'id': 'mccgallerycaption'
    	});
  	
    	this.caption.store('fx', new Fx.Morph(this.caption,{duration: 200, transition: 'quad:in:out'}));
    	
    	this.text = new Element('span', {	
    	'styles': {
    	'color' : '#fff',
    	'font' : 'normal 11px Tahoma,Arial,Verdana,serif',
    	'line-height': '1.0em',
		'position':'relative'
    	}
    	});
        	
    	this.controls = new Element('div',{
    	'styles': {	
		'position':'absolute',
		'padding':'0',
		'margin':'0',
		'top': 0,
		'right': 0
    	}	
    	});
    	
    	this.close = new Element('a', {
    	'href': 'javascript:void(0);',
    	'styles' : {
    	'background': 'url(/js/assets/mcc-gallery/close.png) no-repeat 0 0',
    	'width' : 39,	
    	'height' : 34,
    	'display':'block',
    	'float' : 'left',
    	'margin' : '0',
    	'padding' : '0',
    	'outline' : 'none',
    	'opacity': 0.3
    	},
    	'events': {
    		'click': function(){
    			this.terminate();
    		}.bind(this),
    	
    		'mouseover': function(){
    			this.setStyles({'opacity': 0.8});
    		},
    		
    		'mouseout': function(){
    			this.setStyles({'opacity': 0.3});
    		}
    	}
    	});
    	    	
    	this.prev = new Element('a', {
    	'href': 'javascript:void(0);',
    	'styles' : {
    	'background': 'url(/js/assets/mcc-gallery/prev.png) no-repeat 0 0',
    	'width' : 34,	
    	'height' : 31,
    	'display':'block',
    	'float': 'left',
    	'margin' : '0',
    	'padding' : '0',
    	'outline' : 'none',
    	'opacity': 0.3
    	},
    	'events': {
    		'mouseover': function(){
    			this.setStyles({'opacity': 0.8});
    		},
    		'mouseout': function(){
    			this.setStyles({'opacity': 0.3});
    		}
    	}
    	});
    		
    	this.next = new Element('a', {
    	'href': 'javascript:void(0);',
    	'styles': {
    	'background': 'url(/js/assets/mcc-gallery/next.png) no-repeat 100% 0',
    	'width': 34,	
    	'height': 31,
    	'display':'block',
    	'float': 'left',
    	'margin': '0',
    	'padding': '0',
    	'outline': 'none',
    	'opacity': 0.3
    	},
    	'events': {
    		'mouseover': function(){
    			this.setStyles({'opacity': 0.8});
    		},
    		'mouseout': function(){
    			this.setStyles({'opacity': 0.3});
    		}
    	}
    	});
    	    	
    	$(document.body).adopt(this.viewport,this.frame);
    	this.controls.adopt(this.prev,this.next,this.close);    	
    }    
    
});