/*
 <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_photos = function(settings) {
	settings = jQuery.extend({
		prev: ".prev",
		next: ".next",
		text_field: ".text_field",
        id: ""
	}, settings);
	return this.each(function()
        {
                var container       =   $(this);
                var width_li        =   container.find('li').width();
                var number_of_li    =   container.find("li").size()-1;
                var temp            =   0;
                var left            =   0;
                var ids_split       =   settings.id.split("#");

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

                //Bind next event
                $(settings.next).bind("click", function()
                {
                    var temp_li = container.find("li").eq(temp);
                    var next    = 0;

                    if(temp == number_of_li)
                    {
                        next = 0;
                        left = next*width_li;
                    }
                    else
                    {
                        next = temp+1;
                        left = next*width_li;
                    }
                    temp_li.animate({opacity:0},500,function()
                                        {
                                            container.find('ul').css('left',-left+'px');
                                            container.find("li").eq(next).css('display','block').animate({opacity:1});
                                            $(settings.text_field + ' a').html(container.find("li").eq(next).children('a').children('img').attr('alt'));
                                            $(settings.text_field + ' a').attr("href","http://uhyhbekonom.com/"+ids_split[next]+"/");
                                        });
                    temp = next;
                });
                
                //Bind prev event
                $(settings.prev).bind("click", function()
                {
                    var temp_li_p = container.find("li").eq(temp);
                    var prev      = 0;

                    if(temp == 0)
                    {
                        prev = number_of_li;
                        left = prev*width_li;
                    }
                    else
                    {
                        prev = temp-1;
                        left = prev*width_li;
                    }
                    temp_li_p.animate({opacity:0},500,function()
                                        {
                                            container.find('ul').css('left',-left+'px');
                                            container.find("li").eq(prev).css('display','block').animate({opacity:1});
                                            $(settings.text_field + ' a').html(container.find("li").eq(prev).children('a').children('img').attr('alt'));
                                            $(settings.text_field + ' a').attr("href","http://uhyhbekonom.com/"+ids_split[prev]+"/");
                                        });
                    temp = prev;
                });
	});	
};