Event.observe(document, 'dom:loaded', listing);   

Window.prototype.open = function(h, w, item, detailHeight){

	win = this;

    if (this.isMinimized() || this.resizing)
      return;
  
    if (Prototype.Browser.IE && this.heightN == 0)
      this._getWindowBorderSize();
      
    if (this.storedLocation != null) {
      this._restoreLocation();
      if(this.iefix) 
        this.iefix.hide();
    }
    else {
      this._storeLocation();
      Windows.unsetOverflow(this);
      
      var windowScroll = WindowUtilities.getWindowScroll(this.options.parent);
      var pageSize = WindowUtilities.getPageSize(this.options.parent);    
      var left = 0;
      var top = 0;
      
      if (this.options.parent != document.body) {
        windowScroll =  {top:0, left:0, bottom:0, right:0};
        var dim = this.options.parent.getDimensions();
        pageSize.windowWidth = dim.width;
        pageSize.windowHeight = dim.height;
        top = 0; 
        left = 0;
      }
      
      if (this.constraint) {
        pageSize.windowWidth -= Math.max(0, this.constraintPad.left) + Math.max(0, this.constraintPad.right);
        pageSize.windowHeight -= Math.max(0, this.constraintPad.top) + Math.max(0, this.constraintPad.bottom);
        left +=  Math.max(0, this.constraintPad.left);
        top +=  Math.max(0, this.constraintPad.top);
      }
      
      var width = pageSize.windowWidth - this.widthW - this.widthE - (2 * left);
      var height= pageSize.windowHeight - this.heightN - this.heightS - (2 * top);

      var scrollLeft = windowScroll.left;
      var scrollTop = windowScroll.top;

	  var t = (pageSize.windowHeight - h) / 2 + scrollTop;
	  var t = 20 + scrollTop;
	  var l = (pageSize.windowWidth - w) / 2 + scrollLeft;

      if (this.useLeft && this.useTop && Window.hasEffectLib && Effect.ResizeWindow) {
        new Effect.ResizeWindow(this, t, l, w, h, {
        	duration: Window.resizeEffectDuration, 
        	afterFinish: function() {

				new Ajax.Request(item.href, {
				  method: 'get',
				  onComplete: function(transport) {
				  	win.setHTMLContent(transport.responseText);
				  	win.updateHeight();
					$$('a.itemOtherImage').each(function(link) {
						link.onclick = function() {return false;};
				  		link.observe('click', function(event) {
								new Ajax.Updater($('main'), link.href, {
								  method: 'get',
								  onSuccess: setTimeout("win.updateHeight()", 500)
								});								
				  			Event.stop(event);
				  		}, true);
					});				  	
				  	/*$('detailOn').onclick = function() {return false;};
						$('detailOff').onclick = function() {return false;};
						$('detailOn').observe('click', function(e) {
							win.setSize(w, h + detailHeight, true);
							new Effect.Appear('detail',{
								afterFinish: function() {	
									$$('a.itemOtherImage').each(function(link) {
											link.onclick = function() {return false;};
								  		link.observe('click', function(event) {
												new Ajax.Updater($('main'), link.href, {
												  method: 'get'
												});								
								  			Event.stop(event);
								  		}, true);
									});								
								}	
							});		
							Event.stop(e);
						}, true);
						$('detailOff').observe('click', function(e) {
							
							new Effect.Fade('detail',{
								afterFinish: function() {	
									win.setSize(w, h, true);
								}	
							});
							Event.stop(e);
						}, true);	
						*/			    
					}
				});
				        		
         	}
        });
      }
      else {
        this.setSize(width, height);
        this.element.setStyle(this.useLeft ? {left: left} : {right: left});
        this.element.setStyle(this.useTop ? {top: top} : {bottom: top});
      }
        
      this.toFront();
      if (this.iefix) 
        this._fixIEOverlapping(); 
    }
    this._notify("onMaximize");

    // Store new location/size if need be
    this._saveCookie()
};

