/**
 * @author 卢亚伟
 * email ryw401@gmail.com
 *
 * picFocus 图片轮换效果
 * 初始状态：由picFoucsFn提供大图片，小图片列表，标题等内容及容器。
 * 动画顺序：1、标题先隐藏
 *          2、大图片开始渐隐
 *          3、大图片隐藏完成后，更改大图片src，标题内容，右边小图片样式
 *          4、大图片开始显示
 *          5、大图片完成，开始显示标题
 * 事件：1、小图片列表click事件：清除当前定时器，修改相应内容，然后开始新定时器
 *       2、大图片，标题 mouseover：清除定时器，
 *                     click：进入标题中链接页面，
 *                     mouseleave：开始新定时器，
 *       3、右边图片列表可以上下移动，需要保证当前焦点图片一直显示
 */
function picFoucsFn(json){
    //图片翻转（大图片，右侧小图片列表）内容读取
    var pics = JSON.decode(json);
    var img = [];
    var dd = [];
    var el = [];
    var src = [];
    var title = [];
    var lnk = [];
    //小图片列表
    pics.picLittle.each(function(item, index){
        img[index] = new Element('img');
        dd[index] = new Element('dd');
        img[index].set('src', item);
        el[index] = dd[index].adopt(img[index]);
        src[index] = pics.picBig[index];
        title[index] = pics.picInfo[index];
        lnk[index] = pics.link[index];
    })
    var data = {
        'src': src,
        'title': title,
        'link': lnk
    }
    
    dd[0].set('class', 'onFoucs');
    $('picLitleList').getElement('dl').adopt(el);
    
    //大图片
    $('picShowList').adopt(new Element('img', {
        'src': pics.picBig[0],
        'alt': pics.picInfo[0]
    }));
    
    //标题
    var a = new Element('a', {
        'text': pics.picInfo[0],
        'href': pics.link[0]
    })
    $('picTitle').adopt(a);
    new Asset.images(pics.picBig,{
		onComplete:function(){
			return picFocus('picShowList', 'picTitle', 'picLitleLists', data);
		}
	});
    
    
}


var picFocus = function(id, tId, lId, data){
    //id大图片容器，tId标题容器，lId小图片列表，
    //data：大、小图片，标题内容、链接值。由picFoucsFn提供
    if (!$(id) || !data) {
        return
    }
    var n = 0; //当前播放图片的位置数
    var l = $(lId).getChildren().length;
    var img = $(id).getFirst();//大图片
    var s = '';
    var listMorph = '';
    
    var h = $(tId).getStyle('height').toInt(); //图片标题所占高度
    var a = $(tId).getFirst();//标题连接
    this.morph = new Fx.Morph(img, { //大图片隐藏动画定义
        duration: 1200,
        transition: Fx.Transitions.Sine.easeOut,
        onComplete: function(){ //大图片隐藏完成后事件
            $(lId).getChildren()[n].erase('class');
            n = n + 1;
            if (n == data.src.length) {
                n = 0;
            }
            
            $(lId).getChildren()[n].set('class', 'onFoucs');
            s = $(lId).getChildren()[n].getPosition($(lId).getParent());//焦点图片所在位置
            if (s.y >= 200) {//焦点图片在下方
                if (l - n >= 4) {
                    listMorph = new Fx.Morph($(lId));
                    listMorph.start({
                        'top': $(lId).getPosition($(lId).getParent()).y - s.y
                    })
                }
                if (l - n < 4) {
                    listMorph = new Fx.Morph($(lId));
                    listMorph.start({
                        'top': $(lId).getPosition($(lId).getParent()).y - 66 * (l - n)
                    })
                }
            }
            if (s.y < 0) {//焦点图片在上方
                listMorph = new Fx.Morph($(lId));
                listMorph.start({
                    'top': $(lId).getPosition($(lId).getParent()).y - s.y
                })
                
            }
            
            img.set({
                'src': data.src[n],
                'alt': data.title[n]
            })
            
            a.set({
                'text': data.title[n],
                'href': data.link[n]
            })
			
			show.delay(500); //大图片隐藏完成后，开始执行显示动画
				
        }
    });
    
    this.morph2 = new Fx.Morph($(tId), {
        duration: 800
    
    })
    this._mo = new Fx.Morph(img, {//大图片显示动画定义
        duration: 500,
        onComplete: function(){
            this._mo2 = new Fx.Morph($(tId), {//标题显示动画
                duration: 300
            });
            this._mo2.start({
                'height': h
            });
            
        }
    });
    
    $(lId).getChildren().addEvent('click', function(){//小图片click事件监听
        $clear(fn);//清除现有定时器
        $(lId).getChildren()[n].erase('class');//取消当前焦点样式
        this.set('class', 'onFoucs');//点击处，获得焦点样式
        n = $(lId).getChildren().indexOf(this);//获得最新焦点所在列表位置值
        img.set('src', data.src[n]);//更新对应大图片
        a.set({ //更新对应标题
            'text': data.title[n],
            'href': data.link[n]
        })
        fn = hide.periodical(8000) //开始新定时器
    })
    $(tId).addEvents({ // 标题mouseover，mouseleave事件监听
        'mouseover': function(){
            $clear(fn);//清除现有定时器
        },
        'mouseleave': function(){
            fn = hide.periodical(8000) //开始新定时器
        }
    })
    $(id).getFirst().addEvents({//大图片mouseover，click，mouseleave事件监听
        'mouseover': function(){
            $clear(fn);//清除现有定时器
            this.setStyle('cursor', 'hand')
        },
        'mouseleave': function(){
            fn = hide.periodical(8000) //开始新定时器
            this.erase('style');
        },
        'click': function(){
            var url = $(tId).getFirst().get('href');
            window.open(url)
        }
    })
	var fn = hide.periodical(8000);//定义定时器
	
    
}

