function trimNumber(s) {
  while (s.substr(0,1) == '0' && s.length>1) { s = s.substr(1,9999); }
  return s;
}

jQuery(document).ready(function($) {
	
if($('div').hasClass('issue-pdfs')) {

		var RegularExpression = "/issues/([^/\.]+)-([^/\.]+)/?.pdf$";

		$(".issuesbox a").hover(function (){
		var flipbookLink = "/issue/20" + 	
			$(this).attr('href').match(RegularExpression)[1] + "/" + 
			$(this).attr('href').match(RegularExpression)[2] + "/";

			//console.log(flipbookLink);
		})

		$('.issuesbox a').wrap('<div class="bubbleInfo" />');
	$('.issuesbox .bubbleInfo a').each(function () {

	var pdfLink = $(this).attr('href');
	

	var flipbookLink = "/issue/20" + 	
		$(this).attr('href').match(RegularExpression)[1] + "/" + 
		trimNumber($(this).attr('href').match(RegularExpression)[2]) + "/";
	
	$(this).addClass('trigger');

	$(this).after('<table id="dpop" class="popup"> <tbody><tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <tr> <td class="left"></td> <td><table class="popup-contents"> <tbody>  <tr> <td><a href="'+ pdfLink +'">PDF Link</a></td> </tr> 			<tr><td><a href="/download.php?file='+pdfLink+'">Download</a></td>    			</tr><tr >    <td><a class="lightbox" title="Read online" href="' + flipbookLink +'">Read online</a></td> </tr> </tbody></table> </td> <td class="right"></td> </tr> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><img width="30" height="29" alt="popup tail" src="http://www.satellite.ac.nz/wp-content/themes/satellite10/images/bubble-tail2.png"/></td>     <td id="bottomright" class="corner"></td> </tr>  </tbody> </table>');
	
	$('a.lightbox').colorbox({iframe: true, width: "95%", height: "95%", title: "Satellite Magazine", close: "Return to the list of Satellite issues"});

});

$('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;

    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -30,
          left: -0,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });

}

});