/*
 * Based on....
 * ImageScroller - a Image Horizental Scroll Viewer 
 * Version 0.1
 * @requires jQuery v1.2.1
 * 
 * Copyright (c) 2007 Luan
 * Email verycss-ok@yahoo.com.cn 
 * 
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Example:
 *   #viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
 *   #viewerFrame {width:505px; clear:both; padding:0;}
 *   #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
 *   #viewer a {display:block; float:left; width:100px; height:100px;}
 *   <script type="text/javascript">
 *   $(function(){
 *   	$("#viewer").imageScroller({
 *   	next:"btn1",
 *   	prev:"btn2",
 *   	frame:"viewerFrame",
 *   	width:100, 
 *   	child:"a",
 *   	auto:true
 *   	});	 
 *   });
 *   </script>
 *   <div id="viewer"><div id="viewerFrame">
 *   <a href=""><img src="pre1.jpg"></a>
 *   <a href=""><img src="pre2.jpg"></a>
 *   <a href=""><img src="pre3.jpg"></a>
 *   <a href=""><img src="pre4.jpg"></a>
 *   <a href=""><img src="pre5.jpg"></a>
 *   </div></div>
 *   <span id="btn1">prev</span><br/><span id="btn2">next</span>   
*/

jQuery.fn.imageScroller = function(params) {
    var p = params || {
        next: "buttonNext",
        prev: "buttonPrev",
        frame: "viewerFrame",
        width: 100,
        child: "a",
        auto: true
    };
    var _btnNext = $("#" + p.next);
    var _btnPrev = $("#" + p.prev);
    var _imgFrame = $("#" + p.frame);
    var _width = p.width;
    var _child = p.child;
    var _auto = p.auto;
    var _itv;
    var _moving = false;

    var turnLeft = function() {
        if (!_moving) {
            _moving = true;
            _btnPrev.unbind("click", turnLeft);
            if (_auto) autoStop();
            _imgFrame.animate({ marginLeft: -_width }, 'fast', '', function() {
                _imgFrame.find(_child + ":first").appendTo(_imgFrame);
                _imgFrame.css("marginLeft", 0);
                _btnPrev.bind("click", turnLeft);
                if (_auto) autoPlay();
            });
            _moving = false;
        }
    };

    var turnRight = function() {
        if (!_moving) {
            _moving = true;
            _btnNext.unbind("click", turnRight);
            if (_auto || _itv != 0) {
                autoStop();

            }
            copyImage(_imgFrame.find(_child + ":last").clone()).show().prependTo(_imgFrame);
            _imgFrame.css("marginLeft", -_width);
            _imgFrame.animate({ marginLeft: 0 }, 'fast', '', function() {
                _imgFrame.find(_child + ":last").remove();
                _btnNext.bind("click", turnRight);
                if (_auto) {
                    autoPlay();
                }
            });
            _moving = false;
        }
    };

    _btnNext.css("cursor", "hand").click(turnRight);
    _btnPrev.css("cursor", "hand").click(turnLeft);

    var copyImage = function(img) {
        if (!img[0].attachEvent) {
            img[0].addEventListener('mouseover', function() { autoStop(); }, false);
            img[0].addEventListener('mouseout', function() { autoPlay(); }, false);
        }
        return img;
    }
    var autoPlay = function() {
        if (_itv != 0) {
            window.clearInterval(_itv);
        }
        _itv = window.setInterval(turnRight, 2000);
    };
    var autoStop = function() {
        window.clearInterval(_itv);
        _itv = 0;
    };
    var element = $("#" + p.frame)[0];

    if (element.attachEvent) {
        element.attachEvent('onmouseover', function() { autoStop(); }, false);
        element.attachEvent('onmouseout', function() { autoPlay(); }, false);
    }
    else {
        element = $("#" + p.frame + ' img');
        for (ix = 0; ix < element.length; ix++) {
            element[ix].addEventListener('mouseover', function() { autoStop(); }, false);
            element[ix].addEventListener('mouseout', function() { autoPlay(); }, false);
        }
    }

    if (_auto) autoPlay();
};