$(document).ready(function () {

   make_hidden_block();
   makePreviewActions();
});
function makePreviewActions()
{
  $('.goods_peview').each(function(){
    $(this).click(function(){
      // Создаем превьюшку для фоток
      var imageSrc  = $(this).attr('href');
      var goodsName = $('img',this).attr('alt');
      myDiv = $('#bigPic');
      myDivName = $('#bigPicCaption');
      $(myDiv).attr('src',imageSrc);
      $(myDivName).html(goodsName);
      
      var colour = $("div#overlay");
      colour.css({
        display: 'block',
        visibility: 'visible',
        position: 'fixed',
        width:  '100%',
        height: '100%',
        'z-index': 1

      });
  		colour.stop().fadeTo(500, .4)
      return false;
    })
  })
}
function make_hidden_block()
{
  var myDiv = $('<img>');
  var myDivName = $('<span>');
  var windowWidth     = $(window).width();
  var windowHeight    = $(window).height();

  
  myDiv.css({
    display: 'none',
    position: 'fixed',
    top: 0,
    left: 0,
    border: '1px silver solid',
    'z-index': 50
  });
  myDivName.css({
    display: 'none',
    position: 'fixed',
    top: 0,
    left: 0,
    border: '1px silver solid',
    'z-index': 50 ,
    'background-color': 'black',
    'color' : 'white',
    'font-weight' : 'bolder'
  });
  myDiv.attr('id','bigPic');
  myDivName.attr('id','bigPicCaption');
  
  myDiv.appendTo("body");
  myDivName.appendTo("body");
  
  $(myDiv).addClass('shadow');
  $(myDiv).load(function(){

    imageW  = $(myDiv).width();
    imageH  = $(myDiv).height();
    
    maxW  = imageW;
    maxH  = imageH;
    
    scaleW  = imageW/windowWidth;
    scaleH  = imageH/windowHeight; 
    scale   = 1;
    //alert('scaleH='+scaleH+' scaleW='+scaleW+' imageW='+ imageW +' imageH='+imageH) ;
    if(imageW > windowWidth || imageH > windowHeight) 
    {
      scale   = scaleH;
      if(scaleW > scaleH) scale = scaleW;
      
    }
    //alert(scale);

    $(this).css({
      top: (windowHeight - imageH/scale)/2,
      left: (windowWidth - imageW/scale)/2,
      'width':  imageW/scale + 'px'/*,
      'height': imageH/scale + 'px' */
    });
    $(this).fadeTo(1,0.2, function(){
      $(this).fadeTo(200,1);
    });
    $('#bigPicCaption').css({
      display: 'block',
      top: (windowHeight - $(this).height())/2,
      left: (windowWidth - $(this).width())/2,
      'z-index': '100'

    });
  });
  $(myDiv).click(function(){
    $(this).css({display: 'none', width: 'auto', height: 'auto'});
    
    $('#bigPicCaption').css({display: 'none'});
    var colour = $("div#overlay");
    colour.stop().fadeTo(100, 0, function(){
      colour.css({display: 'none'});
    })
  });
}