Browser Detection

/**
 * Operating system detection object
 */
$.os; // Main OS detection object

// OS Properties:
// $.os.ios - iOS device (iPhone, iPad, iPod)
// $.os.android - Android device
// $.os.webos - WebOS device
// $.os.blackberry - BlackBerry device
// $.os.bb10 - BlackBerry 10 device
// $.os.rimtabletos - RIM Tablet OS
// $.os.playbook - PlayBook device
// $.os.kindle - Kindle device
// $.os.silk - Silk browser (Kindle Fire)
// $.os.version - OS version string
// $.os.tablet - Tablet device
// $.os.phone - Phone device

// Check for specific OS
if ($.os.ios) {
  console.log('Running on iOS');
  $('.ios-specific').show();
}

if ($.os.android) {
  console.log('Running on Android');
  $('body').addClass('android');
}

// Version checking
if ($.os.ios && parseFloat($.os.version) >= 13.0) {
  console.log('iOS 13 or later');
  enableModernFeatures();
}

// Device type detection
if ($.os.tablet) {
  $('body').addClass('tablet-layout');
} else if ($.os.phone) {
  $('body').addClass('phone-layout');
}

// Responsive behavior based on OS
if ($.os.ios || $.os.android) {
  // Mobile-specific behavior
  enableTouchOptimizations();
  $('.desktop-only').hide();
} else {
  // Desktop behavior
  enableKeyboardShortcuts();
  $('.mobile-only').hide();
}

/**
 * Browser detection object
 */
$.browser; // Main browser detection object

// Browser Properties:
// $.browser.webkit - WebKit-based browser (Safari, Chrome, etc.)
// $.browser.chrome - Chrome browser
// $.browser.safari - Safari browser
// $.browser.firefox - Firefox browser
// $.browser.ie - Internet Explorer
// $.browser.opera - Opera browser
// $.browser.version - Browser version string

// Browser-specific handling
if ($.browser.webkit) {
  console.log('WebKit browser detected');
  $('.webkit-styles').addClass('active');
}

if ($.browser.chrome) {
  console.log('Chrome browser');
  enableChromeFeatures();
}

if ($.browser.safari) {
  console.log('Safari browser');
  applySafariWorkarounds();
}

// Version-based feature detection
if ($.browser.ie && parseInt($.browser.version) < 11) {
  console.log('Legacy IE detected');
  loadIEPolyfills();
  $('.modern-feature').hide();
}

// Firefox-specific optimizations
if ($.browser.firefox) {
  // Firefox handles animations differently
  $.fx.speeds._default = 300; // Adjust default animation speed
}

// Combine with feature detection
function supportsTouch() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}

function initializeInterface() {
  if ($.os.ios || $.os.android || supportsTouch()) {
    // Touch interface
    $('body').addClass('touch-enabled');
    initializeTouchEvents();
  } else {
    // Mouse interface
    $('body').addClass('mouse-enabled');
    initializeMouseEvents();
  }
}

// Capability-based loading
if ($.browser.webkit && $.os.ios) {
  // iOS Safari specific features
  enableiOSFeatures();
} else if ($.browser.webkit && $.os.android) {
  // Android Chrome specific features
  enableAndroidFeatures();
}

// Progressive enhancement
function enhanceForPlatform() {
  const capabilities = {
    hasTouch: supportsTouch(),
    isRetina: window.devicePixelRatio > 1,
    isMobile: $.os.phone || $.os.tablet,
    isIOS: $.os.ios,
    isAndroid: $.os.android
  };
  
  if (capabilities.isRetina) {
    $('img[data-2x]').each(function() {
      $(this).attr('src', $(this).data('2x'));
    });
  }
  
  if (capabilities.hasTouch) {
    $('.hover-effect').addClass('touch-hover');
  }
  
  return capabilities;
}

// Device-specific CSS classes
function addDeviceClasses() {
  const classes = [];
  
  if ($.os.ios) classes.push('ios');
  if ($.os.android) classes.push('android');
  if ($.os.tablet) classes.push('tablet');
  if ($.os.phone) classes.push('phone');
  
  if ($.browser.webkit) classes.push('webkit');
  if ($.browser.chrome) classes.push('chrome');
  if ($.browser.safari) classes.push('safari');
  if ($.browser.firefox) classes.push('firefox');
  
  $('body').addClass(classes.join(' '));
}

