From 5ff189979694f196cd74932af46fb08442267d32 Mon Sep 17 00:00:00 2001
From: chicpro <chicpro@gmail.com>
Date: Fri, 9 Aug 2013 16:28:22 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98?=
 =?UTF-8?q?=20=EC=8A=A4=ED=82=A8=EC=97=90=20=EC=9E=AC=EC=83=9D=20=EC=A0=95?=
 =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skin/shop/basic/main.20.skin.php | 182 +++++++++++++++++-----------
 skin/shop/basic/main.30.skin.php | 183 +++++++++++++++++-----------
 skin/shop/basic/main.40.skin.php | 148 +++++++++++++++--------
 skin/shop/basic/main.50.skin.php | 200 +++++++++++++++++++------------
 4 files changed, 447 insertions(+), 266 deletions(-)

diff --git a/skin/shop/basic/main.20.skin.php b/skin/shop/basic/main.20.skin.php
index 5a55c820a..a90e5d52d 100644
--- a/skin/shop/basic/main.20.skin.php
+++ b/skin/shop/basic/main.20.skin.php
@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -93,83 +91,131 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.topRolling = function(option)
-{
-    var $smt = this.find("ul.sct_ul");
-    var $smt_a = $smt.find("a.sct_a");
-    var height = $smt.closest("ul").height();
-    var count = $smt.size();
-    var c_idx = o_idx = 0;
-    var fx = null;
+(function($) {
+    var intervals = {};
 
-    // 기본 설정값
-    var settings = $.extend({
-        interval: 5000,
-        duration: 800
-    }, option);
+    var methods = {
+        init: function(option)
+        {
+            var $smt = this.find("ul.sct_ul");
+            var $smt_a = $smt.find("a.sct_a");
+            var height = $smt.closest("ul").height();
+            var count = $smt.size();
+            var c_idx = o_idx = 0;
+            var fx = null;
+            var el_id = this[0].id;
 
-    if(count < 2)
-        return;
+            // 기본 설정값
+            var settings = $.extend({
+                interval: 5000,
+                duration: 800
+            }, option);
 
-    fx = setInterval(top_rolling, settings.interval);
+            if(count < 2)
+                return;
 
-    $smt.hover(
-        function() {
-            if(fx != null)
-                clearInterval(fx);
+            set_interval();
+
+            $smt.hover(
+                function() {
+                    clear_interval();
+                },
+                function() {
+                    set_interval();
+                }
+            );
+
+            $smt_a.on("focusin", function() {
+                clear_interval();
+            });
+
+            $smt_a.on("focusout", function() {
+                set_interval();
+            });
+
+            function top_rolling() {
+                $smt.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
+
+                $smt.eq(o_idx).animate(
+                    { top: "-="+height+"px" }, settings.duration,
+                    function() {
+                        $(this).css("display", "none").css("top", height+"px");
+                    }
+                );
+
+                c_idx = (o_idx + 1) % count;
+
+                $smt.eq(c_idx).css("display", "block").animate(
+                    { top: "-="+height+"px" }, settings.duration,
+                    function() {
+                        o_idx = c_idx;
+                    }
+                );
+            }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(top_rolling, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
         },
-        function() {
-            if(fx != null)
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(top_rolling, settings.interval);
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
         }
-    );
+    };
 
-    $smt_a.on("focusin", function() {
-        if(fx != null)
-            clearInterval(fx);
-    });
-
-    $smt_a.on("focusout", function() {
-        if(fx != null)
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(top_rolling, settings.interval);
-    });
-
-    function top_rolling() {
-        $smt.each(function(index) {
-            if($(this).is(":visible")) {
-                o_idx = index;
-                return false;
-            }
-        });
-
-        $smt.eq(o_idx).animate(
-            { top: "-="+height+"px" }, settings.duration,
-            function() {
-                $(this).css("display", "none").css("top", height+"px");
-            }
-        );
-
-        c_idx = (o_idx + 1) % count;
-
-        $smt.eq(c_idx).css("display", "block").animate(
-            { top: "-="+height+"px" }, settings.duration,
-            function() {
-                o_idx = c_idx;
-            }
-        );
+    $.fn.topRolling = function(option) {
+        if (methods[option])
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
+        else
+            return methods.init.apply(this, arguments);
     }
-}
+}(jQuery));
 
 $(function() {
     $("#smt_<?php echo $this->type; ?>").topRolling();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").topRolling({ interval: 5000, duration: 800 });
+    //$("#smt_<?php echo $this->type; ?>").topRolling({ interval: 2000, duration: 800 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).topRolling();
+        //$("#"+id).topRolling({ interval: 2000, duration: 800 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).topRolling("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 20 끝 -->
\ No newline at end of file
diff --git a/skin/shop/basic/main.30.skin.php b/skin/shop/basic/main.30.skin.php
index f78548937..679d980fb 100644
--- a/skin/shop/basic/main.30.skin.php
+++ b/skin/shop/basic/main.30.skin.php
@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -89,86 +87,131 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.leftRolling = function(option)
-{
-    var $smt = this.find("ul.sct_ul");
-    var $smt_a = $smt.find("a.sct_a");
-    var width = $smt.eq(0).width();
-    var count = $smt.size();
-    var c_idx = smt_o_idx = 0;
-    var fx = null;
+(function($) {
+    var intervals = {};
 
-    // 기본 설정값
-    var settings = $.extend({
-        interval: 7000,
-        duration: 1500
-    }, option);
+    var methods = {
+        init: function(option)
+        {
+            var $smt = this.find("ul.sct_ul");
+            var $smt_a = $smt.find("a.sct_a");
+            var width = $smt.eq(0).width();
+            var count = $smt.size();
+            var c_idx = smt_o_idx = 0;
+            var fx = null;
+            var el_id = this[0].id;
 
-    if(count < 2)
-        return;
+            // 기본 설정값
+            var settings = $.extend({
+                interval: 6000,
+                duration: 1500
+            }, option);
 
-    // $smt width 설정
-    $smt.width(width);
+            if(count < 2)
+                return;
 
-    fx = setInterval(left_rolling, settings.interval);
+            set_interval();
 
-    $smt.hover(
-        function() {
-            if(fx != null)
-                clearInterval(fx);
+            $smt.hover(
+                function() {
+                    clear_interval();
+                },
+                function() {
+                    set_interval();
+                }
+            );
+
+            $smt_a.on("focusin", function() {
+                clear_interval();
+            });
+
+            $smt_a.on("focusout", function() {
+                set_interval();
+            });
+
+            function left_rolling() {
+                $smt.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
+
+                $smt.eq(o_idx).animate(
+                    { left: "-="+width+"px" }, settings.duration,
+                    function() {
+                        $(this).css("display", "none").css("left", width+"px");
+                    }
+                );
+
+                c_idx = (o_idx + 1) % count;
+
+                $smt.eq(c_idx).css("display", "block").animate(
+                    { left: "-="+width+"px" }, settings.duration,
+                    function() {
+                        o_idx = c_idx;
+                    }
+                );
+            }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(left_rolling, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
         },
-        function() {
-            if(fx != null)
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(left_rolling, settings.interval);
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
         }
-    );
+    };
 
-    $smt_a.on("focusin", function() {
-        if(smt_interval != null)
-            clearInterval(smt_interval);
-    });
-
-    $smt_a.on("focusout", function() {
-        if(fx != null)
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(left_rolling, settings.interval);
-    });
-
-    function left_rolling() {
-        $smt.each(function(index) {
-            if($(this).is(":visible")) {
-                o_idx = index;
-                return false;
-            }
-        });
-
-        $smt.eq(o_idx).animate(
-            { left: "-="+width+"px" }, settings.duration,
-            function() {
-                $(this).css("display", "none").css("left", width+"px");
-            }
-        );
-
-        c_idx = (o_idx + 1) % count;
-
-        $smt.eq(c_idx).css("display", "block").animate(
-            { left: "-="+width+"px" }, settings.duration,
-            function() {
-                o_idx = c_idx;
-            }
-        );
+    $.fn.leftRolling = function(option) {
+        if (methods[option])
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
+        else
+            return methods.init.apply(this, arguments);
     }
-}
+}(jQuery));
 
 $(function() {
     $("#smt_<?php echo $this->type; ?>").leftRolling();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").leftRolling({ interval: 7000, duration: 1500 });
+    //$("#smt_<?php echo $this->type; ?>").leftRolling({ interval: 6000, duration: 1500 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).leftRolling();
+        //$("#"+id).leftRolling({ interval: 6000, duration: 1500 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).leftRolling("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 30 끝 -->
\ No newline at end of file
diff --git a/skin/shop/basic/main.40.skin.php b/skin/shop/basic/main.40.skin.php
index 596c3a304..4ad0b770f 100644
--- a/skin/shop/basic/main.40.skin.php
+++ b/skin/shop/basic/main.40.skin.php
@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -93,70 +91,118 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.itemlistShow = function(option)
-{
-    var $smt = this.find("ul.sct_ul");
-    var $smt_a = $smt.find("a.sct_a");
-    var count = $smt.size();
-    var c_idx = o_idx = 0;
-    var fx = null;
+(function($) {
+    var intervals = {};
 
-    // 기본 설정값
-    var settings = $.extend({
-        interval: 3000
-    }, option);
+    var methods = {
+        init: function(option)
+        {
+            var $smt = this.find("ul.sct_ul");
+            var $smt_a = $smt.find("a.sct_a");
+            var count = $smt.size();
+            var c_idx = o_idx = 0;
+            var fx = null;
+            var el_id = this[0].id;
 
-    if(count < 2)
-        return;
+            // 기본 설정값
+            var settings = $.extend({
+                interval: 4000
+            }, option);
 
-    fx = setInterval(itemlist_show, settings.interval);
+            if(count < 2)
+                return;
 
-    $smt.hover(
-        function() {
-            if(fx != null)
-                clearInterval(fx);
-        },
-        function() {
-            if(fx != null)
-                clearInterval(fx);
+            set_interval();
 
-            if(count > 1)
-                fx = setInterval(itemlist_show, settings.interval);
-        }
-    );
+            $smt.hover(
+                function() {
+                    clear_interval();
+                },
+                function() {
+                    set_interval();
+                }
+            );
 
-    $smt_a.on("focusin", function() {
-        if(fx != null)
-            clearInterval(fx);
-    });
+            $smt_a.on("focusin", function() {
+                clear_interval();
+            });
 
-    $smt_a.on("focusout", function() {
-        if(fx != null)
-            clearInterval(fx);
+            $smt_a.on("focusout", function() {
+                set_interval();
+            });
 
-        if(count > 1)
-            fx = setInterval(itemlist_show, settings.interval);
-    });
+            function itemlist_show() {
+                $smt.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
 
-    function itemlist_show() {
-        $smt.each(function(index) {
-            if($(this).is(":visible")) {
-                o_idx = index;
-                return false;
+                $smt.eq(o_idx).css("display", "none");
+                c_idx = (o_idx + 1) % count;
+                $smt.eq(c_idx).css("display", "block");
+                o_idx = c_idx;
             }
-        });
 
-        $smt.eq(o_idx).css("display", "none");
-        c_idx = (o_idx + 1) % count;
-        $smt.eq(c_idx).css("display", "block");
-        o_idx = c_idx;
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(itemlist_show, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.itemlistShow = function(option) {
+        if (methods[option])
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
+        else
+            return methods.init.apply(this, arguments);
     }
-}
+}(jQuery));
 
 $(function() {
     $("#smt_<?php echo $this->type; ?>").itemlistShow();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").itemlistShow({ interval: 3000 });
+    //$("#smt_<?php echo $this->type; ?>").itemlistShow({ interval: 4000 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).itemlistShow();
+        //$("#"+id).itemlistShow({ interval: 4000 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).itemlistShow("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 40 끝 -->
\ No newline at end of file
diff --git a/skin/shop/basic/main.50.skin.php b/skin/shop/basic/main.50.skin.php
index b8b41b3ae..72fe8c010 100644
--- a/skin/shop/basic/main.50.skin.php
+++ b/skin/shop/basic/main.50.skin.php
@@ -9,11 +9,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -92,95 +90,143 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.itemDrop = function(option)
-{
-    var $smt = this.find("ul.sct_ul");
-    var $smt_a = $smt.find("a.sct_a");
-    var count = $smt.size();
-    var height = $smt.height();
-    var c_idx = o_idx = 0;
-    var fx = null;
-    var delay = 0;
+(function() {
+    var intervals = {};
 
-    // 기본 설정값
-    var settings = $.extend({
-        interval: 6000,
-        duration: 800,
-        delay: 300
-    }, option);
+    var methods = {
+        init: function(option)
+        {
+            var $smt = this.find("ul.sct_ul");
+            var $smt_a = $smt.find("a.sct_a");
+            var count = $smt.size();
+            var height = $smt.height();
+            var c_idx = o_idx = 0;
+            var fx = null;
+            var delay = 0;
+            var el_id = this[0].id;
 
-    // 초기실행
-    if(count > 0) {
-        $smt.eq(0).find("li.sct_li").each(function() {
-            $(this).delay(delay).animate(
-                { top: "+="+height+"px" }, settings.duration
-            );
+            // 기본 설정값
+            var settings = $.extend({
+                interval: 6000,
+                duration: 800,
+                delay: 300
+            }, option);
 
-            delay += settings.delay;
-        });
-    }
+            // 초기실행
+            if(count > 0 && intervals[el_id] == undefined) {
+                $smt.eq(0).find("li.sct_li").each(function() {
+                    $(this).delay(delay).animate(
+                        { top: "+="+height+"px" }, settings.duration
+                    );
 
-    if(count > 1)
-        fx = setInterval(item_drop, settings.interval);
-
-    $smt.hover(
-        function() {
-            if(fx != null)
-                clearInterval(fx);
-        },
-        function() {
-            if(fx != null)
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(item_drop, settings.interval);
-        }
-    );
-
-    $smt_a.on("focusin", function() {
-        if(fx != null)
-            clearInterval(fx);
-    });
-
-    $smt_a.on("focusout", function() {
-        if(fx != null)
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(item_drop, settings.interval);
-    });
-
-    function item_drop() {
-        $smt.each(function(index) {
-            if($(this).is(":visible")) {
-                o_idx = index;
-                return false;
+                    delay += settings.delay;
+                });
             }
-        });
 
-        delay = 0;
+            set_interval();
 
-        $smt.eq(o_idx).css("display", "none");
-        $smt.eq(o_idx).find("li.sct_li").css("top", "-"+height+"px");
-
-        c_idx = (o_idx + 1) % count;
-
-        $smt.eq(c_idx).css("display", "block");
-        $smt.eq(c_idx).find("li.sct_li").each(function() {
-            $(this).delay(delay).animate(
-                { top: "+="+height+"px" }, settings.duration
+            $smt.hover(
+                function() {
+                    clear_interval();
+                },
+                function() {
+                    set_interval();
+                }
             );
 
-            delay += settings.delay;
-        });
+            $smt_a.on("focusin", function() {
+                clear_interval();
+            });
 
-        o_idx = c_idx;
+            $smt_a.on("focusout", function() {
+                set_interval();
+            });
+
+            function item_drop() {
+                $smt.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
+
+                delay = 0;
+
+                $smt.eq(o_idx).css("display", "none");
+                $smt.eq(o_idx).find("li.sct_li").css("top", "-"+height+"px");
+
+                c_idx = (o_idx + 1) % count;
+
+                $smt.eq(c_idx).css("display", "block");
+                $smt.eq(c_idx).find("li.sct_li").each(function() {
+                    $(this).delay(delay).animate(
+                        { top: "+="+height+"px" }, settings.duration
+                    );
+
+                    delay += settings.delay;
+                });
+
+                o_idx = c_idx;
+            }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(item_drop, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.itemDrop = function(option) {
+        if (methods[option])
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
+        else
+            return methods.init.apply(this, arguments);
     }
-}
+}(jQuery));
+
 $(function() {
     $("#smt_<?php echo $this->type; ?>").itemDrop();
     // 기본 설정값을 변경하려면 아래처럼 사용
     //$("#smt_<?php echo $this->type; ?>").itemDrop({ interval: 6000, duration: 800, delay: 300 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).itemDrop();
+        //$("#"+id).itemDrop({ interval: 3000, duration: 800, delay: 300 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).itemDrop("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 50 끝 -->
\ No newline at end of file