function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');
    var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');
    var oCaret=getByClass(oDiv, 'caret')[0];
    var aPos=[];
    var timer=null;
    var i=0;
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].index=i;
        aPos[i]=aLi[i].offsetLeft;
    }
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].style.position='absolute';
        aLi[i].style.left=aPos[i]+'px';
    }
    
    aBtn[0].onclick=function ()
    {
        var i=aLi.length-1;
        
        clearTimeout(timer);
        
        function next()
        {
            var obj=aLi[i];
            if(i>=aLi.length/2)
            {
                miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next, 100);
                i--;
            }
            else
            {
                timer=setTimeout(next2, 150);
            }
        }
        
        function next2()
        {
            if(i>=0)
            {
                miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next2, 100);
            }
            i--;
        }
        
        next();
        
        aBtn[1].className='';
        this.className='show';
        miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
    };
    
    aBtn[1].onclick=function ()
    {
        var i=0;
        
        clearTimeout(timer);
        
        function next()
        {
            var obj=aLi[i];
            if(i<aLi.length/2)
            {
                miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next, 100);
                i++;
            }
            else if(i==aLi.length/2)
            {
                timer=setTimeout(next2, 150);
            }
        }
        
        function next2()
        {
            if(i<aLi.length)
            {
                miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next2, 100);
            }
            i++;
        }
        
        next();
        
        aBtn[0].className='';
        this.className='show';
        miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
    };
};