var hide = function(){ // 大图片，图片标题隐藏 动画
    morph.start({
        'opacity': '0',
        'top': '-10'
    });
    morph2.start({
        'height': '0'
    });
}
var show = function(ih){//大图片显示动画
    _mo.start({
        'opacity': [0, 1],
        'top': '4'
    });
}


var picMoveBtnFn = function(id, lBtn, rBtn, tBtn, bBtn){
    //上下左右按钮功能
    //id:图片容器，lbtn：左移动按钮，rBtn：右移动按钮，tBtn：上移动按钮，bBtn：下移动按钮
    if (!$(id)) {
        return
    }
    
    var l = $(id).getChildren().length; // 图片个数
    if(!$(id).getFirst()){ return }
    //x:水平移动一次的距离，y:垂直移动一次的距离
    var size = $(id).getFirst().getSize();
    var x = size.x + $(id).getFirst().getStyle('marginLeft').toInt() + $(id).getFirst().getStyle('marginRight').toInt();
    var y = size.y + $(id).getFirst().getStyle('marginTop').toInt() + $(id).getFirst().getStyle('marginBottom').toInt();
    
    var s = new Hash({//当前id所在位置
        'x': $(id).getStyle('left').toInt() || 0,
        'y': $(id).getStyle('top').toInt() || 0
    });
    
    //图片活动范围   maxX:水平方向 ；maxY：垂直方向
    var maxX = (x * l) - $(id).getParent().getStyle('width').toInt();
    var maxY = (y * l) - $(id).getParent().getStyle('height').toInt();
    
    if (maxX <= 0 && $(lBtn)) {
        $(lBtn).setStyle('display', 'none');
    }
    
    var morph = new Fx.Morph($(id)); //初始动画
    morph.set({
        'left': s.get('x'),
        'top': s.get('y')
    })
    
    //水平方向左右按钮事件
    if ($(lBtn)) {
        $(lBtn).addEvent('click', function(e){
            if (e) 
                e.stop();
            morph.start({
                'left': s.get('x') - x
            })
            s.set('x', s.get('x') - x);
            $(rBtn).setStyle('display', 'block');
            if (s.get('x') <= -maxX) {
                $(lBtn).setStyle('display', 'none');
            }
        })
        $(rBtn).addEvent('click', function(e){
            if (e) 
                e.stop();
            morph.start({
                'left': s.get('x') + x
            })
            s.set('x', s.get('x') + x);
            $(lBtn).setStyle('display', 'block');
            if (s.get('x') >= 0) {
                $(rBtn).setStyle('display', 'none');
            }
        })
        $(rBtn).setStyle('display', 'none');
    }
    //垂直方向左右按钮事件
    if ($(tBtn)) {
        $(bBtn).addEvent('click', function(e){
            if (e) 
                e.stop();
            if (s.get('y') <= -maxY) {
                return s.get('y')
            }
            morph.start({
                'top': s.get('y') - y
            })
            return s.set('y', s.get('y') - y);
        });
        $(tBtn).addEvent('click', function(e){
            if (e) 
                e.stop();
            if (s.get('y') >= 0) {
                return s.get('y')
            }
            morph.start({
                'top': s.get('y') + y
            })
            return s.set('y', s.get('y') + y);
        });
    }
}