/////////////////////////////////////
// create by 
//        Roberto Alonso-Gomez, 2007
////////////////////////////////////
$xx.pcil = 
{
    cn : "pcil",
    tp : '<div xx="${this}" class="pcil" id="imglist">\
            <div class="pcil_btCx" >\
                <div class="pcil_fnl" xxev="btEv">\
                </div>\
                <div class="pcil_fnr" xxev="btEv">\
                </div>\
            </div>\
            <div class="pcil_sr">\
                <div class="pcil_ct" xxev="ctEvents">$$</div>\
            </div>\
          </div>',
    cx : '<div xxev="itemEvent" class="pcil_inner">\
              <img class="pcil_img" src="${self.path+this.img}" xxtx="${this.tx?this.tx:\'\'}" title="${this.tx?this.tx:\'\'}" alt="${this.tx?this.tx:\'\'}" />\
              <img class="pcil_sel" src="${self.fn.iSelsrc(this, self)}" xxtx="${this.tx?this.tx:\'\'}" />\
          </div>',
          
    imgdf : '<img class="pcil_bt" src="%" />',
    
    def:
    {
        si:"",  // select image
        path:"",
        mode: 0,
        items:[]     // this is all the items 
    },
    
    lv :  // localvar
    {
        btn: null,  // btNext
        btp: null,  // btPrev
        tip: null,
        imn: null,
        imp: null,
        scroll: null,
        mode: 0,
        btshift : 20,
        delay : 30,  // delay for shift
        msel : false,
        dxp : -1,
        dgS : false,
        wstrip : 0,
        witem : 0,
        speed : 0,
        htime : -1,
        selItem : null,
        stop  : true,
        enableHint : false,
        selEnter : false
    },
    
    afterCreate: function()
    {
        var lv = this.xxlv;
		if (lv.btn==null)
		{
			var d = $xx.dom;
			lv.btn = d.fchild(this);
			lv.scroll = d.next(lv.btn);
			lv.btp = d.fchild(lv.btn);
			lv.btn = d.next(lv.btp);
			lv.tip = d.createElement('div');
			if (lv.tip) 
				lv.tip.className = "pcil_tip";
			var v=this.xxv;
			var id = $xx.pcil.imgdf;

			if (v.btn)
				lv.btn.innerHTML = id.replace('%', v.path + v.btn);

			if (v.btp)
				lv.btp.innerHTML = id.replace('%', v.path + v.btp);

			lv.imn = d.fchild(lv.btn);
			lv.imp = d.fchild(lv.btp);
			lv.imp.style.left = (-lv.btshift*$em)+"em";

			if (v.mode)
				lv.mode = v.mode;

			if (v.delay)
				lv.delay = v.delay;

			if (v.btw)
				lv.btshift = v.btw;
	         
			$xx.widget.afterCreate.apply(this);  // inherited

			lv.wstrip = 0; 
			for (var f = d.fchild(d.fchild(lv.scroll)); f; f=d.next(f))
			{
				lv.witem = f.offsetWidth
				lv.wstrip += lv.witem;
			}
            if (lv.wstrip<lv.scroll.offsetWidth)
            {
                var r = $xx.dom.fchild(lv.scroll);
                lv.imn.style.left = (-lv.btshift*$em)+"em";
                lv.imp.style.left = (-lv.btshift*$em)+"em";
                r.style.left = "0em";
            }
		}
    },

    iSelsrc: function(This, self)
    {
        var img = This.si;
        if (!img)
            img = self.si;
        return (self.path+img);
    },

    doClick: function(el)
    {
        var lv = this.xxlv;
        if (lv)
        {
            var r = $xx.dom.fchild(lv.scroll);
            if (r)
            {
                if (lv.wstrip<lv.scroll.offsetWidth)
                {
                    lv.imn.style.left = (-lv.btshift*$em)+"em";
                    lv.imp.style.left = (-lv.btshift*$em)+"em";
                    r.style.left = "0em";
                    return;
                }
                var l = 0;
                var op = 1;
                if (lv.btn==el) // next
                    op=-1;    
                switch(lv.mode)
                {
                    case 1:
                        lv.speed += 0.5;
                    case 0:
                        l = Math.round(r.offsetLeft+lv.speed*op);
                        break;
                    case 2:
                        l = Math.round((r.offsetLeft/lv.witem)+op)*lv.witem;
                        break;
                }
                var w = -(lv.wstrip-lv.scroll.offsetWidth);
                if (l<0)
                {
                    if (l<=w)
                    {
                        r.style.left = (w*$em)+"em";;
                        lv.imn.style.left = (-lv.btshift*$em)+"em";
                        lv.stop = true; 
                    }
                    else
                    {
                        r.style.left = (l*$em)+"em";
                        var im = lv.imp;
                        if (op==1)
                            im = lv.imn;
                        if ($xx.dom.left(im)==-lv.btshift)
                           im.style.left = "0em";
                    }
                }
                else
                {
                    r.style.left = 0;
                    lv.imp.style.left = (-lv.btshift*$em)+"em";
                    if (w<0)
                        lv.imn.style.left = "0em";
                    lv.stop = true; 
                }
            }
        }
        if (lv.htime!=-1 && lv.stop)
        {
            window.clearInterval(lv.htime);
            lv.htime = -1;
        }
    },    
    
    doSelect : function(item, nsel)
    {
        var v = this.xxv;
        var lv = this.xxlv;
        if (lv.dgS) 
            return;
        if (lv.selEnter) 
            return;
        lv.selEnter = true;
        var usel = function(it)
                  {
                        var im = $xx.dom.fchild(it);
                        if (im)
                        {
                            im.className= "pcil_img";
                            im = $xx.dom.next(im);
                            im.style.display = "none";
                        }
                        it.xxsel = false;
                  };
        var sel = function(it)
                  {
                    var im = $xx.dom.fchild(it);
                    if (im)
                    {
                        im.className= "pcil_imgsel";
                        im = $xx.dom.next(im);
                        im.style.display = "block";
                        it.xxsel = true;
                    }
                    lv.selItem = it;
                    if (!nsel)
                    {
                        var ix = $xx.dom.cindex(it);
                        if (ix<v.items.length)
                        {
                            var e = v.items[ix];
                            if (e.onclick)
                            {
                                var da = e.onclick;
                                setTimeout(function(){$xx.kernel.eval(da);}, 200);
                            }
                                
                            else
                                if (e.href)
                                   {
                                    var url = new String(e.href);
                                    var t = url.replace(/amp\;/g, '');
                                    window.location.href = t;
                                }
                        }
                    }
                  };
        if (v.msel)
        {
            if (item.xxsel)
                usel(item)
            else
                sel(item);
        }
        else
        {
            if (lv.selItem)
                usel(lv.selItem);
                
            sel(item);
       }
       lv.selEnter = false;
    },
    
    select : function(id)
    {
        var v = this.xxv;
        if (v)
        {
            v = v.items;
            for (var i=0; i<v.length;i++)
            {
                if (v[i].onsel==id)
                {
                    var sc = this.xxlv.scroll;
                    if (!sc)
                    {
                        this.xxself.afterCreate.apply(this);
                        sc = this.xxlv.scroll;
                    }
                    if (sc)
                    {
                        var it = $xx.dom.fchild(sc).childNodes[i];
                        if (it)
                        {
                            this.xxself.doSelect.apply(this, [it, true]);
                            this.xxself.doVisible.apply(this, [it]);
                        }
                    }
                    break;   
                }
            }
            //imglist.xxv.items[0].onsel
        }
    },
    
    doVisible: function(it)
    {
        var lv = this.xxlv;
        var r = $xx.dom.fchild(lv.scroll);
        if (r)
        {
            while (-it.offsetLeft>r.offsetLeft)
                this.xxself.doClick.apply(this, [lv.btp]);
            while (-it.offsetLeft<(r.offsetLeft-lv.scroll.offsetWidth))
                 this.xxself.doClick.apply(this, [lv.btn]);
        }
    },
    // events
    evResize: function(e)
    {
        var lv = this.xxlv;
        var r = $xx.dom.fchild(lv.scroll);
        if (r.offsetLeft<0)
            lv.imp.style.left = "0em";
        else
        {
            r.style.left = "0em";;
            lv.imp.style.left = (-lv.btshift*$em)+"em";
        }
            
        var w = -(lv.wstrip-lv.scroll.offsetWidth);
        if (w>0)
        {
            lv.imn.style.left = (-lv.btshift*$em)+"em";
            lv.imp.style.left = (-lv.btshift*$em)+"em";
            r.style.left = '0em';
        }
        else
            if (r.offsetLeft<=w)
            {
                r.style.left = (w*$em)+"em";
                lv.imn.style.left = (-lv.btshift*$em)+"em";
            }
            else
                lv.imn.style.left = "0em";
    },
    
    evIOver : function(e, ctrl)
    {
        var im = $xx.dom.fchild(this);
        if (im)
        {
			if (!this.xxsel)
				im.className= "pcil_imgover";
			var lv = ctrl.xxlv;
			if (lv.tip) 
			{
				if (lv.tipOut) 
					clearTimeout(lv.tipOut);
					
			    if (lv.enableHint) 
			    {
				    lv.mx = ((e.pageX || e.clientX)-2)+"px";
				    lv.my = ((e.pageY || e.clientY)+19)+"px";
				    lv.tipOut = setTimeout(function()
				    {
					    lv.tip.innerHTML = im.getAttribute("xxtx");
					    lv.tip.style.left = lv.mx;
					    lv.tip.style.top = lv.my;
					    lv.tip.style.display="inline";
					    lv.tipOut = setTimeout(function()
					    {
					        if (lv.tipOut) 
					        {
					            var h = lv.tipOut;
					            try
					            {
			                        lv.tip.style.display="none";
			                        lv.tip.innerText = "";
			                        lv.tipOut = null;
					                clearTimeout(h);
			                    }
			                    catch(e)
			                    {}
					        }
			            }, 6000);
				    }, 600);
			    }
			}
		}
    },

    evIOut : function(e, ctrl)
    {
		var lv = ctrl.xxlv;
        var im = $xx.dom.fchild(this);
        if (im && !this.xxsel)
            im.className= "pcil_img";
		if (lv.tip) 
		{
			lv.tip.style.display="none";
			lv.tip.innerText = "";
			if (lv.tipOut) 
			{
				clearTimeout(lv.tipOut);
			    lv.tipOut = null;
			}	
		}
    },
    
    evIMove : function(e, ctrl)
    {
		var lv = ctrl.xxlv;
		lv.mx = ((e.pageX || e.clientX)-2)+"px";
		lv.my = ((e.pageY || e.clientY)+19)+"px";
		
        //lv.mx = ((e.pageX || e.clientX)+5)*$em+"em";
		//lv.my = ((e.pageY || e.clientY)+15)*$em+"em";
	},
    
    evIClick : function(e, ctrl)
    {
        ctrl.xxself.doSelect.apply(ctrl, [this]);
    },
    
    // buttons events
    evBtOver : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        var im = $xx.dom.fchild(this);
        if (im && lv && $xx.dom.left(im)!=-lv.btshift)
            im.style.left = (-(lv.btshift*2)*$em)+"em";
            
        lv.stop = true; 
    },
    
    evBtOut : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        var im = $xx.dom.fchild(this);
        if (im && lv && $xx.dom.left(im)!=-lv.btshift)
            im.style.left = "0em";
    },
    
    evBtDown : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        var im = $xx.dom.fchild(this);
        if (im && lv && ($xx.dom.left(im)!=-lv.btshift))
        {
            im.style.left = (-(lv.btshift*3)*$em)+"em";
            if (lv.htime!=-1)
                 window.clearInterval(lv.htime)
            //debugger;
            var self = this;
            switch(lv.mode)
            {
                case 0:
                  lv.speed = 3;
                  break;
                case 1:
                  lv.speed = 0.5;
                  break;
                case 2:
                  lv.speed = lv.witem;
                  break;
            }
            lv.stop = false;
            lv.htime = window.setInterval(function()
                                          {
                                            ctrl.xxself.doClick.apply(ctrl, [self]);
                                          }, lv.delay); 
        }
    },
    
    evBtPrev : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        var im = $xx.dom.fchild(this);
        if (im && lv && ($xx.dom.left(im)!=lv.btshift))
            im.style.left = (-(lv.btshift*3)*$em)+"em";
    },
    
    evCtmdown: function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        if (lv.selEnter) 
            return;
        lv.selEnter = true;
        if (lv)
        {
            var w = -(lv.wstrip-lv.scroll.offsetWidth);
            if (w<0 && (this.setCapture))
            {
                this.setCapture();
                lv.dxp = e.clientX;
                lv.dgS = true;
            }
        }
        lv.selEnter = false;
    },
    
    evDragGo : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        if (lv.selEnter) 
            return;
        lv.selEnter = true;
        if (lv && lv.dgS)
        {
            var s = this.style;
            var p = $xx.dom.left(this)+(e.clientX-lv.dxp);
            var w = -(lv.wstrip-lv.scroll.offsetWidth);
            if (p>0)
            {
                s.left = "0em";
                lv.imp.style.left = (-lv.btshift*$em)+"em";
            }
            else
              if (p<w)
              {
                lv.imn.style.left = (-lv.btshift*$em)+"em";
                s.left = (w*$em)+"em";
              }
              else
              {
                lv.imp.style.left = "0em";
                lv.imn.style.left = "0em";
                s.left = (p*$em)+"em";
              }
            lv.dxp = e.clientX;
        }
        lv.selEnter = false;
    },
    
    evDragstop : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        if (lv.dgS) 
        {
            lv.dgS = false;
            this.releaseCapture();
        }
    }
    
};
// events definitions

