Ext.ns('Ext.ux');

Ext.ux.SimpleCarousel = Ext.extend(Ext.util.Observable, {
    transitionDuration: 0.5,
    transitionEasing: 'easeOut',
    activeSlide: 0,
    wrap: true,

    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Ext.ux.SimpleCarousel.superclass.constructor.call(this, config);

        this.addEvents(
            'beforeprev',
            'prev',
            'beforenext',
            'next',
            'change',
            'play',
            'pause',
            'freeze',
            'unfreeze'
        );

        this.el = Ext.get(elId);
        this.slides = this.els = [];

        this.initMarkup();
        this.initEvents();

        if(this.carouselSize > 0) {
            this.refresh();
        }
    },

    initMarkup: function() {
        var dh = Ext.DomHelper;

        this.carouselSize = 0;

        this.els.container = this.el.select('.container').item(0);
        this.els.slidesWrap = this.el.select('.wrap').item(0);

        this.els.navNext = this.el.select('.next').item(0);
        this.els.navPrev = this.el.select('.prev').item(0);

	this.viewport = this.els.container.getWidth();

        this.el.select('.item').each(function(item) {
            this.slides.push(Ext.get(item.dom));
        }, this);
        this.carouselSize = this.slides.length;
    },

    initEvents: function() {
        this.els.navPrev.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.prev();
        }, this);

        this.els.navNext.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.next();
        }, this);
    },

    prev: function() {
        if (this.fireEvent('beforeprev') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide - 1);

        this.fireEvent('prev', this.activeSlide);
        return this;
    },

    next: function() {
        if(this.fireEvent('beforenext') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide + 1);

        this.fireEvent('next', this.activeSlide);
        return this;
    },

    clear: function() {
        this.els.slidesWrap.update('');
        this.slides = [];
        this.carouselSize = 0;
        this.pause();
        return this;
    },

    add: function(el, refresh) {
        var item = Ext.fly(el).appendTo(this.els.slidesWrap);
        this.slides.push(item);
        if(refresh) {
            this.refresh();
        }
        return this;
    },

    refresh: function() {
        this.carouselSize = this.slides.length;
        if(this.carouselSize > 0) {
		var width=0;
		Ext.each(this.slides,function(i){
			width += i.getWidth() + parseInt(i.getStyle('margin-left'),10) + parseInt(i.getStyle('margin-right'),10) +3;
		},this)
		//width=100000;
		this.els.slidesWrap.setWidth(width);
            this.activeSlide = 0;
            this.setSlide(0, true);
        }
        return this;
    },

    setSlide: function(index, initial) {
        if(!this.wrap && !this.slides[index]) {
            return;
        }
        else if(this.wrap) {
            if(index < 0) {
                index = this.carouselSize-1;
            }
            else if(index > this.carouselSize-1) {
                index = 0;
            }
        }
        if(!this.slides[index]) {
            return;
        }

        var offset = this.slides[index].getLeft() - this.els.slidesWrap.getLeft() - parseInt(this.slides[index].getStyle('margin-left'),10);
        if (!initial) {
			var xNew = (-1 * offset) + this.els.container.getX();
			this.els.slidesWrap.stopFx(false);
			this.els.slidesWrap.shift({
				duration: this.transitionDuration,
				x: xNew,
				easing: this.transitionEasing
			});
        }
        else {
            this.els.slidesWrap.setStyle('left', '0');
        }

        this.activeSlide = index;
        this.updateNav();
        this.fireEvent('change', this.slides[index], index);
    },

    updateNav: function() {
        this.els.navPrev.removeClass('ux-carousel-nav-disabled');
        this.els.navNext.removeClass('ux-carousel-nav-disabled');
        if(!this.wrap) {
            if(this.activeSlide === 0) {
                this.els.navPrev.addClass('ux-carousel-nav-disabled');
            }
            if(this.activeSlide === this.carouselSize-1) {
                this.els.navNext.addClass('ux-carousel-nav-disabled');
            }
        }
    }
});
//----------------
	function autoPreview(id){
		this.el = Ext.get(id);
		var elm = this.el;
		this.data = elm.select('div.container .item');
		this.bigimgcnt = Ext.get(elm.select('.bigimg').item(0).dom);
		this.sliderscnt = Ext.get(elm.select('.sliders').item(0).dom);
		this.textcnt = Ext.get(elm.select('.autotext').item(0).dom);
		this.bigimg = [];
		this.text = [];
		this.sliders = [];
		this.data.each(function(el,t,i){
			var img = el.getAttribute('img');
			var href = el.getAttribute('href');
			this.sliders[i] = Ext.get(this.sliderscnt.createChild({
				tag: 'li',
				cls: 'item',
				children: [{
					tag: 'a',
					href: href,
					num: i,
					children: [{
						tag: 'img',
						src: '/pic.php?src='+img+'&amp;w=95&amp;h=71&amp;method=min'
					}]
				}]
			}));
			this.bigimg[i] = Ext.get(this.bigimgcnt.createChild({
				tag: 'a',
				href: href,
				num: i,
				style: 'display: none;',
				children: [{
					tag: 'img',
					src: '/pic.php?src='+img+'&amp;w=369&amp;h=279&amp;method=max&amp;bg=FFFFFF00'
				}]
			}));
			this.text[i] = Ext.get(this.textcnt.appendChild(el).dom);
			this.text[i].dom.style.display = 'none';
		}, this);
		this.sliderscnt.select('a').on('mouseenter', function(e, t){
			this.changeCnt(Ext.fly(e.getTarget('a')).getAttribute('num'));
		},this);
		this.prev = -1;
		if (!Ext.isEmpty(this.bigimg)) {
			this.changeCnt(0);
		}
	}
	autoPreview.prototype.changeCnt = function (num){
		if (this.prev != num) {
			if (this.prev != -1) {
				this.bigimg[this.prev].dom.style.display = 'none';
				this.text[this.prev].dom.style.display = 'none';
				this.sliders[this.prev].replaceClass('sliderdiv_h','sliderdiv');
			}
			this.prev = num;
			this.bigimg[num].dom.style.display = 'block';
			this.text[num].dom.style.display = 'block';
			this.sliders[num].replaceClass('sliderdiv','sliderdiv_h');
		}
	}
//--------
	function menuSelect(top,subs){
		this.topMenu = Ext.get(top).select('li');
		this.subMenus = Ext.get(subs).select('.subMenu');
		this.subMenus.setStyle({display: 'none'});
		this.topMenu.on('click',function(ev,t,o){
			ev.preventDefault();
			this.changeMenu(this.topMenu.indexOf(Ext.fly(t).findParent('li')));
		},this)
	}
	menuSelect.prototype.changeMenu = function (num){
		this.topMenu.removeClass('s');
		this.topMenu.item(num).addClass('s');
		this.subMenus.setStyle({display: 'none'});
		this.subMenus.item(num).setStyle({display: 'block'});
	}