// Responsive breakpoints with device context
function getResponsiveContext() {
  const width = $(window).width();
  const context = {
    breakpoint: 'desktop',
    isMobile: $.os.phone || $.os.tablet,
    isTablet: $.os.tablet,
    isPhone: $.os.phone
  };
  
  if (width < 480) {
    context.breakpoint = 'phone';
  } else if (width < 768) {
    context.breakpoint = 'small-tablet';
  } else if (width < 1024) {
    context.breakpoint = 'tablet';
  }
  
  // Override based on device detection
  if ($.os.phone && width > 480) {
    context.breakpoint = 'phone-landscape';
  }
  
  return context;
}

// Usage in responsive handlers
$(window).on('resize', function() {
  const context = getResponsiveContext();
  $('body').attr('data-context', context.breakpoint);
  
  if (context.isMobile) {
    // Mobile-specific resize handling
    adjustMobileLayout();
  }
});

// Performance based on device capabilities
function optimizeForDevice() {
  if ($.os.ios && parseInt($.os.version) < 10) {
    // Older iOS devices - reduce animations
    $.fx.off = true;
    $('.heavy-animation').removeClass('animated');
  }
  
  if ($.os.android && parseInt($.os.version) < 5) {
    // Older Android - disable complex effects
    $('.complex-effect').addClass('simple-fallback');
  }
  
  // High-DPI optimizations
  if (window.devicePixelRatio > 2) {
    // Very high DPI - may need performance adjustments
    $('.particle-effect').addClass('reduced-particles');
  }
}

// Memory management for different devices
function manageMemoryUsage() {
  if ($.os.ios && ($.os.phone || navigator.hardwareConcurrency < 4)) {
    // Likely older or memory-constrained device
    $('.memory-intensive').addClass('lazy-load');
    enableImageLazyLoading();
  }
}

// Conditional polyfill loading
function loadPolyfills() {
  const polyfills = [];
  
  if ($.browser.ie && parseInt($.browser.version) < 11) {
    polyfills.push('/js/polyfills/ie10.js');
  }
  
  if (!window.Promise) {
    polyfills.push('/js/polyfills/promise.js');
  }
  
  if (!window.fetch) {
    polyfills.push('/js/polyfills/fetch.js');
  }
  
  // Load polyfills sequentially
  loadScripts(polyfills).then(() => {
    initializeApp();
  });
}

// Browser-specific workarounds
function applyBrowserWorkarounds() {
  if ($.browser.safari && $.os.ios) {
    // iOS Safari viewport unit fix
    function setVH() {
      document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
    }
    setVH();
    $(window).on('resize', setVH);
  }
  
  if ($.browser.ie) {
    // IE flexbox fixes
    $('.flex-container').addClass('ie-flex-fix');
  }
}

// Development helper for testing
function simulateDevice(deviceType) {
  // Only for development/testing
  if (typeof window.DEVELOPMENT !== 'undefined') {
    switch (deviceType) {
      case 'ios':
        $.os = {ios: true, version: '14.0', phone: true};
        $.browser = {webkit: true, safari: true, version: '14.0'};
        break;
      case 'android':
        $.os = {android: true, version: '10', phone: true};
        $.browser = {webkit: true, chrome: true, version: '80'};
        break;
    }
    
    addDeviceClasses();
    optimizeForDevice();
  }
}

// Log detection results for debugging
function logDetectionInfo() {
  console.group('Browser Detection');
  console.log('OS:', $.os);
  console.log('Browser:', $.browser);
  console.log('User Agent:', navigator.userAgent);
  console.log('Screen:', screen.width + 'x' + screen.height);
  console.log('Viewport:', $(window).width() + 'x' + $(window).height());
  console.groupEnd();
}

// Call during development
if (window.location.hostname === 'localhost') {
  logDetectionInfo();
}

/**
 * Internal detection function (primarily for testing)
 * @param ua - User agent string to parse
 * @returns Detection results object
 */
$.__detect(ua);

// Test detection with custom user agent
const testUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)';
const detection = $.__detect(testUA);
console.log('Detected:', detection);

// Useful for unit testing
function testDetectionLogic() {
  const testCases = [
    'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)',
    'Mozilla/5.0 (Linux; Android 10; SM-G975F)',
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
  ];
  
  testCases.forEach(ua => {
    const result = $.__detect(ua);
    console.log(`UA: ${ua}`);
    console.log(`Result:`, result);
  });
}