$xx.pcil.events =
{
    resize : $xx.pcil.evResize
};

$xx.pcil.itemEvent =
{
    mouseover : $xx.pcil.evIOver,
    mouseout  : $xx.pcil.evIOut,
    mousemove : $xx.pcil.evIMove,
    click     : $xx.pcil.evIClick
};

$xx.pcil.ctEvents =
{
    mousedown   : $xx.pcil.evCtmdown,
    mousemove   : $xx.pcil.evDragGo,
    mouseup     : $xx.pcil.evDragstop,
    losecapture : $xx.pcil.evDragstop,
    dragstop    : $xx.pcil.evDragstop
};

$xx.pcil.btEv =
{
    mouseover  : $xx.pcil.evBtOver,
    mouseout   : $xx.pcil.evBtOut,
    mousedown  : $xx.pcil.evBtDown,
    mouseup    : $xx.pcil.evBtOver
};

$xx.pcil.btPrevEv =
{
    mouseover : $xx.pcil.evBtOver,
    mouseout  : $xx.pcil.evBtOut,
    mousedown  : $xx.pcil.evBtDown,
    mouseup    : $xx.pcil.evBtOver
};

$xx.kernel.mix($xx.widget, $xx.pcil); // inherited data
$xx.addWidget('pcil', $xx.pcil);   // register the widget

