// LETS DO SOME NICE BROWSER DETECTION FOR MOST COMMON USED BROWSERS

// EXAMPLES:
// Opera 11              = Opera/9.80 (Windows NT 5.2; U; en) Presto/2.7.62 Version/11.01
// Firefox 3             = Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1 ( .NET CLR 3.5.30729) 
// Safari 5              = Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1
// Google Chrome 9       = Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13
// Internet Explorer 6   = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; GTB6.6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) 
// Internet Explorer 7   = Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; GTB6.6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) 
// Internet Explorer 8   = Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; GTB6.6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) 

var OP  = navigator.userAgent.indexOf('Opera/')   != -1;
var FF  = navigator.userAgent.indexOf('Firefox/') != -1;
var SF  = navigator.userAgent.indexOf('Safari/5') != -1;
var GC  = navigator.userAgent.indexOf('Chrome/')  != -1;
var IE  = navigator.userAgent.indexOf('MSIE ')    != -1;
var IE6 = navigator.userAgent.indexOf('MSIE 6.')  != -1;
var IE7 = navigator.userAgent.indexOf('MSIE 7.')  != -1;
var IE8 = navigator.userAgent.indexOf('MSIE 8.')  != -1;

// getting the browser content are size
var size = gobo_viewport();
var vpWidth = size.ViewportWidth;
var vpHeight = size.ViewportHeight;


// MAIN LIGHTBOX FUNCTION

function gobo(gbOption, gbContent, gbTitle, gbLight, gbWidth){
// SET THE WIDTH OF THE DISPLAY
  if(!gbWidth) var gbWidth = 500;
  
  if(gbOption == 'show'){
// scroll page to the top for IE issues .. bleah :(
    scroll(0,0);
    
// create menu bar
    NavBox = document.createElement('div');
    NavBox.setAttribute('id','NavBox');
    document.getElementsByTagName('body')[0].appendChild(NavBox);
    
// create lightbox
    NewBox = document.createElement('div');
    NewBox.setAttribute('id','NewBox');
    document.getElementsByTagName('body')[0].appendChild(NewBox);
    
// create display holder | used for vertical cliegn
    NewBoxHolder = document.createElement('div');
    NewBoxHolder.setAttribute('id','NewBoxHolder');
    document.getElementById('NewBox').appendChild(NewBoxHolder);
    
// create loader
    if(IE6 != true) {
      NewBoxLoader = document.createElement('div');
      NewBoxLoader.setAttribute('id','NewBoxLoader');
      document.getElementById('NewBoxHolder').appendChild(NewBoxLoader);
    }
    
// create display
    NewBoxDisplay = document.createElement('div');
    NewBoxDisplay.setAttribute('id','NewBoxDisplay');
    document.getElementById('NewBoxHolder').appendChild(NewBoxDisplay);
    document.getElementById('NewBoxDisplay').style.height = "auto";
    
// we will resize the display to our width then left value
    document.getElementById('NewBoxDisplay').style.width = gbWidth + "px";
    
// reposition display based on browser viewport and user fixed size
    gobo('resize', '', '', '', gbWidth);
    
    if(IE6 == true) {
      document.getElementById('NewBox').style.width = vpWidth + "px";
      document.getElementById('NewBox').style.height = vpHeight + "px";
    }
    
// if we display thumbnails add divs to hold the 3 thumbs and their activator links
    ContentNav = '';
    if(gbLight == 1) {
      document.getElementById('NewBox').style.backgroundImage = "url('images/common/gobo_overlay.png')";
      
      // separate thumbs variables
      gbContentThumb = "see/" + gbContent;
      gbContentHalf = "half/" + gbContent;
      gbContentFull = "full/" + gbContent;
      
      // detect and display from cache
      gbCache = gbContent.search("cache/");
      if(gbCache == 0) {
        gbContentMain = gbContent.replace("free-", "TYPE-");
        gbContentMain = gbContentMain.replace("see-", "TYPE-");
        
        gbContentThumb = gbContent;
        gbContentHalf = gbContentMain.replace("TYPE-", "half-");
        gbContentFull = gbContentMain.replace("TYPE-", "full-");
      }
      ContentNav = ContentNav + '<a onclick="gobo_preload(\'' + gbContentThumb + '\');">Thumb</a>';
      ContentNav = ContentNav + '<a onclick="gobo_preload(\'' + gbContentHalf + '\');">50%</a>';
      ContentNav = ContentNav + '<a onclick="gobo_preload(\'' + gbContentFull + '\');">100%</a>';
    }
    
// add close button to menu bar
    ContentNav = ContentNav + '<img id="NavBoxClose" src="images/spacer.gif" onclick="gobo(\'close\')">';
    
// add the content to the lightbox
    NavBox.innerHTML = ContentNav;
    if(gbLight != 1) {
      if(IE6 != true) {
        NewBoxLoader.innerHTML = '<img src="images/common/gobo_loading.gif"><br>Loading...';
        document.getElementById('NewBoxDisplay').style.display = "none";
      }
      
      setTimeout(function (a,b) {
        NewBoxDisplay.innerHTML = "<div id='dClose'><div id='aClose'><img src='images/common/gobo_x.gif'></div></div>" + gbContent;
        document.getElementById('NewBoxDisplay').style.display = "block";
        document.getElementById('NavBox').style.display = "none";
        if(IE6 != true) document.getElementById('NewBoxLoader').style.display = "none";
        document.getElementById('aClose').onclick = function(){ gobo('close'); }
      },200);
    }
    
    if(gbLight == 1) {
      if(IE6 == true) {
        NewBoxDisplay.innerHTML = '<div>' + gbTitle + '</div><img id="gbSource" src="' + gbContentThumb + '">';
        document.getElementById('NewBoxDisplay').style.display = "block";
      }else{
        NewBoxLoader.innerHTML = '<img src="images/common/gobo_loading.gif"><br>Loading...';
        NewBoxDisplay.innerHTML = '<div>' + gbTitle + '</div><img id="gbSource" src="images/spacer.gif">';
        gobo_preload(gbContentThumb);
      }
      if(IE == true) document.body.scroll = "no";
      document.getElementById('NewBox').onclick = function(){ gobo('close'); }
    }
    
  }
  
  if(gbOption == 'close'){
    document.body.scroll = "yes";
    document.getElementsByTagName('body')[0].removeChild(NewBox);
    document.getElementsByTagName('body')[0].removeChild(NavBox);
    if(IE8 == true) document.body.style.overflow = "auto";
}
  
  if(!gbOption || gbOption == 'resize'){
// now lets do the math
    var MathLeft = ((vpWidth - gbWidth) / 2) + "px";
    
// if ie math is automatic
    if(IE6 == true || IE7 == true) MathLeft = "auto";
    
// is display true do the math
    if (document.getElementById('NewBoxDisplay')) document.getElementById('NewBoxDisplay').style.left = MathLeft;
    
// if IE8 disable scrollbar
    if(IE8 == true) document.body.style.overflow = "hidden";
    
// if internet explorer nav goes on top
    if(IE == true) {
      if (document.getElementById('NewBox')) document.getElementById('NavBox').style.top = "0px";
    }else{
      if (document.getElementById('NewBox')) document.getElementById('NavBox').style.top = (vpHeight - 30) + "px";
    }
  }
}

