/**
 * Opener for staticket POS map.
 * Opens the starticket POS map in a overlay div
 * Original code from: http://mustardamus.com/show-your-demos-like-a-champ-iframe-jquery-css3/
 *
 * The following libraries are used in this code:
 * - jQuery
 *
 * @copyright zeitgeist group AG $Date: 2010/02/03 10:22:12 $
 * @author $Author: frigidor $
 * @version $Revision: 1.1 $
 */

/*#########
 # EVENTS #
 ##########*/
$(document).ready(function() {
  //update the settings when calling this function
  function refreshSettings() {
    winWidth = $(window).width();
    winHeight = $(window).height();
    edgeSpace = 40;
    iframeWidth = winWidth - edgeSpace * 2;
    iframeHeight = winHeight - edgeSpace * 2;
  }

  //global vars that can be updated from the function above
  var winWidth, winHeight, edgeSpace, iframeWidth, iframeHeight;
  refreshSettings(); //initial settings on first load

  $('#posmapopener').click(function() { //bind a click event to the #demo link
    //append the overlay div with the iframe in it to the body and
    //set the initial height and width of the iframe
    $('body').append('<div id="posmap"><iframe src="'+map_url+'" width="'+iframeWidth+'" height="'+iframeHeight+'" scrolling="no" frameborder="0"></iframe><a href="#close" id="close" title="close" alt="close"></a></div>');

    //style the overlay div with static position, border and some CSS3 box shadow
    $('#posmap').css({
      'position'            : 'absolute',                   //fixed in the browser window
      'top'                 : edgeSpace+'px',               //the space from the top
      'left'                : edgeSpace+'px',               //the space from the left
      'background'          : 'white',                      //initial background will be white
      'max-height'          : iframeHeight+'px',            //remove a bottom border that the iframe produces
      'border'              : '1px solid black',
      'box-shadow'          : '0 0 '+edgeSpace+'px black',  //set the box shadow to black and blur
      '-moz-box-shadow'     : '0 0 '+edgeSpace+'px black',  //for gecko based browser such as firefox
      '-webkit-box-shadow'  : '0 0 '+edgeSpace+'px black'   //for webkit based browsers such as safari
    }).children('#close').css({ // Style the close button
      'position' : 'absolute',
      'top' : '0px',
      'left' : (iframeWidth-20)+'px',
      'display' : 'block',
      'width' : '20px',
      'height' : '20px',
      'background' : 'url(posmap/img/close.png)'
    }).click(function() { // Make the close button active
      $(this).parent().remove();
      return false;
    });
    
    window.scroll(0,0); //In case the user has scrolled down, this will bring the windows to the right position to show the map.
    
    return false; //dont follow the link
  });

  // Handle window resize
  $(window).resize(function() {
    refreshSettings();

    // Iframe resize
    if($('#posmap').length != 0) {
      $('#posmap iframe').css({
        'width' : iframeWidth+'px',
        'height' : iframeHeight+'px'
      });
    }
    // Move close button
    if($('#close').length != 0) {
      $('#close').css({
        'left' : (iframeWidth-20)+'px'
      });
    }
  });
});