export function Poster({postername, url}:{postername: string, url: string}){
    return(
        <a typeof="button" onClick={reSize({name: postername})}>
          <img id={postername} className="picture-frame norm" src={url} alt={postername} />
        </a>
    )
}
export function Certificate({postername, url}:{postername: string, url: string}){
  return(
      <div className="col">
        <a typeof="button" onClick={reSize2({name: postername})}>
          <img id={postername} className="cert-frame norm" src={url} alt={postername} />
        </a>
      </div>
  )
}

function reSize({name}:{name: string}){
    const resize =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{
      var img; 
      img = document.getElementById(name);
      if (img!.className === "picture-frame norm"){
        console.log("=== picture-frame norm")
        img!.className = img!.className.replace("picture-frame norm", "full-screen-width");
      }
      else if (img!.className === "full-screen-width"){
        console.log("=== full-screen-width")
        img!.className = img!.className.replace("full-screen-width", "picture-frame norm");
      }
    }
    return resize; 
}
function reSize2({name}:{name: string}){
  const resize =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{
    var img; 
    img = document.getElementById(name);
    if (img!.className === "cert-frame norm"){
      console.log("=== cert-frame norm")
      img!.className = img!.className.replace("cert-frame norm", "full-screen-width");
    }
    else if (img!.className === "full-screen-width"){
      console.log("=== full-screen-width")
      img!.className = img!.className.replace("full-screen-width", "cert-frame norm");
    }
  }
  return resize; 
}


export function PosterRow({postername1, postername2, url1, url2}:{postername1: string, url1: string, postername2: string, url2: string}){
    return(
        <>
        <div className="row">
            <div className="col">
                <Poster url={url1} postername={postername1} />
            </div>
            <div className="col">
                <Poster url={url2} postername={postername2} />
            </div>
        </div>
        <br/>
        </>
    )
}