/*
* 
* 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;
  var _child = p.child;
  var _auto = p.auto;
  var _itv;

  function turnLeft() {
    _width = _imgFrame.find(_child + ":first").width();
    _imgFrame.animate({ marginLeft: -_width }, 5000, '', function() {
      _imgFrame.find(_child + ":first").appendTo(_imgFrame);
      _imgFrame.css("marginLeft", 0);
      if (_auto) turnLeft();
    });
  }

  if (_auto) turnLeft();

};