// browser detect added by ryan
function browserDetect()
{
    var msg = "This website works only in Firefox 2+, and Safari 3+. Please use one of these browsers for the best possible experience. Unfortunately, IE 7+ until I can secure an old PC for testing:)";
    var showAlert = false;
    var userAgent = window.navigator.userAgent;
    if (userAgent.indexOf("Firefox") > -1)
    {
        var version = parseInt(userAgent.substring(userAgent.indexOf("Firefox/")+8));
        if (version < 2)
            showAlert = true;
    }
    else if (userAgent.indexOf("MSIE") > -1)
    {
        var version = parseInt(userAgent.substring(userAgent.indexOf("MSIE")+5));
        if (version < 8)
            showAlert = true;
    }
    else if (userAgent.indexOf("Safari") > -1)
    {
        var version = parseInt(userAgent.substring(userAgent.indexOf("Safari/")+7));
        if (version < 522)
            showAlert = true;
    }
    else
    {
        showAlert = true;
    }
    if (showAlert)
    {
        alert(msg);
    }
}

function highlight_nav(elem, options) {
  if (elem == '' || !elem) return;

  if (options.hover == true) {
    var id = elem.attr('id');
    if (id != '') $('a[rel='+id+']').toggleClass('hover');
  }
}

jQuery(function($) {
    var ahover_options = {moveSpeed:250, toggleEffect:'both'}

    // the grid box animated hover
    $('.portfolio div[rel]').ahover($.extend(ahover_options, {
      over: function(elem) {
        elem.children('a').append('<div class="overlay"></div>');
        $('.subnav li[rel='+$(elem).attr('rel')+']').addClass('hover');
      },
      out: function(elem) {
        elem.children('a').children('.overlay').remove();
        $('.subnav li[rel='+$(elem).attr('rel')+']').removeClass('hover');
      }
    }));

    // the side nav hover
    $('.subnav li[rel]').hover(
      function() {
        $(this).addClass('hover');
        var boxes = $('.portfolio div[rel='+$(this).attr('rel')+']');
        var parent = boxes.offsetParent();

	// stop any animations and remove any existing hover elements if we're hovering over a group of two or more
	if (boxes.length > 1)
          parent.children('div.' + $.ahover.defaults.className).stop().remove();

        boxes.addClass('hover').children('a').append('<div class="overlay"></div>');
        boxes.each(function() {
          $.ahover.over($(this), parent, $.extend(ahover_options, {animate:boxes.length == 1}));
        });
      },
      function() {
        $(this).removeClass('hover');
        var boxes = $('.portfolio div[rel='+$(this).attr('rel')+']');
        var parent = boxes.offsetParent();
        boxes.removeClass('hover').children('a').children('.overlay').remove();
        boxes.each(function() {
          $.ahover.out($(this), parent, $.extend(ahover_options, {animate:boxes.length == 1}));
        });
      }
    );

    $('ul.nav li.back').ahover({moveSpeed: 250, toggleEffect: 'width',
      over: function(elem) {
        elem.children('span.desc').fadeIn();
      },
      out: function(elem) {
        elem.children('span.desc').fadeOut();
      }
    });
});

// crossfade
// wrap as a jQuery plugin and pass jQuery in to our anoymous function
(function ($) {
    $.fn.cross = function (options) {
        return this.each(function (i) { 
            // cache the copy of jQuery(this) - the start image
            var $$ = $(this);
            
            // get the target from the backgroundImage + regexp
            var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

            // nice long chain: wrap img element in span
            $$.wrap('<span style="position: relative;"></span>')
                // change selector to parent - i.e. newly created span
                .parent()
                // prepend a new image inside the span
                .prepend('<img>')
                // change the selector to the newly created image
                .find(':first-child')
                // set the image to the target
                .attr('src', target);

            // the CSS styling of the start image needs to be handled
            // differently for different browsers
            if ($.browser.msie || $.browser.mozilla) {
                $$.css({
                    'position' : 'absolute', 
                    'left' : 0,
                    'background' : '',
                    'top' : this.offsetTop
                });
            } else if ($.browser.opera && $.browser.version < 9.5) {
                // Browser sniffing is bad - however opera < 9.5 has a render bug 
                // so this is required to get around it we can't apply the 'top' : 0 
                // separately because Mozilla strips the style set originally somehow...                    
                $$.css({
                    'position' : 'absolute', 
                    'left' : 0,
                    'background' : '',
                    'top' : "0"
                });
            } else { // Safari
                $$.css({
                    'position' : 'absolute', 
                    'left' : 0,
                    'background' : ''
                });
            }

            // similar effect as single image technique, except using .animate 
            // which will handle the fading up from the right opacity for us
            $$.hover(function () {
                $$.stop().animate({
                    opacity: 0
                }, 200);
            }, function () {
                $$.stop().animate({
                    opacity: 1
                }, 200);
            });
        });
    };
    
})(jQuery);

// note that this uses the .bind('load') on the window object, rather than $(document).ready() 
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
    //$('img.fade').cross();
});