/*
 <style type="text/css">
  ul{list-style: none; position: relative; top: 0; height: 0;}
  ul li{float: left;}
 </style>
 <script type="text/javascript">
    jQuery(function(){
            $("#mojdiv").slide_photos({
                    prev: ".prev",
                    next: ".next"
            });
  });
</script>

div id="mojdiv" style="width: 174px; height: 134px; overflow: hidden;">
        <ul>
            <li id="id1"><img src ="1.jpg" alt="text 1" /></li>
            <li id="id2"><img src ="2.jpg" alt="text 2" /></li>
            <li id="id3"><img src ="3.jpg" alt="text 3" /></li>
        </ul>
    </div>
    <a href="javascript:void(0)" class="prev">PREV</a>
    <a href="javascript:void(0)" class="next">NEXT</a>
    <div class="text_field"></div>
 */



jQuery.fn.slide_cal = function(settings) {
	settings = jQuery.extend({
		prev: ".prev",
		next: ".next",
		positionLI: 0,
        step: 1
	}, settings);
	return this.each(function()
        {
                var container       =   $(this);
                var width_li        =   container.find('li').css('width');
                width_li = width_li.replace("px", "");
                var number_of_li    =   container.find("li").size()-1;
                var temp            =   settings.positionLI-1;
                var left            =   0;

                //set ul width and left
                container.find('ul').css('width',((number_of_li+1)*width_li)+'px');
                container.find('ul').css('left',-(temp*width_li)+'px');

                //Bind next event
                $(settings.next).bind("click", function()
                {
                    var next    = 0;
                    
                    if((temp+settings.step-1) == number_of_li)
                    {
                        next = 0;
                        left = next*width_li;
                    }
                    else
                    {
                        next = temp+1;
                        left = next*width_li;
                    }
                    
                    container.find('ul').css('left',-left+'px');
                    
                    //Hide first displayed
                    //container.find("li").eq(temp).animate({opacity:0},200);
                    temp = next;
                });
                
                //Bind prev event
                $(settings.prev).bind("click", function()
                {
                    var prev      = 0;
                    if((temp-1) < 0)
                    {
                        prev = number_of_li-4;
                        left = prev*width_li;
                    }
                    else
                    {
                        prev = temp-1;
                        left = prev*width_li;

                    }
                    container.find('ul').css('left',-left+'px');
                   
                    temp = prev;
                });
	});	
};