var ViewBox = {
	_timer: null,
	_delay: 600,
	
	initialize: function(){
		
		var viewbox = new Element('div', {id:'viewbox', background:'black'} );
		//viewbox.insert( new Element('h5', {id:'viewbox-title'}).update('Product thumbnail') );
		
		$( $$('body').shift() ).insert(viewbox);
		
		$('viewbox').setStyle({position:'absolute', display:'none', zIndex:'100'});
		
		$$('a[rel=viewbox]').each( function(element) {
			element.setStyle({display:'block', padding:'1px'});
			
			Event.observe(element, 'mouseover', function(event){ 
				ViewBox._timer = setTimeout( function(event){
					viewbox.insert( new Element('img', {id:'viewbox-image', src:'/images/loading.gif'}) );
					
					var pointer = {x:(Event.pointerX(event) + 10) + 'px', y:(Event.pointerY(event) - 30) + 'px'};
					
					var pointer = element.cumulativeOffset();
					
					$('viewbox').setStyle({top:pointer.top + element.offsetHeight, left:pointer.left, display:'block'});
					
					var stub = new Element('img', {id:'viewbox-image-stub', src:'/php/image/product-thumbnail.php?viewbox=1&pid=' + element.id});
					stub.setStyle({display:'none'});
					
					Event.observe(stub, 'load', function(){
						$('viewbox-image').remove();
						this.id = 'viewbox-image';
						new Effect.Appear(this, {from:0, to:1, duration:0.3});
					});
					
					$('viewbox').insert(stub);
					//$('viewbox-image').src = "/php/image/product-thumbnail.php?pid=" + element.id;
				}, ViewBox._delay);
			});
				
			Event.observe(element, 'mouseout', function(){
				clearTimeout(ViewBox._timer);
				
				ViewBox._timer = null;
				
				$('viewbox').setStyle({display:'none'});
				if( $('viewbox-image') ) $('viewbox-image').remove();
				if( $('viewbox-image-stub') ) $('viewbox-image-stub').remove();
			});
		});
	}
};


/***********************************************************
 * 
 *  oud menu javascript 
 * 
 ***********************************************************/
var activeSm = null;
var activePn = null;

function dropDownMenu(parent){
	
	//hide already active submenu
	if(activeSm){
		activeSm.style.display = "none";
		activeSm 			= null;
		activePn.className 	= "";
	}
	
	if(!parent) return;
	parent.blur();
	
	var id	= parent.id;
	var mid	= "dropdown_" + id;
	var sm	= $(mid);
	
	activeSm = sm;
	activePn = parent;
	
	//position and display submenu
	sm.style.top		= ((parent.parentNode.offsetTop + 22) - 3) + "px";
	sm.style.left		= (parent.offsetLeft) + "px";
	sm.style.display	= "block";
	
	parent.className	= "hover";
	
	//hide active submenu on any mouseUp
	Event.observe(document, "mouseup", function(){
		dropDownMenu(null);
	});
}

Event.observe( window, 'load', function(){
	var shopElement = $('shop');
	if( shopElement ){
		new Draggable('shop', {handle:'shop-title'});
	}
	
	ViewBox.initialize();
});