// PRELOADER FUNCTION (P.S. To show the loadeing nicely we delayed the display for half a second!)

function gobo_preload(gbLink){
  if(IE6 != true) {
    document.getElementById('NewBoxLoader').style.display = "block";
    document.getElementById('NewBoxDisplay').style.display = "none";
    var img = new Image();
    img.src = gbLink;
    img.onload = setTimeout("gobo_loaded('" + gbLink + "')", 500);
  }else{
    document.getElementById('gbSource').src = gbLink;
  }
}

// ONCE LOADED DISPLAY

function gobo_loaded(gbLink) {
  document.getElementById('gbSource').src = gbLink;
  document.getElementById('NewBoxLoader').style.display = "none";
  document.getElementById('NewBoxDisplay').style.display = "block";
}

// GET SIZE OF PAGE AKA VIEWPORT

function gobo_viewport(){
  var ViewportWidth;
  var ViewportHeight;
  
  // the more standards compliant browsers use window.innerWidth and window.innerHeight
  if (typeof window.innerWidth != 'undefined'){
    ViewportWidth = window.innerWidth;
    ViewportHeight = window.innerHeight;
  }
  // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
    ViewportWidth = document.documentElement.clientWidth;
    ViewportHeight = document.documentElement.clientHeight;
  }
  // older versions of IE
  else{
    ViewportWidth = document.getElementsByTagName("body")[0].clientWidth;
    ViewportHeight = document.getElementsByTagName("body")[0].clientHeight;
  }
  return {ViewportWidth: ViewportWidth, ViewportHeight: ViewportHeight};
}

// IF BROWSER IS RESIZED RECALCULATE
window.onresize = gobo;