// ==UserScript==
// @name         agefans Enhance
// @namespace    http://tampermonkey.net/
// @version      0.1.5
// @description  more powerful agefans
// @author       kinoko
// @match        https://www.agefans.net/play/*
// @match        https://www.agefans.net/age/player/ckx1*
// @grant        none
// @license      MIT
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

;(function () {
  'use strict'

  // Your code here...
  window.log = console.log
  delete window.console

  function gotoNextPart() {
    let dom = document.querySelector("li a[style*='color: rgb(238, 0, 0);']")
      .parentElement.nextElementSibling

    if (dom) {
      dom.children[0].click()
    }
  }

  function genNextPartBtn() {
    let $0 = document.querySelector('[class^=timetext]')

    if (!$0) return requestAnimationFrame(genNextPartBtn)

    let div = document.createElement('div')

    /** @type {CSSStyleDeclaration}*/
    let styles = {
      lineHeight: '38px',
      color: 'rgb(255, 255, 255)',
      fontFamily: 'arial',
      fontSize: '16px',
      paddingLeft: '10px',
      float: 'left',
      overflow: 'hidden',
      cursor: 'pointer',
    }

    Object.entries(styles).forEach(([key, value]) => {
      div.style[key] = value
    })

    div.innerText = '下一集'
    div.onclick = () => {
      parent.postMessage({ code: 2, message: 'switch to next part' })
    }

    $0.parentNode.insertBefore(div, $0.nextSibling)

    let videoEl = document.querySelector('video')
    videoEl.play()
    videoEl.addEventListener('ended', () => {
      parent.postMessage({ code: 1, message: 'auto switch' })
    })
  }

  function inject() {
    let dom = document.querySelector('.fullscn')

    if (!dom) return requestAnimationFrame(inject)

    dom.onclick = () => {
      if (document.body.style.overflow === 'hidden') {
        document.body.style.overflow = ''
      } else {
        document.body.style.overflow = 'hidden'
      }
    }

    let ageframediv = document.getElementById('ageframediv')
    let { width, height } = ageframediv.getBoundingClientRect()
    ageframediv.style.height = (width / 16) * 9 + 'px'
  }

  if (parent === self) {
    // inject window message listener
    window.addEventListener('message', (e) => {
      gotoNextPart()
    })

    requestAnimationFrame(inject)
  } else {
    requestAnimationFrame(genNextPartBtn)
  }
})()