window.addEvent('load', function() {
	//var popViews = new PopView();
});

var PopView = new Class({
	options: {
    	selector:'.album img',
		imgWidth:325,
		imgHeight:325,
		cropRatio:'1:1'
    },
	
	thumbs:null,
	popDiv:null,
	
	initialize: function(options){
        this.setOptions(options);
		this.thumbs = $(document.body).getElements(this.options.selector);
		this.popDiv = new Element('div', { 'class': 'popDiv'	}).inject( $(document.body) ,'inside').setStyles({'width':this.options.imgWidth,'height':this.options.imgHeight});
		this.arrow = new Element('div', { 'class': 'popDivArrow'	}).inject( this.popDiv ,'inside');
		this.image = new Asset.image().inject(this.popDiv,'inside');
		
		this.thumbs.each(function(item,index){
			
			//change this later!!
			var newsrc = item.src;
			
			var large = new Asset.image(newsrc).inject(this.popDiv,'inside').setStyle('display','none').set('width',this.options.imgWidth).set('height',this.options.imgHeight);
			$(item).store('largeImg', large);
			
			item.addEvents({
				
				'mousemove': function(e){
					e = new Event(e);
					this.over(e,item);					
				}.bind(this),
				
				'mouseenter': function(e){
					e = new Event(e);
					this.over(e,item);
					
					
				}.bind(this),
				
				'mouseleave':function(e){
					e = new Event(e);
					this.out(e);
				}.bind(this)
			});
		}.bind(this));

		this.popDiv.addEvents({
			'mouseenter':function(e){
				e = new Event(e);
				this.out(e);
			}.bind(this)
		})


    },
	
	out:function(e){
		this.popDiv.setStyles({'display':'none','left':0,'top':0});	
	},
	over:function(e,item){
		e.stop();
		
		var newsrc = item.src.replace('140',this.options.imgWidth).replace('140',this.options.imgHeight);
		
		//this.image.src = newsrc;
		$(document.body).getElements('.popDiv img').each(function(item,index){
			item.setStyle('display','none');
		});
		
		item.retrieve('largeImg').setStyle('display','block');
		
		
		var top = e.client.y - this.popDiv.getCoordinates().height + $(document.body).getScroll().y - 45-15;//minus 45 for arrow
		this.popDiv.setStyles({'display':'block','left':e.client.x,'top':top});	
	},
	
	

	getOrSetId: function(obj){
		if(!obj.id){
			var d = new Date();
			var milli = d.getMilliseconds().toString();
			var randomNumber = Math.floor(Math.random()*1000);
			if(obj.nodeName){
				obj.id = obj.nodeName.toString() + '-' + milli + randomNumber.toString();
			}else{
				obj.id = "element" + milli + randomNumber.toString();	
			}
		}
		return obj.id;
	} 
});
PopView.implement(new Options);
PopView.implement(new Events);