//============================================================

/////////////////////////////////////
// create by 
//        Roberto Alonso-Gomez, 2007
//
// buttons, you have to pass the strip image, were aver state are represented by 
// two images [(1)[img normal,img over],(2)[img normal,img over], many states]
////////////////////////////////////
$xx.btn = 
{
    cn : "btn",
    tp : '<div xx="${this}" class="btn" ${this.id?"id=\'"+this.id+"\'":\'\'}><div class="btn_bt">\
                ${this.btn?"<img class=\'btn_img\' src=\'"+ this.btn +"\' xxev=\'btEv\' />":""}\
          </div></div>',

    def:
    {
        shift: 16
    },
    
    lv :                // localvar
    {
        btn: null,     
        frame : null,
        bt: 0           // every state is a new bt
    },
    
    afterCreate: function()
    {
        var d = $xx.dom;
        var lv = this.xxlv;
        lv.frame = d.fchild(this);
        lv.btn = d.fchild(lv.frame);
        var v=this.xxv;
        if (v.shift)
            lv.shift = v.shift;
        if (lv.frame)
        {
            var st = lv.frame.style;
            var st2 = lv.btn.style;
            if (v.btw)
            {
                st.width = (v.btw*$em)+"em";
                st2.width = (4*v.btw*$em)+"em";
            }
            if (v.bth)
            {
                st.height = (v.bth*$em)+"em";
                st2.height = (v.bth*$em)+"em";
            }
            
        }
        $xx.widget.afterCreate.apply(this);
    },

    setButton : function(bt)
    {
        var lv = this.xxlv;
        if (lv)
        {
            lv.bt = bt;
            if (lv.btn)
                lv.btn.style.left = (-(lv.bt*2*lv.shift)*$em)+"em";
        }
    },
    
    // buttons events
    evBtOver : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        this.style.left = (-(((lv.bt*2)+1)*lv.shift)*$em)+"em";
    },
    
    evBtOut : function(e, ctrl)
    {
        var lv = ctrl.xxlv;
        this.style.left = (-(lv.bt*2*lv.shift)*$em)+"em";
    },
    
    evBtDown : function(e, ctrl)
    {
        var v = ctrl.xxv;
        if (v.press)
            $xx.kernel.eval.apply(ctrl, [v.press, ctrl]);

        /*
        if (lv.bt==0)
            lv.bt = 1;
        else
            lv.bt = 0;
        */
    }
};
// events definitions

$xx.btn.events =
{
};

$xx.btn.btEv =
{
    mouseover  : $xx.btn.evBtOver,
    mouseout   : $xx.btn.evBtOut,
    mousedown  : $xx.btn.evBtDown,
    mouseup    : $xx.btn.evBtOver
};


$xx.kernel.mix($xx.widget, $xx.btn); // inherited data
$xx.addWidget('btn', $xx.btn);   // register the widget