;(function($) {
  // plugin code here, use $ as much as you like
  $.fn.quikViewRemove = function() {
    $('#_quikviewOverlay, #_quikviewIMG').fadeOut(200,function() {
      $(this).remove();
    });
    return true;
  }
  $.fn.quikView = function (options) {
    $(this).click(function (e) {
      e.preventDefault();
      // create overlay     
      $(this).blur();   

      if (!$(this).attr('id')) {
        $(this).attr('id','_qv'+(+new Date()));
      }
      var id = $(this).attr('id');
      var qvl = $('<div></div>')
          .attr('id','_quikviewLoad')
          .css('position','relative')
          .css('top',($(window).height())/2)
          .css('left',($(window).width())/2);
      $('<div></div>')
          .css('position','fixed')
          .css('top','0')
          .css('left','0')
          .css('width','100%')
          .css('height','100%')
          .css('background','black')
          .append(qvl)
          .attr('id','_quikviewOverlay')
          .fadeTo(0,0)
          .appendTo('body')
          .data('useid',id)
          .fadeTo(200,.7,function () {
            var newImg = new Image();
            newImg.src = $('#'+$(this).data('useid')).attr('href');
            var imageHeight = newImg.height;
            var imageWidth = newImg.width;
            $('<img id="_quikviewIMG" src="'+$('#'+$(this).data('useid')).attr('href')+'" />').one('load',function () {
              $('#_quikviewLoad').remove();
              imgTop = (($(window).height()) - imageHeight) / 2;
              imgLeft = ($(window).width() - imageWidth) / 2;
              $(this).css('top',imgTop)
                .css('left',imgLeft)
                .css('position','fixed')
                .fadeTo(0,0)
                .appendTo('body')
                .click(function () {
                  $.fn.quikViewRemove();
                })
                .fadeTo(200,1);
            });
          })
          .click(function() {
              $.fn.quikViewRemove();
          });


    });
  }
})(jQuery);

$(function () {
  $('a.preview, #webcam-homepage > div, #webcams > div').quikView();
  $('#webcam-homepage > dciv').click(function () {

      var id = $(this).attr('id')
      var qvl = $('<div></div>')
          .attr('id','_quikviewLoad')
          .css('position','relative')
          .css('top',window.innerHeight/2)
          .css('left',window.innerWidth/2);
      $('<div></div>')
          .css('position','fixed')
          .css('top','0')
          .css('left','0')
          .css('width','100%')
          .css('height','100%')
          .css('background','black')
          .append(qvl)
          .attr('id','_quikviewOverlay')
          .fadeTo(0,0)
          .appendTo('body')
          .data('useid',id)
          .fadeTo(200,.7,function () {
            $('<img id="_quikviewIMG" src="'+'/snowfeed/latest.jpg'+'" />').one('load',function () {
              $('#_quikviewLoad').remove();
              imgTop = (window.innerHeight - this.height) / 2;
              imgLeft = (window.innerWidth - this.width) / 2;
              $(this).css('top',imgTop)
                .css('left',imgLeft)
                .css('position','fixed')
                .fadeTo(0,0)
                .appendTo('body')
                .click(function () {
                  $.fn.quikViewRemove();
                })
                .fadeTo(200,1);
            });
          })
          .click(function() {
              $.fn.quikViewRemove();
          });


        newTop = (window.innerHeight - 288) / 2;
        newLeft = (window.innerWidth - 352) / 2;
    $(this).css('position','absolute').animate({
        top: newTop,
        left: newLeft,
        width: '352px',
        height: '288px',
        backgroundPosition: '0px 0px',
        marginLeft: '0px'
      });

  });
})