/*
*   Lazy Slider, 16/7/2009
*
*/

/* if you have <ul id="lazyslider">li>element1</li>
            <li>element2</li>
            <li>element3</li>
            <li>element4</li>
            <li>element5</li>
            <li>element6</li>
        </ul>
        on your html page, using this plugin will create the following markup
                
    <div class="lazywrapper">
    <div class="lazyslider-container">
        <ul id="lazyslider" class="lazy-skin">
            <li>element1</li>
            <li>element2</li>
            <li>element3</li>
            <li>element4</li>
            <li>element5</li>
            <li>element6</li>
        </ul>
        <div class="lazyslider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <span class="slider-lbl1"/>
        <span class="slider-lbl2"/>
        <span class="slider-lbl3"/>
        <span class="slider-lbl4"/>
        <span class="slider-lbl5"/>
        <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"/>
        </div>
    </div>
    </div>
*/

(function($) {
$.fn.lazyslider=function(o){
        return this.each(function(){
           new $ls(this,o);
        });
};

    var defaults={
        step: 8,  //brzina na vrtenje na listata
        fastleft:'.slider-lbl1', //elementot koj sho kje bide za brzo u levo
        left:'.slider-lbl2',
        right:'.slider-lbl3',
        sliderClassname:'lazyslider',
        fastright:'.slider-lbl5',
        btnsWidth:100,
        btnsHeight:23,
        leftPos:100,
        fastleftPos:0,
        fastrightPos:0,
        slowcontrols:true,
        rightPos:100
    };

    

$.lazyslider=function (e,o) {
        //opcii na izvrsuvanje na plagino
     this.options    = $.extend({}, defaults, o || {});
     //li listata od sliki
     this.list=null;
     this.container=null;
     this.slidero=null;
     this.sirina=null;
     this.wid='width';
     this.lef='left';
     var self=this;
     
             if (e.nodeName == 'UL' || e.nodeName == 'OL') {
            	 this.list = $(e);
            	 this.container = this.list.parent();
					 		
            if (this.container.hasClass('lazyslider-container')) {
            
                if (!this.container.parent().hasClass('lazywrapper'))
                	this.container = this.container.wrap('<div></div>').parent().addClass('lazywrapper');

                this.container = this.container.parent();
               
            } else if (!this.container.hasClass('lazyvlad-container'))
            	{
					this.container = this.list
                .wrap('<div></div>').parent()
                .addClass('lazyslider-container')
                .wrap('<div></div>').parent()
                .append('<div class="ctrls"><span class="slider-lbl1"></span><span class="slider-lbl2"></span><span class="slider-lbl3"></span><span class="slider-lbl4"></span><span class="slider-lbl5"></span></div>')
                .addClass('lazywrapper');
					}
        } else {
            this.container = $(e);
            this.list = $(e).find('>ul,>ol,div>ul,div>ol');
        }
            this.container.append('<div class="lazyhandle-container"><div class="'+this.options.sliderClassname+'"></div></div>').children('div');
            this.slidero=$('.'+this.options.sliderClassname);
				var li=this.list.children('li');
            var cw=self.intval(this.list.parent().css('width'));



 if (li.size() > 0) {
            var wh = 0;
            li.each(function() {
                wh += self.dimension(this);
            });
this.list.css(this.wid,wh+'px');
this.sirina=wh-cw;
this.slidero.slider({
          min: 0,
          max: wh-cw,
          animate:true,
          slide: function (ev, ui) {
          self.list.css('left', '-' + ui.value + 'px');
          }, 
          change: function (ev, ui) {
            self.list.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
          }
        });
                   // console.log(this.list);
	//mozebi ne se deklarirani vo css-sot zatoa gi deklarirame na novo tuka
    
                     
    $(this.container).find(this.options.fastleft).css({'width':this.options.btnsWidth+'px','height':this.options.btnsHeight+'px','left':this.options.fastleftPos+'px','position': 'absolute','z-index': '500'});    
    if (this.options.slowcontrols){
    $(this.container).find(this.options.left).css({'width':this.options.btnsWidth+'px','height':this.options.btnsHeight+'px','left':this.options.leftPos+'px','position': 'absolute','z-index': '500'});
    $(this.container).find(this.options.right).css({'width':this.options.btnsWidth+'px','height':this.options.btnsHeight+'px','right':this.options.rightPos+'px','position': 'absolute','z-index': '500'});
    }
    $(this.container).find(this.options.fastright).css({'width':this.options.btnsWidth+'px','height':this.options.btnsHeight+'px','right':this.options.fastrightPos+'px','position': 'absolute','z-index': '500'});
    
		this.moveleft($(this.container).find(this.options.fastleft),this.options.step);
		if (this.options.slowcontrols){
        this.moveleft($(this.container).find(this.options.left),self.intval(this.options.step*0.3));
		this.moveright($(this.container).find(this.options.right),self.intval(this.options.step*0.3));
        }
		this.moveright($(this.container).find(this.options.fastright),this.options.step);
 }
};
var $ls=$.lazyslider;

	$ls.fn = $ls.prototype = {
        lazyslider: '0.0.1'
    };
    
    $ls.fn.extend=$ls.extend=$.extend;

$ls.fn.extend({
    dimension:function (e){ 
    var el = e.jquery != undefined ? e[0] : e;
    //mora da ima display:block i da ima width definirano za da rabote u safari i chrome
    var padding=this.intval($(el).css('padding-left'))+this.intval($(el).css('padding-right'));
    var old=this.intval($(el).css('width'))+padding;
    return old;
    },
    intval: function(v) {
            v = parseInt(v);
            return isNaN(v) ? 0 : v;
    },
    moveleft: function (el,step){
    
 
        var povtari=null;
        if (!el)
            return 0;

        
         var list=this.list;
    
         var mi=this.intval;
         var slidero=this.slidero;
         

       el.hover(
            function(){
                var numlevo=mi(list.css('left'));
                povtari=setInterval(function(){
                    numlevo=numlevo+step;
                    if (numlevo>0) {clearInterval(povtari);list.css('left',0 + 'px');return null;}
                    list.css('left',numlevo + 'px');
                    
                    slidero.slider('option','value',numlevo*(-1));},20);
                    $(this).addClass('hover');
            },
            function(){
                $(this).removeClass('hover');
                clearInterval(povtari);});
                
            },
     moveright: function (el,step) {
         var povtari=null;
        if (!el)
            return 0;
         
         var list=this.list;
         var mi=this.intval;
         var slidero=this.slidero;
         var sirina=this.sirina;
            
            el.hover(
            function(){
               var numlevo=mi(list.css('left'));
                povtari=setInterval(function(){
                    numlevo=numlevo-step;
                    if (numlevo<sirina*(-1)) {clearInterval(povtari);list.css('left',sirina*(-1)+'px');return null;}
                    list.css('left',numlevo+'px');
                    slidero.slider('option','value',numlevo*(-1));},20);
                     $(this).addClass('hover');
            },
            function(){
                 $(this).removeClass('hover');
                clearInterval(povtari);});
     }
 });
})(jQuery);