var hide_cover=true;

Event.observe(document, 'dom:loaded', function()
{
	(function(){

		// create cover - big black box
        var cover = new Element('div',
        {
            'id': 'cover'
        });
        cover.setStyle({
            'width': '100%'
        });
        cover.hide();
        $(document.body).insert({top: cover}); 
         
        // need this for IE to hide over select boxes
        var frame = new Element('iframe',
        {
        	'id': 'cover_frame',
        	'frameborder':'0'
        })
        frame.setStyle({
        	'position': 'absolute',
        	'left': '0px',
        	'top': '0px',
            'width': '100%',
            'height': '100%',
            'filter': 'alpha(opacity=0)',
            'display': 'block',
            'border' : 'solid red 1px;'
        });
		$(cover).insert({top: frame});

		//this is the popup holder that will help center the popup
        var table = new Element('div',
        {
            'id': 'nutritional_info-body'
        });
        table.setStyle({
       		'overflow' : 'visible'
        });
        table.hide();
        document.body.insert({bottom: table});

		//click events to hide the fade over when clicked anywhere on screen
        table.observe('click', function(e)
        {
        	
            if(hide_cover)
            {
            	$('body_bg').style.display='';
	            Event.stop(e);
	
	            new Effect.Parallel([
	              new Effect.Fade('cover', {sync: true, from: 0.8, to: 0}), 
	              new Effect.Fade('nutritional_info-body', {sync: true, from: 1, to: 0 }) 
	            ], { 
	              duration: 1.5
	            });
	        }
	        hide_cover=true;

        });
        /*cover.observe('click', function(e)
        {
            Event.stop(e);

            new Effect.Parallel([
              new Effect.Fade('cover', {sync: true, from: 0.8, to: 0}), 
              new Effect.Fade('nutritional_info-body', {sync: true, from: 1, to: 0 }) 
            ], { 
              duration: 1.5
            });

        });*/
	})();
});

function show_nutrients(product_code)
{   
	//reset the color to black incase we we're in printer friendly version
	$('cover').style.background='#000000';

	//we take the nutrition table and place it in the popup
	$('nutritional_info-body').innerHTML=$('nutrition_table_'+product_code).innerHTML;

	//position the body
	$('nutritional_info-body').setStyle({
       'top': (document.body.cumulativeScrollOffset()[1] + Math.floor(document.viewport.getDimensions().height*0.5) - Math.floor($('nutritional_info-body').getHeight()*0.5)  /* just to make it visually in the middle */) + 'px'
   	});
   	
   	//we want the greatest value for height
	var height=document.body.clientHeight>$('offset').cumulativeOffset()[1]?document.body.clientHeight:$('offset').cumulativeOffset()[1];
	height=window.innerHeight>height && window.innerHeight!=undefined?window.innerHeight:height;//must make sure window.innerHeight is defined here for IE
	
	//set the height
	$('cover').style.height=height + 'px';

	//start the effect
	new Effect.Parallel([
		new Effect.Appear('cover', {sync: true, from: 0, to: 0.8}), 
		new Effect.Appear('nutritional_info-body', {sync: true, from: 0, to: 1 }) 
	], { 
		duration: 1.5
	});
}

function printer_friendly()
{
	hide_cover=false;
	$('cover').style.background='#FFFFFF';
	$('cover').style.opacity='';
	$('cover').style.filter='';
	$('body_bg').style.display='none';
	window.print();
}
function close_all()
{
	hide_cover=true;
}