/**
 * @author mba
 */

Ext.ns('Ext.ux');
Ext.ux.MediaCenter = Ext.extend(Ext.util.Observable, {
	
    transitionEasing: 'easeIn',
	transitionDuration: .75,
    itemSelector: 'div.item',
	active: 0,
	mctype: '',
	slideset: true,
	itemsperset: 0,
	slideitems: 1,
	flvplayer: '/js/player-licensed.swf',
	events: ['onItemShow', 'onSetSlide'],

    constructor: function(elId, config) {

        config = config || {};
        Ext.apply(this, config);
        Ext.ux.MediaCenter.superclass.constructor.call(this, config);

		this.elId = elId;
		this.items = Ext.select(this.itemSelector, true, elId).elements		
		this.backbtn = Ext.select('div[@class=back]', true, elId);
		this.ffwbtn = Ext.select('div[@class=more]', true, elId);
		this.slider = Ext.select('div[@class=slider]', true, elId);
		this.caption = Ext.select('div[@class=cb-head]', true, elId);

		this.backbtnSingle = Ext.select('div[@class=back single]', true, elId);
		this.ffwbtnSingle = Ext.select('div[@class=more single]', true, elId);
		
		this.currentThumb = 0;

//		back single
//		more single
//		this.backbtnSingle = 
//		this.ffwbtnSingle
		
		this.initEvents();
		
		/* for initial use */
		if (this.mctype == 'video') {
			var item = Ext.select('img', true, this.items[0].id).elements[0].dom;
			this.showItem(undefined, item);
		}
		if (this.mctype == 'image') {
			var item = Ext.select('img', true, this.items[0].id).elements[0].dom;
			this.showItem(undefined, item);
		}
		/* updating itemcount */
		Ext.each(this.caption.elements, function(el){
			el.dom.childNodes[el.dom.childNodes.length-1].innerHTML = this.items.length+' '+this.lang.items;
		}, this);
    },

	initEvents: function(){
		this.backbtn.on('click', function(e, p){
			this.prev();
		}, this);

		this.ffwbtn.on('click', function(e, p){
			this.next();
		}, this);


		this.backbtnSingle.on('click', function(e, p){
			var item = Ext.select('img', true, this.items[this.currentThumb-1].id).elements[0].dom;
			this.showItem(e, item);
			if(this.currentThumb < this.active){
				this.prev();
			}
		}, this);

		this.ffwbtnSingle.on('click', function(e, p){
			var item = Ext.select('img', true, this.items[this.currentThumb+1].id).elements[0].dom;
			this.showItem(e, item);
			if(this.currentThumb+1 > this.active+this.slideitems){
				this.next();
			}
		}, this);


		Ext.each(this.items, function(el, p){
			this.itemwidth = el.getWidth;
			el.origWidth = Ext.decode(Ext.encode(el.getWidth()));
			el.origHeight = Ext.decode(Ext.encode(el.getHeight()));
			
			this.itemwidth = el.origWidth;
			var link = Ext.select('a', true, el.id)
			Ext.each(link.elements, function(iel){
				iel.addClass('lb_'+this.elId)
				if (this.mctype != 'lightbox') {
					iel.on('click', function(e, p, c){
						this.showItem(e, p);
					}, this);
				}
			}, this);
		}, this);
		this.itemsperset = parseInt(this.slider.elements[0].getWidth() / this.itemwidth);

		if(this.slideset) {
			this.slideitems = this.itemsperset;
		}

		if (this.mctype == 'lightbox') {
			Ext.ux.Lightbox.register('a.' + 'lb_' + this.elId, true);
		}
	},
	
	/* getting the index of active item */
	findItemIndex: function(item){
		var retval = 0;
		for(var i=0; i<this.items.length; i++){
			var titem = Ext.select('img', true, this.items[i].id)
			if(titem.elements[0].id == item.id){
				retval=i;
			}
		}
		return(retval);
	},
	
	showItem: function(e, item){
		/* showing video-detail */
		if (this.mctype == 'video') {
			var mediaspace = Ext.select('div[@class=mediaplayer]', true, this.elId);
			var canvas = mediaspace.elements[0]
            var so = new SWFObject(this.flvplayer, 'ply', canvas.getWidth(), canvas.getHeight(), '9', '#ffffff');
            so.addParam('allowfullscreen','true');
            so.addParam('allowscriptaccess','always');
            so.addParam('wmode','opaque');
			so.addVariable('file',item.parentNode.href);
			so.addVariable('image',item.parentNode.rel);
            so.write(canvas.id);
			var thumbs = Ext.select('div[@class*=active]', true, this.elId);
			var thdiv = Ext.get(item.parentNode.parentNode);
			thumbs.removeClass('active');
			thdiv.addClass('active');
			if(typeof e != 'undefined'){
				e.stopEvent();
			}
		}
		/* showing image-detail */
		if (this.mctype == 'image') {
			var mediaspace = Ext.select('div[@class=image]', true, this.elId);
			var mediatitle = Ext.select('h2[@class=imgtitle]', true, this.elId);
			var mediacopy  = Ext.select('div[@class=copy]', true, this.elId);
			var mediadesc  = Ext.select('p[@class=imgdesc]', true, this.elId);
			
			Ext.each(mediatitle.elements, function(el){				
				var thtml = item.parentNode.title;				
				el.update(thtml);				
			}, this);
			
			var thumbdescription = Ext.select('p[@class=imgedesc_thumb]', true, item.parentNode.parentNode.parentNode);
			var thumbcopy = Ext.select('p[@class=copy_thumb]', true, item.parentNode.parentNode.parentNode);

			Ext.each(mediacopy.elements, function(el){			
				if(thumbcopy.elements.length){
					el.update(thumbcopy.elements[0].dom.innerHTML)
				}
			}, this);
		
			Ext.each(mediadesc.elements, function(el){				
				if(thumbdescription.elements.length){
					el.update(thumbdescription.elements[0].dom.innerHTML)
				}
			}, this);
			
			Ext.each(mediaspace.elements, function(el){				
				var thtml = '<a href="'+item.parentNode.rel+'" title="'+item.parentNode.title+'" rel="lightbox" class="lb_'+ this.elId + '">'
					+ '<img src="'+item.parentNode.href+'" alt="'+item.parentNode.title+'" />'
					+ '</a>';				
				
				el.fadeOut({
				    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
				    easing: 'easeOut',
				    duration: 1,
				    remove: false,
				    useDisplay: true,
					scope: this,
					callback: function(){
						el.update(thtml);
						el.fadeIn({
						    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
						    easing: 'easeOut',
						    duration: 1
						});
						Ext.ux.Lightbox.register('a[rel^=lightbox]');
					}
				});
				
			}, this);
			var count = Ext.select('div[@class*=count]', true, this.elId);

			this.currentThumb = this.findItemIndex(item);

			Ext.each(count.elements, function(el){
				el.update(parseInt(this.currentThumb+1)+' '+this.lang.from+' '+this.items.length);
			}, this);

			var thumbs = Ext.select('div[@class*=active]', true, this.elId);
			var thdiv = Ext.get(item.parentNode.parentNode);
			thumbs.removeClass('active');
			thdiv.addClass('active');
			if(typeof e != 'undefined'){
				e.stopEvent();
			}
		}
		
		this.doArrows();
		this.fireEvent('onItemShow');
	},
	
	prev: function(){
		if(this.active > 0){
			this.active -= this.slideitems;
		}
		this.setSlide('right');
		this.doArrows();
	},
	
	next: function(){
		this.setSlide('left');
		if(this.active < this.items.length){
			this.active += this.slideitems;
		}
		this.doArrows();
	},
	
	dummy: function(){
		/* just for delay */
	},
	
	doArrows: function(){
		
		if(this.currentThumb <= 0){
			this.backbtnSingle.setVisible(false);
		}else{
			this.backbtnSingle.setVisible(true);
		}
		if(this.currentThumb >= this.items.length-1){
			this.ffwbtnSingle.setVisible(false);
		}else{
			this.ffwbtnSingle.setVisible(true);
		}
		
		/* ffw slider */		
		if(this.active+this.slideitems > this.items.length){
			this.ffwbtn.setVisible(false);
		}else{
			this.ffwbtn.setVisible(true);
		}

		/* back slider */
		if(this.active <= 0){
			this.backbtn.setVisible(false);
		}else{
			this.backbtn.setVisible(true);
		}
	},
	
	setSlide: function(dir){
		var max = (this.active+this.slideitems);
		if(max > this.items.length){
			max = this.items.length;
		}
		if(dir == 'left'){
			for (var i = this.active; i < max; i++) {
				var el = this.items[i];
				el.shift({
					width: 0,
					height: 0,
					opacity: 0,
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				this.dummy();
			}
		}else{
			for (var i = this.active; i < max; i++) {
				this.dummy();
				var el = this.items[i];
				el.shift({
					width: el.origWidth,
					height: el.origHeight,
					opacity: 1,
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				this.dummy();
			}
		}
		
		this.fireEvent('onSetSlide');
	}
});