window.addEvent('domready', function(){
				
		var set_img_modal = function (imgit,sider)		{
					var new_img = imgit.get('src').replace('thumbnails','width400');
					
					if(sider == 'front')
						var osider = 'back';
					else
						var osider = 'front';
						
					var new_img = new_img.replace(osider,sider);
					var new_modal = new Element('div', {'id':'card', 'html':'<center><img src="'+new_img+'" alt="Card 1 Front" /></center>'});		
					new_modal.inject($(document.body),'top')
					
					var close_button = new Element('div', {'class':'x','html':'<span>Close This Window</span>'});
					close_button.inject(new_modal,'top')
					
					var nav_arrows = new Element('div', {'class':'arrows','html':'<span class="arrowL"></span><span class="arrowR"></span>'});
					nav_arrows.inject(new_modal,'bottom')
					var new_img_right = imgit.getParent('span').getNext('span img');
					var new_img_left = imgit.getParent('span').getPrevious('span img');
					
					
					if(new_img_right == null  && sider == 'back'){
							$$('span.arrowR').destroy();		
						}
					if(new_img_left == null && sider == 'front'){
						
							$$('span.arrowL').destroy();		
						}
					$$('span.arrowR').addEvent('click',function(){
							new_modal.destroy();
							
							if(sider == 'front')
								set_img_modal(imgit,'back')
							else
								set_img_modal(new_img_right,'front')
						
					});
					$$('span.arrowL').addEvent('click',function(){
							new_modal.destroy();
							
							if(sider == 'front')
								set_img_modal(new_img_left,'back')
							else
								set_img_modal(imgit,'front')
							//set_img_modal(new_img_left)
						
					});
					var myFx = new Fx.Scroll(window).toElement(new_modal);
					close_button.addEvent('click',function(modal){					
						new_modal.destroy();
					});
			new_modal.fade('in');
		}
		$$('span img').each(function(i){
			//i.addEvent('click',function(img){
			i.addEvents({			
				click: function(img){  										
					set_img_modal(i,'back');
					
				}, mouseover: function(a){   					
					
					var new_imgp = i.get('src').replace('thumbnails','width240');
					var new_preview = new Element('div', {'id':'imgbox','class':'previmg','html':''});
					//
					var i_pos = i.getPosition();
										
					new_preview.inject($(document.body),'top')
					//var size = new_preview.getElement('img').getSize();
					
					var myEffect = new Fx.Morph(new_preview, {
						duration: 500,
						transition: Fx.Transitions.Sine.easeOut,
						onComplete: function(){
						var new_img = new Element('img', {'src':new_imgp, 'alt':'Card 1 Front'});
						new_img.fade('hide')
						new_img.inject(new_preview,'top')
						new_img.fade('in')
						}
					});
				var location = i.getPosition()
					if((location.y-170) < 0)
						var pos_y = 10
					else
						var pos_y = (location.y-170); 
						
					 myEffect.start({
						    'left': [location.x-30,(location.x-275)], 
						    'width': [0, 240],
						    'top' : [location.y,pos_y],
						    'height': [0, 340],
						    'opacity': [0,1]
						});
					
						var posit = new_preview.getPosition();
					
					//alert(location.y-280)
					var scrl = i.getScrollSize();
					//alert(location.y+': '+(posit.y-280))
					
					/*
					new_preview.getElement('img').tween('height', [0,330]);					
					new_preview.getElement('img').tween('width', [0,240]);					
					
					new_preview.fade('in');
					var prev_pos = new_preview.getPosition();
					
					if((i_pos.y-340) < 0)
						var pos_y = 10
					else
						var pos_y = (i_pos.y-360); */
						//above here
						
					/*
					if((i_pos.x+120) > 890)
						var pos_x = (i_pos.x-270)
					else
						var pos_x = (i_pos.x+100);
					*/
				/*	var pos_x = (i_pos.x-270)
					new_preview.setPosition({x: pos_x, y: pos_y})				*/
					
					/*$(document.body).addEvent('mousemove',function(event){
					    new_preview.setPosition({x: (event.page.x+10), y: (event.page.y-340)})				
					});*/
					
					
    		}, mouseout: function(a){    			
    			var location = i.getPosition()
    			var img_container = $('imgbox');
    			img_container.dispose();									
					
    		}
			});
		})
	if(today_dt > 0)
	set_img_modal($$('span img')[(today_dt-1)],'back');
});