var design_id

$(document).ready(function() {
						   
					
				
					
	$('div.imgneu').click(function() {
								
								
		

									   
									var br=this.getBoundingClientRect()
									
									//var br=document.getElementById('shop').getBoundingClientRect()
									
/*alert("Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom)*/

                  var sr = document.getElementById('container').getBoundingClientRect()
              
			  /*var we = $(this).attr('href')*/
			  
			  //var we = this.getAttribute() 


		//Setup the modal window
		$('body').append('<div id="overlay"></div><div id="modal"><div id="modalInner"><object width="620" height="558" border="0" style="background: url(../images/stripe.png);"><param name="movie" value="./swf/loading.swf"><param name="salign" value="l">  <param name="scale" value="noscale"> <param name="wmode" value="transparent" /><embed src="./swf/loading.swf" width="620" height="558" border="0" wmode="transparent"></embed></object><div id="modalImageColumn"></div> <div id="modalMenuColumn"><a href="#" id="close" title="Close">Close</a><div id="modalTextColumn"></div><div id="innerseits"><iframe id="order" class="hidethis" src="order.html"></iframe></div><div id="purchase"><p class="price">Price 24,99 &euro; </p><div id="order_btn"></div></div></div><div class="clearing"></div></div></div>');
	
		var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }


//end
		if($.browser.msie && $.browser.version <= 6.0) {
			var windowHeight = $(document).height();
			$('#overlay').height(windowHeight);
		}
		
		$('#overlay').css('opacity', 0.5).fadeIn('fast');
		$('#modal').fadeIn('fast');
		
		//Position it in the viewport
		/*var scrollPos = $(window).scrollTop() + 50;*/		
		var scrollPosTop = br.top
			var scrollPosLeft =  sr.left
			
			var windowHeight = $(document).height();
			
		$('#modal').css('top',viewportheight/2-275 +'px');
		$('#modal').css('left',scrollPosLeft+'px');
		
		$(window).resize(function() {
								  
								  var sr = document.getElementById('container').getBoundingClientRect()
								  var scrollPosLeft =  sr.left
						
		$('#modal').css('left',scrollPosLeft+'px');
			  
								  
								  
								  
								  
								  });
		
		
	    
	
		
		//Handle the clicking of close button or clicking the background
		$('div#modal a#close,div#overlay').bind('click', function() {
																  
			$('div#modal').fadeOut('fast',function() {
				$('div#overlay').fadeOut('fast',function() {
					$(this).remove();							   
				});
				$(this).remove();							   
			});
			return false;
		});	
		
		//Get the image
		//var imgUrl = $(this).attr('href');
		
		var imgUrl = this.getAttribute('href'); 
	
		design_id = this.getAttribute('rel'); 
		
		 
		
		//$(this).fg.css("background-color", "blue");
		
		var who = $(this).children().children()
		   
		//var des = $(document).getElementById('order-area').attr('rel')
		
		//window.getElementById('design').value = design_id
	
	
		   
		/*$('div#modalImageColumn').append('<a href="./images/tee02zoom.jpg" class="zoom" title="Your Title"> <img src="./images/tee02.png"> </a>');
		
		
		
			displaymessage()*/
			
			$('div#modalImageColumn').append('<img src="'+imgUrl+'" alt=""  height="500px" id="ornament" width="574px" />');
			
		
		$('img#ornament').load(function() {
			$(this).fadeIn();								
		});
		
		$(this).children('.teeDescription').clone().appendTo('div#modalTextColumn');
		
		
		
		$('div#order_btn').click(function() {
										  
										  //$(this).addClass('hide')
										$(this).css('opacity', 0).fadeOut('slow');	
										$('iframe#order').removeClass('hidethis');
		});
		
			
		return false;
	});
	
	
	
});