var mooThumb = new Class({
	Implements: [Events],
	loaded: false,
	popup: true,
	width: 100,
	height: 95,
	padding: 5,
	zoomSize:{
		w:640,
		h:320
	},
	styles:{
		def:{
			'width': '100px',
			'height': '95px',
			'padding': '5px',
			'float':'left',
			'text-align':'center',
			'vertical-align':'middle',
			'border':'none'
		},
		simple:{
			'width': '100px',
			'height': '95px',
			'padding': '5px',
			'margin': '0px',
			'float':'left',
			'text-align':'center',
			'vertical-align':'middle',
			'border':'none'
		}
	},
	initialize: function(options){
		if('container' in options) this.container = options.container;
		if('file' in options) this.file = options.file;
		if('simple' in options) this.simple = options.simple;
		if('popup' in options) this.popup = options.popup;
		if('url' in options) this.url = options.url;
		if('phpurl' in options) this.phpurl = options.phpurl;
		// NEED A THUMB FOR TOO BIG IMAGES
		var atmp = this.phpurl.split('_big');
		if(atmp.length > 1){
			this.phpurl = atmp[0]+"_big_thumb"+atmp[1];
		}
		if('parent' in options) this.parent = options.parent;
		if('width' in options) this.width = options.width;
		if('height' in options) this.height = options.height;
		if('padding' in options) this.padding = options.padding;
		this.styles.def['width'] = this.width+"px";
		this.styles.def['height'] = this.height+"px";
		this.styles.def['padding'] = this.padding+"px";
		this.styles.simple['width'] = this.width+"px";
		this.styles.simple['height'] = this.height+"px";
		this.styles.simple['padding'] = this.padding+"px";
		this.d = new Element('div');
		if(this.simple){
			this.d.setStyles(this.styles.simple);
		} else {
			this.d.setStyles(this.styles.def);
		}
		this.d.setStyles({
			'background-image':'url('+this.parent.baseUrl+this.parent.loader+')',
			'background-position':'50% 50%',
			'background-repeat':'no-repeat',
			
		});
		this.a = new Element('a',{'href':'javascript:void(0);'});
		this.img = new Element('img',{
			'src':'',
			'width':this.simple?this.width+'px':'auto',
			'height':this.simple?this.height+'px':'auto',
			/*'alt':'click here to open',*/
			'id':'thumb',
			'border':'none',
			styles:{
				'margin-top':this.simple?'0px':'20px'
			}
		});
		this.d.inject(this.container);
		this.a.inject(this.d);
		//this.loadThumb();
	},
	setEvents: function(){
		if(this.popup) this.img.addEvent('click',this.thumbClick.bind(this));
		this.d.addEvent('mouseenter',this.thumbMouseEnter.bind(this));
		this.d.addEvent('mouseleave',this.thumbMouseLeave.bind(this));
	},
	loadThumb: function() {
		this.img.inject(this.a);
		this.tmpimg = new Asset.image(this.phpurl, {onload: this.imageLoaded.bind(this)});
	},
	imageLoaded: function() {
		this.img.set('src',this.phpurl);
		this.img.setStyles({'width':this.simple?this.width:this.parent.options.thumb_width,
						   'height':this.simple?this.height:this.parent.options.thumb_height});
		this.d.setStyles({
			'background-image':'none'
		});
		this.setEvents();
		if(!this.simple){
			var _o = $(this.img).reflect({
				height:this.parent.options.thumb_reflection_height,
				opacity:this.parent.options.thumb_reflection_startopacity
			},0);
			this.reflection = _o.ref;
			this.reflection.setStyle('margin-top','-'+this.parent.options.thumb_transition_offset+'px');
			this.tween = new Fx.Tween(this.img,this.parent.thumbOptions);
			this.reflectiontween = new Fx.Tween(this.reflection,this.parent.thumbOptions);
		}
		this.loaded = true;
		this.parent.loadNextThumb();
	},
	toggleThumbState: function(t){
		if(!this.simple)
		{
			if(t){
				this.tween.start('margin-top', '0');
				this.reflectiontween.start('margin-top','0');
			} else {
				this.tween.start('margin-top', this.parent.options.thumb_transition_offset+'px');
				this.reflectiontween.start('margin-top','-'+this.parent.options.thumb_transition_offset+'px');
			}
		}
	},
	zoomLoaded: function(){
		this.zoomImage = this.tmpzoom;
		//this.zoomImage.setStyles({'width':'320px','height':'240px'});
		this.zoomImage.inject(this.zoomDiv);
		var w = 640;
		var h = 480;
		if(this.zoomImage.getSize().x < w) w = this.zoomImage.getSize().x;
		this.stickyDiv.setStyles({'margin-left':'-'+(w/2)+'px','margin-top':'-'+(h/2)+'px'});
		this.zoomBar.setStyles({
			'background':'#383838',
			'border':'1px solid #383838',
			'width':w+'px',
			'height':'20px'/*,
			'margin-left':'-'+(w/2)+'px',
			'margin-top':'-'+(h/2-20)+'px'*/
		});
		//this.zoomDiv.setStyles({'border':'1px solid #000000','width':w+'px','height':h+'px','overflow':'hidden','margin-left':'-'+(w/2)+'px','margin-top':'-'+(h/2)+'px'});
		this.zoomDiv.setStyles({'border':'1px solid #383838','width':w+'px','height':h+'px','overflow':'hidden'});
		this.zoomDiv.addEvent('mousemove',function(ev) {
			var ev = new Event(ev);
			var dp = this.zoomDiv.getPosition();
			var ds = this.zoomDiv.getSize();
			var is = this.zoomImage.getSize();
			var mouse_x = ev.client.x+window.getScrollLeft();
			var mouse_y = ev.client.y+window.getScrollTop();
			//var left = Math.floor((p.x - mouse_x)/640*s.x);
			//var top = Math.floor((p.y - mouse_y)/480*s.y);
			var left = Math.floor((dp.x - mouse_x)/ds.x*(is.x-ds.x));
			var top = Math.floor((dp.y - mouse_y)/ds.y*(is.y-ds.y));
			if(left > 0) left = 0;
			if(top > 0) top = 0;
			if(is.x <= ds.x) left = 0;
			//console.log('left = '+left+', top = '+top);
			this.zoomImage.setStyles({'margin-top':top+'px','margin-left':left+'px'});
		}.bind(this));
		this.zoomDiv.addEvent('click',function(e){
			this.sticky.destroy();
		}.bind(this));
	},
	loadZoom: function(){
		this.stickyDiv = new Element('div');
		this.zoomBar = new Element('div',{
			html:'<span style="color:#FFFFFF;padding:5px;font-size:10px">click on the image to close</span>',
			styles:{
				'text-align':'center'
			}
		}).inject(this.stickyDiv);
		this.zoomDiv = new Element('div').inject(this.stickyDiv);
		this.sticky = new StickyWin({
		  content: this.stickyDiv,
		  //offset: {x: -320, y: -240},
		  zIndex:999999999
		});
		this.tmpzoom = new Asset.image(this.url, {onload: this.zoomLoaded.bind(this)});
	},
	// EVENTS
	thumbClick: function() {
		this.loadZoom();
	},
	thumbMouseEnter:  function() {
		this.toggleThumbState(1);
	},
	thumbMouseLeave:  function() {
		this.toggleThumbState(0);
	}
});