function listing(event){
	
	var offset = 0;
	var height = 100;
	var width = 800;
	var detailHeight = 150; 
	/*if($('items'))
	{
		new Effect.Appear($('items'));
	}*/
	
	if($('previous'))
	{
		function previousItems(event)
		{	
			new Effect.Fade($('items'),{
				afterFinish: function() {
					new Ajax.Updater('listing', $('previous').href, {
					  onComplete: function() {
						offset -= limit;
						new Effect.Appear($('items'));	
						if($('previous').hasClassName('active'))
				  		{
				  			$('previous').observe('click', previousItems, true);
				  			
				  		}
				  		$('previous').onclick = function() {return false;};
						if($('next').hasClassName('active'))
				  		{				  		
							$('next').observe('click', nextItems, true);
							
						}
						$('next').onclick = function() {return false;};
						observeItems();	    							  	
					  },
					  parameters: {offset: offset - limit}
					});				
				}
			});
			Event.stop(event);
		}
		if($('previous').hasClassName('active'))
  		{		
			Event.observe($('previous'), 'click', previousItems, true);
		}
		$('previous').onclick = function() {return false;};
	}
	if($('next'))
	{
		function nextItems(event)
		{
			new Effect.Fade($('items'),{
				afterFinish: function() {	
					new Ajax.Updater('listing', $('next').href, {	
					  onComplete: function() {
						offset += limit;	
						new Effect.Appear($('items'));	
						if($('previous').hasClassName('active'))
				  		{
				  			$('previous').observe('click', previousItems, true);
				  		}
				  		$('previous').onclick = function() {return false;};
						if($('next').hasClassName('active'))
				  		{				  		
							$('next').observe('click', nextItems, true);
						}
						$('next').onclick = function() {return false;};
						observeItems();	  		  	
					  },
					  parameters: {offset: offset + limit}
					});
				}	
			});
			Event.stop(event);	
		}
		if($('next').hasClassName('active'))
  		{		
			Event.observe($('next'), 'click', nextItems, true);
		}
		$('next').onclick = function() {return false;};
	}

	$$('.listingItem').each(function(item) {
		item.hide();
		new Effect.Appear(item, {
			duration: 1.5,
			queue: 'end'
		});
	});

	$$('.scale').each(function(item) {
		new Effect.Scale(item, 1300,{
			duration: 1,
			queue: 'end',
			scaleX: false
		});
	});

	$$('.appear').each(function(item) {
		item.hide();
		new Effect.Appear(item, {
			duration: 1.5,
			queue: 'end'
		});
	});

	$$('.labelItem').each(function(item) {
	
		item.onclick = function() {return false;};
		item.observe('click', function(event) {
			
			Event.stop(event);
		}, true);		
		/*
		var startStyle = {
   			top: item.getStyle('top'),
		    left: item.getStyle('left') 
		};

		var endStyle = {
   			top: startStyle.top - 10,
		    left: startStyle.left
		};
*/
		item.observe('mouseover', function(event) {
			siblings = item.nextSiblings();
			element1 = siblings[1];
			element2 = siblings[2];
			new Effect.Appear(element1, {		
				duration: 0.5,
				to: 0.7,
				queue: {position: 'end', scope: 'myscope' + item.id, limit: 2}				
			});
			new Effect.Appear(element2, {		
				duration: 0.5,
				queue: {position: 'end', scope: 'myscope2' + item.id, limit: 2}				
			});			
			Event.stop(event);
		}, true);
		
		item.observe('mouseout', function(event) {
			siblings = item.nextSiblings();	
			element1 = siblings[1];
			element2 = siblings[2];
			new Effect.Fade(element1, {
				duration: 0.5,			
				from: 0.7,							
				queue: {position: 'end', scope: 'myscope' + item.id, limit: 2}													
			});
			new Effect.Fade(element2, {
				duration: 0.5,										
				queue: {position: 'end', scope: 'myscope2' + item.id, limit: 2}													
			});			
			Event.stop(event);
		}, true);
				
	});

	
	function observeItems()
	{
		
		$$('a.item').each(function(item) {
				item.onclick = function() {return false;};
	  		item.observe('click', function(event) {
	  		/*
	  			$$('.labelItem').each(function(itemObserved) {
	  				itemObserved.stopObserving('mouseover');
	  				//itemObserved.hide();
	  			});*/
	  			win = new Window({
	  				className: "alcyonis", 
	  				title: '', 
	  				destroyOnClose: true, 
	  				recenterAuto: true,
	  				showEffect: Element.show,
	  				draggable: false,
	  				minimizable: false,
	  				maximizable: false,
	  				height: 100,
	  				width: 0
	  			}); 
	  			win.setHTMLContent('LOADING');
				win.setZIndex(500);
				win.showCenter(true);
				win.open(height, width, this, detailHeight);	
	  			  			
	  		Event.stop(event);
	  		}, true);
		});
	}	
	observeItems();
}