<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

?>
<div>

<!-- css 부분 { -->
<style>
.cc-selector input{
	display:none;
    margin:0;
	padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}


.emoji-sub{font-size:14px;font-weight:bold;text-align: center;padding: 4px;}
.emoji-sub-c1{background:#FFC30B;color:#fff;}
.emoji-sub-c2{background:#D0F0C0;}
.emoji-sub-c3{background:#1dacd6;color:#fff;}
.emoji-sub-c4{background:#355829;color:#fac57d;}
.emo-angel{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angel.png);}
.emo-angry{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angry.png);}
.emo-angry_skull{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angry_skull.png);}
.emo-angry2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angry2.png);}
.emo-angry3{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angry3.png);}
.emo-angry4{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/angry4.png);}
.emo-banana{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/banana.png);}
.emo-bored{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/bored.png);}
.emo-chicken{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/chicken.png);}
.emo-cool{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/cool.png);}
.emo-crazy{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/crazy.png);}
.emo-cry{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/cry.png);}
.emo-cry2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/cry2.png);}
.emo-cry3{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/cry3.png);}
.emo-devil{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/devil.png);}
.emo-disgusted{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/disgusted.png);}
.emo-disgusted2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/disgusted2.png);}
.emo-dislike{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/dislike.png);}
.emo-drool{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/drool.png);}
.emo-evil_laugh{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/evil_laugh.png);}
.emo-evil_stretch_tongue{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/evil_stretch_tongue.png);}
.emo-facepalm{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/facepalm.png);}
.emo-fierce{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/fierce.png);}
.emo-fox{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/fox.png);}
.emo-girrafe{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/girrafe.png);}
.emo-grumpy{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/grumpy.png);}
.emo-hamburger{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/hamburger.png);}
.emo-happy_poo{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/happy_poo.png);}
.emo-happy_skull{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/happy_skull.png);}
.emo-headache{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/headache.png);}
.emo-huffish{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/huffish.png);}
.emo-hypnotized{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/hypnotized.png);}
.emo-illp{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/illp.png);}
.emo-in_love{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/in_love.png);}
.emo-in_pain{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/in_pain.png);}
.emo-injured{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/injured.png);}
.emo-kiss2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/kiss2.png);}
.emo-kiss3{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/kiss3.png);}
.emo-kiss4{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/kiss4.png);}
.emo-laugh{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/laugh.png);}
.emo-laugh_cry{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/laugh_cry.png);}
.emo-laugh2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/laugh2.png);}
.emo-like{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/like.png);}
.emo-lol{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/lol.png);}
.emo-money{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/money.png);}
.emo-mustache{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/mustache.png);}
.emo-nerd{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/nerd.png);}
.emo-nervous{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/nervous.png);}
.emo-nervous2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/nervous2.png);}
.emo-orange{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/orange.png);}
.emo-pirate{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/pirate.png);}
.emo-pizza{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/pizza.png);}
.emo-psyduck{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/psyduck.png);}
.emo-puke{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/puke.png);}
.emo-roftl{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/roftl.png);}
.emo-rolling_eyes{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/rolling_eyes.png);}
.emo-sad{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/sad.png);}
.emo-sad_poo{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/sad_poo.png);}
.emo-sad2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/sad2.png);}
.emo-scared{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/scared.png);}
.emo-scared_to_death{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/scared_to_death.png);}
.emo-shocked{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/shocked.png);}
.emo-shocked2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/shocked2.png);}
.emo-shy{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/shy.png);}
.emo-sick{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/sick.png);}
.emo-silent{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/silent.png);}
.emo-skull{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/skull.png);}
.emo-sleeping{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/sleeping.png);}
.emo-smile{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/smile.png);}
.emo-smile2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/smile2.png);}
.emo-smile3{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/smile3.png);}
.emo-smiling_poo{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/smiling_poo.png);}
.emo-snoring{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/snoring.png);}
.emo-squeak{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/squeak.png);}
.emo-starfish{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/starfish.png);}
.emo-stop{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/stop.png);}
.emo-strech_tongue{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/strech_tongue.png);}
.emo-strech_tongue2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/strech_tongue2.png);}
.emo-stressed{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/stressed.png);}
.emo-thinking{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/thinking.png);}
.emo-ugly{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/ugly.png);}
.emo-unamused{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/unamused.png);}
.emo-waveing{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/waveing.png);}
.emo-wink{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wink.png);}
.emo-wink2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wink2.png);}
.emo-wired{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wired.png);}
.emo-wired2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wired2.png);}
.emo-wistling{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wistling.png);}
.emo-wondering{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wondering.png);}
.emo-xd{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/xd.png);}
.emo-zipped{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/zipped.png);}
.emo-bell{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/bell.png);}
.emo-bow{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/bow.png);}
.emo-cake{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/cake.png);}
.emo-candy{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/candy.png);}
.emo-candy_stick1{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/candy_stick1.png);}
.emo-candy_stick2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/candy_stick2.png);}
.emo-christmas_light{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/christmas_light.png);}
.emo-christmas_tree{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/christmas_tree.png);}
.emo-fireplace{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/fireplace.png);}
.emo-gingerbread{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/gingerbread.png);}
.emo-mistletoe{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/mistletoe.png);}
.emo-oranment1{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/oranment1.png);}
.emo-oranment2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/oranment2.png);}
.emo-prsesent_box{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/prsesent_box.png);}
.emo-rudolf_deer{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/rudolf_deer.png);}
.emo-santa_bag1{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/santa_bag1.png);}
.emo-santa_bag2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/santa_bag2.png);}
.emo-santa_cluas{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/santa_cluas.png);}
.emo-santa_hat{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/santa_hat.png);}
.emo-santa_slide{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/santa_slide.png);}
.emo-snowbulb{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/snowbulb.png);}
.emo-snowflake{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/snowflake.png);}
.emo-snowman{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/snowman.png);}
.emo-star_1{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/star_1.png);}
.emo-star_2{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/star_2.png);}
.emo-wreath{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/wreath.png);}
.emo-xmas_shopping{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/xmas_shopping.png);}
.emo-xmas_socks{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/xmas_socks.png);}
.emo-xmas_tag{width:24px;height:24px;background-image:url(<?php echo G5_IMG_URL ?>/emoticon/xmas_tag.png);}


