// JavaScript Document
var userAgent = window.navigator.userAgent;
var max_words = 210; // 400;
if (userAgent.match(/iPhone/i)) {
    max_words = 40; // 100;
}

$(document).ready(function () {
    $('div.expandable div').expander({
        slicePoint: max_words,  // default is 100
        expandPrefix: ' ', // default is '... '
        expandText: 'READ MORE', // default is 'read more'
        collapseTimer: 0, // 5000 re-collapses after 5 seconds; default is 0, so no re-collapsing
        userCollapseText: 'READ LESS',  // default is 'read less'
        preserveWords: true // whether to keep the last word of the summary whole (true) or let it slice in the middle of a word (false)
    });

    //resize background to fit browser
    $('#supersize').resizenow();

	
    //social callout
    $('a[href*="social.callout.foursquare"]').each(function ()
   {
      // Create our tooltip
      $(this).qtip(
      {
         // Stick in a dummy <div /> we can use to embed the player and set it's ID
          content: $('<div><a href="https://foursquare.com/v/arancina/4b507788f964a5202a2427e3" target="_blank">BAYSWATER</a><br /><a href="https://foursquare.com/v/arancina/4beef75616290f47a721f51e" target="_blank">NOTTING HILL</a></div>'),
         position: {
            at: 'top center',
            my: 'bottom center',
            viewport: $(window) // Keep it on-screen at all times if possible
         },
         show: {
            event: 'click', // Show it on click...
            solo: true // ...and hide all others when its shown                 
         },
         hide: 'unfocus', // Hide when the tooltip loses focus
         style: {
            classes: 'ui-tooltip-social', // Use a custom tooltip class
            width: 105 // Set a static width
         },
         events: {
            render: function(event, api) {
                
            }
         }
      })
      // Prevent the link from being followed when we click it
      .click(false)

   });


$('a[href*="social.callout.qype"]').each(function () {
    // Create our tooltip
    $(this).qtip(
      {
          // Stick in a dummy <div /> we can use to embed the player and set it's ID
          content: $('<div><a href="http://www.qype.co.uk/place/1336892-Arancina-London" target="_blank">BAYSWATER</a><br /><a href="http://www.qype.co.uk/place/136304-Arancina-London" target="_blank">NOTTING HILL</a></div>'),
          position: {
              at: 'top center',
              my: 'bottom center',
              viewport: $(window) // Keep it on-screen at all times if possible
          },
          show: {
              event: 'click', // Show it on click...
              solo: true // ...and hide all others when its shown                 
          },
          hide: 'unfocus', // Hide when the tooltip loses focus
          style: {
              classes: 'ui-tooltip-social', // Use a custom tooltip class
              width: 105 // Set a static width
          },
          events: {
              render: function (event, api) {

              }
          }
      })
    // Prevent the link from being followed when we click it
      .click(false)
});






  if (userAgent.match(/iPhone/i)) {
      $('#twitter-feed').css('font-size', 11)
  }





});

(function ($) {
    //Resize image on ready or resize
    $.fn.supersize = function () {
        //Invoke the resizenow() function on document ready
        $(document).ready(function () {
            $('#supersize').resizenow();
        });
        //Invoke the resizenow() function on browser resize
        $(window).bind("resize", function () {
            $('#supersize').resizenow();
        });
    };
    //Adjust image size
    $.fn.resizenow = function () {
        //Define starting width and height values for the original image
        var startwidth = 1600;
        var startheight = 1069;
        //Define image ratio
        var ratio = startheight / startwidth;
        //Gather browser dimensions
        var browserwidth = $(window).width();
        var browserheight = $(window).height();
        //Resize image to proper ratio
        if ((browserheight / browserwidth) > ratio) {
            $(this).height(browserheight);
            $(this).width(browserheight / ratio);
            $(this).children().height(browserheight);
            $(this).children().width(browserheight / ratio);
        } else {
            $(this).width(browserwidth);
            $(this).height(browserwidth * ratio);
            $(this).children().width(browserwidth);
            $(this).children().height(browserwidth * ratio);
        }
        //Make sure the image stays center in the window
        $(this).children().css('left', (browserwidth - $(this).width()) / 2);
        $(this).children().css('top', (browserheight - $(this).height()) / 2);
    };
})(jQuery);

$(window).resize(function () { //resize background to fit browser
    $('#supersize').resizenow(); });