$(function(){
    const bbsnew = $('.bbsnewf5')
    for ( i=0; i<bbsnew.length; i++) {
        createBox(bbsnew[i], i)
    }
    // Á¦¸ñ click href »èÁ¦
    $('.gallery_subject > a').removeAttr('href')
    console.log(window.innerWidth)
    console.log(window.outerWidth)
    // »çÀÌÁî Á¶Àý
    const imgSize = $('.bbsnewf5 table tbody tr:first-child td img').width()
    if ( window.innerWidth < 671 ) {
        $('.extraDom').width(imgSize-20)
    } else {
        $('.extraDom').width(imgSize-40)
    }
    $('.cateWrapper').width(imgSize)
    // img wrapper °¨½ÎÁÖ±â
    $('.bbsnewf5 table tbody tr:first-child td a img ').wrap('<div class="img_Wrapper"></div>')
})

// â Å©±â º¯°æ½Ã
$( window ).resize(function() {
    // »çÀÌÁî º¯°æ
    const imgSize = $('.bbsnewf5 table tbody tr:first-child td img').width()
    if ( window.innerWidth < 671 ) {
        $('.extraDom').width(imgSize-20)
    } else {
        $('.extraDom').width(imgSize-40)
    }
    $('.cateWrapper').width(imgSize)
});
//»ó¼¼ Á¤º¸ ±×·ÁÁÖ±â
function createBox(e, index) {
    const extras = $(e).find(' .gallery_etc font')
    if ( extras.length === 0) return true;
    const dom = $('<div id="extra_'+index+'" class="extraDom"></div>')
    const cateWrapper = $('<div class="cateWrapper"></div>')
    const cate = $('<div id="cate_'+index+'" class="cate"></div>')
    const iconWrapper = $('<div class="icon"><img src="/base_3/img/icon.png"></div>')
    dom.append(iconWrapper)
    let font
    extras.each(function (i, extra){
        let ex = $(extra).html()
        let title = ex.split(':')[0].trim()
        let content = ex.split(':')[1].trim()
        if ( title === "ºÐ¾çÁ¤º¸" ) { // ÀÎÄÚµù ¹®Á¦·Î Çѱ۱úÁ®¼­ À妽º·Î ó¸®
        // if ( i === 4 ) { // ºÐ¾çÁ¤º¸
            let cateText = ""
            switch (content) {
                case "ºÐ¾ç¿¹Á¤" :
                    cateText = "before"
                    break;
                case "ºÐ¾çÁß" :
                    cateText = "ing"
                    break;
                case "ºÐ¾ç¿Ï·á" :
                    cateText = "finish"
                    break;
            }
            cate.append('<div class="'+cateText+'">'+content+'</div>')
            return true;
        } else if ( title === "°ø»çÁ¤º¸" ) { // ÀÎÄÚµù ¹®Á¦·Î Çѱ۱úÁ®¼­ À妽º·Î ó¸®
            // if ( i === 4 ) { // ºÐ¾çÁ¤º¸
            let cateText = ""
            switch (content) {
                case "ÀÓ´ëÁß" :
                    cateText = "before"
                    break;
                case "°ø»çÁß" :
                    cateText = "ing"
                    break;
                case "°ø»ç¿Ï·á" :
                    cateText = "finish"
                    break;
            }
            cate.append('<div class="'+cateText+'">'+content+'</div>')
            return true;
        }
        const wrapper = $('<div class="wrapper"></div>')
        const titleDom = $('<div class="title"></div>')
        const contentDom = $('<div class="content"></div>')
        titleDom.append(title);
        contentDom.append(content);
        wrapper.append(titleDom);
        wrapper.append(contentDom);
        dom.append(wrapper)
    })
    cateWrapper.append(cate)
    $(e).find('table tbody tr:first-child td').append(dom)
    $(e).find('table tbody tr:first-child td').append(cateWrapper)
}