/* ***************************************** *
*  MK BOX (C) Kolia Franceschi               *
*  http://www.koliafranceschi.com            *
* ------------------------------------------ *
* ////////////////////////////////////////// *
*  <div class='mk-box'>                      *
*    <p id='mk-box-close'>click anywhere</p> *
*    <div id='mk-box-box'>foo</div>          *
*  </div>                                    *
* ////////////////////////////////////////// *
* ****************************************** */
$(document).ready(function(){
  // define (w)idth and (h)eight of the document
  var w = $(window).width();
  var h = $(window).height();
// retrieve datas
  var mk_box_close   = $('.mk-box').children('#mk-box-close').html();
  var mk_box_content = $('.mk-box').children('#mk-box-box').html();
// transform into box
  // set background
    $('.mk-box').width(w + "px").height(h + "px").html("<div id='mk-box-background'></div>");
    $('#mk-box-background').width(w + "px")
                           .height(h + "px");
  // set text at the top of the blackened zone
    $('.mk-box').append("<div id='mk-box-close'><p>" + mk_box_close + "</p></div>");
    $('#mk-box-close').width(w + "px")
                       .css('top', (h/8) + "px");
  // set content
    var mk_box_close_button = "<div id='mk-box-close-button'><span>X</span></div>";
    var mk_box_box          = "<div id='mk-box-box'>" + mk_box_content + "</div>";
    $('.mk-box').append("<div id='mk-box-content'>" + mk_box_close_button + mk_box_box + "</div>");
    $('#mk-box-content').width((w/2) - 20 + "px")
                        .height((h/2) - 20 + "px")
                        .css('top',((h/4) + "px"))
                        .css('left',((w/4) + "px"));
    // manage dynamic actual box (w)idth and (h)eight
    $('#mk-box-box').width("100%");
    $('#mk-box-box').height("100%");
    var mk_box_box_w = $('#mk-box-box').width();
    var mk_box_box_h = $('#mk-box-box').height() - 25;
    $('#mk-box-box').width(mk_box_box_w - 2 + "px")
                    .height(mk_box_box_h + "px");
// exit methods
function mk_box_remove(){
  $('#mk-box-close').remove();
  $('#mk-box-close-button').children('span').animate({opacity: 0},200);
  $('#mk-box-box').animate({opacity: 0},500);
  $('#mk-box-background').animate({opacity: 0, width: "0px", height: "0px", left: (w/2) + "px", top: (h/2) + "px"},700,function(){$('.mk-box').remove();});
}
  // blackened zone
    $('#mk-box-background').live('click',function(){mk_box_remove();});;
  // text zone
    $('#mk-box-close').live('click',function(){mk_box_remove();});
  // close button
    $('#mk-box-close-button').live('click',function(){mk_box_remove();});
  // hovering "close" zones
    $('#mk-box-background').hover(function(){$(this).css('cursor','pointer');});
    $('#mk-box-close').hover(function(){$(this).css('cursor','pointer');});
    $('#mk-box-close-button').children('span').hover(function(){
      $(this).css('cursor','pointer')
             .css('background-color','white')
             .css('border','1px #dddddd solid');
    },function(){
      $(this).css('background-color','#dddddd')
             .css('border','1px white solid');
  
    });
});