.cc-selector input:active +.drinkwr_2-cc{opacity: .9;}
.cc-selector input:checked +.drinkwr_2-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkwr_2-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:32px;height:32px;
	margin:0 0 10px 8px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkwr_2-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

#modalLayer{display:none; position:relative;}
#modalLayer .modalContent{width:210px; height:180px; padding:10px; border:1px solid #ccc;z-index:11; background:#fff;overflow:auto;}
#modalLayer .modalContent .modalClose{float:right; cursor:pointer;}
</style>

<!-- css 부분 } -->

<script>

$(document).ready(function(){
  var modalLayer = $("#modalLayer");
  var modalLink = $(".modalLink");
  var modalClose = $(".modalClose");
  var modalCont = $(".modalContent");
  var marginLeft = modalCont.outerWidth()/2;
  var marginTop = modalCont.outerHeight()/2; 
  modalLink.click(function(){
    modalLayer.fadeToggle("slow");
    modalCont.css({"margin-top" : '10px'});
    $(this).blur();
    $(".modalContent > a").focus(); 
    return false;
  });      
});

</script>


<br>
<a href="#modalLayer" class="modalLink"><img src="<?php echo G5_IMG_URL ?>/emoticon/emoicon.png"></a>
<br>
<div id="modalLayer">
  <div class="modalContent">
 <div class="cc-selector">
		<?php
$emoList = [
    "emo-angel", "emo-angry", "emo-angry_skull", "emo-angry2", "emo-angry3",
    "emo-angry4", "emo-cool", "emo-crazy", "emo-cry", "emo-cry2",
    "emo-cry3", "emo-devil", "emo-disgusted2", "emo-dislike", "emo-drool",
    "emo-evil_laugh", "emo-evil_stretch_tongue", "emo-facepalm", "emo-grumpy",
    "emo-happy_poo", "emo-happy_skull", "emo-headache", "emo-huffish",
    "emo-hypnotized", "emo-illp", "emo-in_love", "emo-in_pain", 
	"emo-injured", "emo-kiss2", "emo-kiss3", "emo-kiss4",
	"emo-laugh", "emo-laugh_cry", "emo-laugh2", "emo-like",
	"emo-lol", "emo-money", "emo-mustache", "emo-nerd",
	"emo-nervous", "emo-nervous2", "emo-pirate", "emo-puke",
	"emo-roftl", "emo-rolling_eyes", "emo-sad", "emo-sad_poo",
	"emo-sad2","emo-scared", "emo-scared_to_death", "emo-shocked",
	"emo-shocked2", "emo-shy", "emo-sick", "emo-silent",
	"emo-skull", "emo-sleeping", "emo-smile", "emo-smile2",
	"emo-smile3", "emo-smiling_poo", "emo-ugly", "emo-unamused",
	"emo-waveing", "emo-wink", "emo-wink2", "emo-wired",
	"emo-wired2", "emo-wistling", "emo-wondering", "emo-xd",
	"emo-zipped", "emo-fierce", "emo-girrafe", "emo-psyduck",
    "emo-banana", "emo-chicken", "emo-hamburger", "emo-pizza",
    "emo-orange", "emo-bell", "emo-bow", "emo-cake",
	"emo-candy", "emo-candy_stick1", "emo-candy_stick2", "emo-christmas_light", 
	"emo-christmas_tree", "emo-fireplace", "emo-gingerbread", "emo-mistletoe",
	"emo-oranment1", "emo-oranment2", "emo-prsesent_box", "emo-rudolf_deer",
	"emo-santa_bag1", "emo-santa_bag2", "emo-santa_cluas", "emo-santa_hat", 
	"emo-santa_slide", "emo-snowbulb", "emo-snowflake", "emo-snowman", 
	"emo-star_1", "emo-star_2", "emo-wreath", "emo-xmas_shopping", 
	"emo-xmas_socks", "emo-xmas_tag"
];
?>

<?php foreach ($emoList as $emo): ?>
    <input
        value="<?php echo $emo; ?>"
        <?php echo ($write['wr_2'] == $emo) ? "checked" : ""; ?>
        id="<?php echo $emo; ?>"
        type="radio"
        name="wr_2"
        onClick="changeSrc()"
    />
    <label class="drinkwr_2-cc <?php echo $emo; ?>" for="<?php echo $emo; ?>"></label>
<?php endforeach; ?>

<br>
    </div>
  </div>
</div>			
</div>