window.server_name = "nfts.guide";if (typeof window.nfts_guide_widget_inst === 'undefined') {

  function textWidth(text, fontProp, widget_type, width, lineHeight) {
    var tag = document.createElement('p')
    tag.style.position = 'absolute'
    tag.style.left = '-99in'
    tag.style.font = fontProp
    tag.innerHTML = text
    if (typeof width == 'undefined') {
      tag.style.whiteSpace = 'nowrap';
    } else {
      tag.style.width = width;
      tag.style.wordBreak = 'break-word';
      tag.style.lineHeight = lineHeight;
      if (widget_type >= 12 && widget_type <= 17) tag.style.textTransform = 'uppercase';
    }

    document.body.appendChild(tag)
    var result = (typeof width == 'undefined') ? tag.clientWidth : tag.clientHeight;
    document.body.removeChild(tag)
    return result;
  }

  const waitElementState = (elem) => new Promise((resolve) => {
    setTimeout(resolve, 5000);
    elem.addEventListener('load', () => resolve(elem));
  });
window.nfts_guide_widget_inst = class {
  constructor() {
    this.link = document.createElement( "link" );
    this.link.href = 'https://' + window.server_name + '/templates/ccr/styles/widget.css?t='+Date.now();
    this.link.type = "text/css";
    this.link.rel = "stylesheet";
    this.link.media = "screen,print";
    document.head.appendChild(this.link);
  }

  async drawWidget(project_type, slug, price, totalSupply, circulatingSupply, id, document_root, name, rating, date, widget_type, container, stars, description, collection_count, rating_100, original_name, l, symbol) {
    const curve = `
    <svg class="zcode_nfts_guide_name zcode_nfts_guide_name${widget_type}" viewBox="0 0 65 65">
      <path id="curve" class="zcode_nfts_guide_name" fill="transparent" d="
      
      M 25, 26
      m -20, 0
      a 20,20 0 1,1 40,0
      a 20,20 0 1,1 -40,0 
      
      " />
      <text x="110">
        <textPath startOffset="0%" xlink:href="#curve">
          ${name}
        </textPath>
      </text>
      <text x="-15">
        <textPath startOffset="0%" xlink:href="#curve">
          ${name}
        </textPath>
      </text>
    </svg>
    `;

    const nfts_guide_element = document.getElementById(container);

    nfts_guide_element.style.position = 'relative';
    const width_obj = ['180','180','180','180',
                       '125', '125', '125', '125', '85', '85',
                        '85', '85', '85', '85',
                        '85', '85', '85', '205',
                        '205', '205', '205', '205',
                        '205','145','145','145',
                        '145', '145', '145', '265',
                        '265', '265', '265'];
    const layout_width = [170, 170, 181, 181, 172, 172, 118, 118, 80, 80, 80, 67, 67, 67, 67, 67, 67, 200, 200, 200, 200, 200, 200,
                          140, 140, 140, 140, 140, 140, 260, 260, 260, 260];
    nfts_guide_element.style.width = width_obj[widget_type - 1] + 'px';

    const curve2 = `<p class="zcode_nfts_guide_name zcode_nfts_guide_name${widget_type}">${name}</p>
    <span class="zcode_nfts_guide_three_dots zcode_nfts_guide_three_dots_${container}_${widget_type}"><b>...</b></span>`;

    let nft_guide_rating_stars = '';
    let rate = '';
    let props = '';
    let link = '';
    if (project_type == 'nft') {
      for (let i = 0; i <= 4; i++) {
        nft_guide_rating_stars += `<div class="nft-star">
        <img src="${document_root}/images/star.png" alt="">`;
        if(i - 0.5 == stars) nft_guide_rating_stars += `<img class="filling filling-part" src="${document_root}/images/filledStar.png" alt="">`;
        else if (i <= stars) nft_guide_rating_stars +=  `<img class="filling" src="${document_root}/images/filledStar.png" alt="">`;
        nft_guide_rating_stars += `</div>`;
      };
      link = `${document_root}/nft?id=${slug}`;
      props += `<p>Description: <span>${description}</span></p><p>Collection Count: <span>${collection_count}</span></p>
      ${rating_100?`<p>Rating: <span>${rating_100}</span></p>`:''}`;
      rate += `<p>Rate Now</p>
      <input data-cid="${id}" class="range-star-zcode_nfts_guide_rating range-star-zcode_nfts_guide_rating-${container}" name="star-rating" min="0" max="4" value="2" type="range">`;
    } else if (project_type == 'p2e_game') {
      props += `<p>Description: <span>${description}</span></p><p>Symbol: <span>${symbol}</span></p><p>Price: <span>${price}</span></p>`;
      link = `${document_root}/playtoearngames/projects?id=${slug}`;
    } else if (project_type == 'p2e_token') {
      props += `<p>Symbol: <span>${symbol}</span></p><p>Price: <span>${price}</span></p><p>Total Supply: <span>${totalSupply}</span></p>`;
      if (circulatingSupply) props += `<p>Circulating Supply: <span>${circulatingSupply}</span></p>`;
      link = `${document_root}/playtoearngames/token?id=${id}`;
    } else return;

    const widgetHTML = `<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800" rel="stylesheet">
      <div class="zcode_nfts_guide_widget" id="zcode_nfts_guide_widget-${container}-${widget_type}">
        <img width="${layout_width[widget_type - 1] + 'px'}" src="${document_root}/images/widget-layout-${widget_type}.png" alt="">
        <p class="zcode_nfts_guide_date zcode_nfts_guide_date${widget_type}">${date}</p>
        <p class="zcode_nfts_guide_rating zcode_nfts_guide_rating${widget_type} ${rating=='NEW'?'zcode_nfts_guide_new_rating':''}">${rating=='NEW'?'<span class="zcode_nfts_guide_new_rating">NEW</span>':rating}</p>
        ${ (widget_type >= 9 && widget_type <= 11) ? curve : curve2}
      </div>
      <div class="zcode_nfts_guide_widget-information zcode_nfts_guide_widget-information-${widget_type}">
        <div class="zcode_nfts_guide_arrow_right"></div>
        <div class="zcode_nfts_guide_arrow_down"></div>
        <div class="name-zcode_nfts_guide_widget-stars-holder">
          <p>${original_name}</p>
          ${ nft_guide_rating_stars }
        </div>
        ${rate}

        ${props}
        <a href="${link}">Rate us!</a>

      </div>
    `;

    try {
      this.link.sheet.cssRules;
    } catch (e){
      const res = await waitElementState(this.link);
      if (res === null) return;
    }
  
    document.getElementById(container).innerHTML = widgetHTML;
    if (l) document.getElementById(`zcode_nfts_guide_widget-${container}-${widget_type}`).addEventListener('click', () => window.location.href = link);

    const pName =  document.getElementById(`zcode_nfts_guide_widget-${container}-${widget_type}`)
                  .getElementsByClassName('zcode_nfts_guide_name')[0];

    const lineHeight = getComputedStyle(pName).lineHeight;

    const blockWidth = +(getComputedStyle(pName).width.substring(0, getComputedStyle(pName).width.length - 2));
    const blockHeight = +(getComputedStyle(pName).height.substring(0, getComputedStyle(pName).height.length - 2));
    const textWidthVar = textWidth(name, getComputedStyle(pName).fontWeight + ' ' + getComputedStyle(pName).fontSize + ' ' + getComputedStyle(pName).fontFamily, widget_type);
    const textHeightVar = textWidth(name, getComputedStyle(pName).fontWeight + ' ' + getComputedStyle(pName).fontSize + ' ' + getComputedStyle(pName).fontFamily, widget_type, blockWidth, lineHeight);
    if (pName && ((widget_type >= 12 && widget_type <= 17) || (widget_type >= 27 && widget_type <= 29) || (widget_type >= 24 && widget_type <= 26) || (widget_type == 18 || widget_type == 19 ||widget_type == 23)) && textWidthVar > blockWidth) {
      if (widget_type >= 12 && widget_type <= 17) {
        pName.style.top = '26px';
      }
      const threeDots = document.getElementsByClassName(`zcode_nfts_guide_three_dots_${container}_${widget_type}`)[0];
      if (widget_type == 18 || widget_type == 19 ||widget_type == 23) {
        threeDots.style.top = '22px';
        threeDots.style.left = '180px';
        pName.style.fontSize = '12px';
        pName.style.top = '3px';
      }
      if (widget_type >= 24 && widget_type <= 26) {
        threeDots.style.top = '67px';
        threeDots.style.left = '65px';
        pName.style.fontSize = '11px';
        pName.style.top = '52px';
      }
      if (widget_type >= 27 && widget_type <= 29) {
        threeDots.style.top = '77px';
        threeDots.style.left = '65px';
        pName.style.fontSize = '11px';
        pName.style.top = '62px';
      }

      const newTextHeightVar = textWidth(name, getComputedStyle(pName).fontWeight + ' ' + getComputedStyle(pName).fontSize + ' ' + getComputedStyle(pName).fontFamily, widget_type, blockWidth, lineHeight);

      if (textHeightVar > blockHeight) {
        threeDots.style.display = 'block';
        threeDots.style.color = getComputedStyle(pName).color;
      } else if (widget_type >= 24 && widget_type <= 26) pName.style.top = '56px';
      else if (widget_type >= 27 && widget_type <= 29) pName.style.top = '65px';
      else if (newTextHeightVar <= blockHeight/2 && (widget_type == 18 || widget_type == 19 ||widget_type == 23)) pName.style.top = '4px';
    }

    if (project_type == 'nft') {
      const input_range_star = document.getElementsByClassName(`range-star-zcode_nfts_guide_rating-${container}`)[0];

      let nfts_guide_gradient_range = input_range_star.value;
      if (navigator. userAgent. includes("Chrome") && navigator. vendor) nfts_guide_gradient_range *= 25;
      input_range_star.style.background = 'linear-gradient(89.95deg, #4227FD 0%, #B927FD '+nfts_guide_gradient_range +'%, #E8E8E8 ' + nfts_guide_gradient_range + '%, #E8E8E8 100%)';
  
      input_range_star.addEventListener( 'input', e => {
          let m = e.target.value;
          if (navigator. userAgent. includes("Chrome") && navigator. vendor) m *= 25;
          e.target.style.background = 'linear-gradient(89.95deg, #4227FD 0%, #B927FD '+m +'%, #E8E8E8 ' + m + '%, #E8E8E8 100%)' ;
          const nftStar = e.target.parentNode.parentNode.getElementsByClassName('nft-star');
          for (let i = 0; i <= 4; i++) {
              nftStar[i].innerHTML = `<img src="${document_root}/images/star.png" alt="">`;
          }
          for (let i = 0; i <= e.target.value; i++) {
              nftStar[i].innerHTML += `<img class="filling" src="${document_root}/images/filledStar.png" alt="">`;
          }
      } );
  
      input_range_star.addEventListener( 'mouseup', e => {
        let m = e.target.value;
        const id = e.target.getAttribute('data-cid');
        let data = 'id=' + id + '&rating=' + m;
        const src_nft_rate = `${document_root}/ajax/top-nft-update.php?` + data;
        const script_tag_nft_rate = document.createElement('script');
        script_tag_nft_rate.type = 'text/javascript';
        script_tag_nft_rate.src = src_nft_rate;
        document.head.appendChild(script_tag_nft_rate);        
      });
    }

    const widget = document.getElementById(`zcode_nfts_guide_widget-${container}-${widget_type}`);
    const widgetInfo = document.getElementById(container).getElementsByClassName('zcode_nfts_guide_widget-information')[0];
    widget.addEventListener('mouseover', () => widgetInfo.style.display = 'block');
    widgetInfo.addEventListener('mouseover', () => widgetInfo.style.display = 'block');
    widget.addEventListener('mouseleave', () => widgetInfo.style.display = 'none');
    widgetInfo.addEventListener('mouseleave', () => widgetInfo.style.display = 'none');

  }

  init(project_type, slug, price, totalSupply, circulatingSupply, id, document_root, name, rating, date, widget_type, container, stars, description, collection_count, rating_100, original_name, l, symbol) {
    if (['complete', 'interactive'].includes(document.readyState)) {
      this.drawWidget(project_type, slug, price, totalSupply, circulatingSupply, id, document_root, name, rating, date, widget_type, container, stars, description, collection_count, rating_100, original_name, l, symbol);
    } else {
      document.addEventListener('DOMContentLoaded', () => this.drawWidget(project_type, slug, price, totalSupply, circulatingSupply, id, document_root, name, rating, date, widget_type, container, stars, description, collection_count, rating_100, original_name, l, symbol));
    }
  }  
}



window.nfts_guide_widget_instanse = new nfts_guide_widget_inst();

}
window.nfts_guide_widget_instanse.init('nft', 'clc-golden-ticket', '0', '', '', '1634858','https://nfts.guide',"CLC Golden Ticket",'A','AUDITED 28.04.24',8,'zcode_nfts_guide_div_holder_0e917451-2a24-4c41-bcaf-93b85ac08bf4', 4.0, "The Crypto Lottery Club (CLC) was created in 2023 and this is a long term project for all of us.\nThe...", '20','554', "CLC Golden Ticket", 1,'n/a');