;((win, doc, $) => {
  'use strict'
  
  let $outputE = $('section.output-contain--extension .output')
    , $outputMN = $('section.output-contain--mn .output')
    // control to read MIME TYPE using file extension
    , $controlE = $('input.control-extension')
    // control to read MIME TYPE using MAGIC NUMBER
    , $controlMN = $('input.control-magic-number')
    // decimal bytes output 
    , $bytesDecimal = $('.bytes-decimal', $outputMN)
    // hex bytes output
    , $bytesHex = $('.bytes-hex', $outputMN)
    , $fileType = $('.file-type', $outputMN)
  
  $controlE.on('change', (e) => { 
    $('dl dd', $outputE).text(e.target.files[0].type) 
  }) 
  
  const handleFileTYpe = (view) => {
    let first4Bytes = view.getUint32(0, false);
    let first4BytesHex = Number(first4Bytes).toString(16).toUpperCase()
    
    var count = 0 
    while (count < 4) {
      var int8 = view.getUint8(count, false)
      count++
    }
    
    // show the decimal value of bytes
    $bytesDecimal.text(first4Bytes)
    // show the hex value of bytes
    $bytesHex.text(first4BytesHex)
    
    switch (first4BytesHex) {
      case 'FFD8FFE0':
      case 'FFD8FFE1':
      case 'FFD8FFE2':
      case 'FFD8FFE3':
        $fileType.text('image/jpeg'); break;
      case '89504E47':
        $fileType.text('image/png'); break;
      case '47494638':
        $fileType.text('image/gif'); break;
      case '52494646':
        $fileType.text('video/avi'); break;
      default:
        $fileType.text('undefined'); break;
    }
  }
  
  const handleFileType = (file) => {
    let FR = new FileReader()
    FR.onload = (e)  => {
      let af = e.target.result
        , view = new DataView(af);
      
      /* for testing purpose START */
      let uint8 = new Uint8Array(af)
        , bytesFromUint8 = uint8.subarray(0, 4);
      
      let uint16 = new Uint16Array(af)
        , bytesFromUint16 = uint16.subarray(0, 2);
      
      let uint32 = new Uint32Array(af)
        , bytesFromUint32 = uint32.subarray(0, 1);
      
      console.log('uint8: ', bytesFromUint8.reduce((hex, decimal) => hex + Number(decimal).toString(16) + ' ', ' '))
      console.log('uint16: ', bytesFromUint16.reduce((hex, decimal) => hex + Number(decimal).toString(16) + ' ', ' '))
      console.log('uint32: ', bytesFromUint32.reduce((hex, decimal) => hex + Number(decimal).toString(16) + ' ', ' '))
      /* for testing purpose END */
      
      handleFileTYpe(view);
    }
    FR.readAsArrayBuffer(file)
  }
  
  $controlMN.on('change', (e) => { 
    handleFileType(e.target.files[0])
  })
  
})(window, document, jQuery)