var imgroot = '/Portals/32428/images/psd-themes/';
var $fc, $ff, $pr, $pd, $pc, $pe, $pb;
// examples [[id, img], [id, img], ...]
var examples = new Array();
var exampleimages = new Array();

$(document).ready(function(){
    $fc = $('div#foxboro_body');
    $ff = $('div#foxboro_footer');
    $fc.append('<div id="popref"><div id="popupdiv"><image id="popupexample" border="0"></div></div>');
    $pd = $('div#popupdiv');
    $pr = $('div#popref');
    $pe = $('div#popupdiv img#popupexample');
    $pd.css('cursor', 'pointer');
    $pd.click(popup_hidescreen);
    $pe.click(popup_hidescreen);

    for(var i in examples){
        var id = i;
        var src = examples[i];
        var $btn = $('div#' + id + ' > img');
        exampleimages[id] = new Image();
        exampleimages[id].src = imgroot + examples[i];
        $btn.css('cursor', 'pointer');
        $('#popupdiv').css('height', $('body').outerHeight() + 'px');

        $btn.click(function(){
            
            $pb = $(this);
            var id = $pb.parent().attr('id');
            $pe[0].src = exampleimages[id].src 
            
            
        	var st = $(window).scrollTop();
		var wh = $('#popref').height();
		var ww = $('#popref').width();
		
		var ch = $('#popupexample').height();
		var cw = $('#popupexample').width()
		if(wh < ch){
                    var t = st;
                }else{
		    var t = ((wh - ch) / 2) + st;
                }
		var l = ((ww - cw) / 2);
		if(t < 0) t = 0;
		if(l < 0) l = 0;
		
//alert(ch + ' ' + wh + ' '  + t + ' ' + st + ' ' + (wh - ch));

                $('#popupexample').css('top', (t + 10) + 'px');
		$('#popupexample').css('left', l + 'px');
            popup_setscreen();
        
        });
   
    }

});

function popup_setscreen(){
   $pr.css('visibility', 'visible');
}

function popup_hidescreen(){
    $pr.css('visibility', 'hidden');
}