/**
 * @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,
	slideWidth: 128,
	slideVisibleItems: 4,
	minHeight: 100,
	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(){
		if(this.active < this.items.length){
			this.active += this.slideitems;
		}
		this.setSlide('left');
		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.slideVisibleItems >= 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){
		for (var i = 0; i < this.items.length; i++) {
			var el = this.items[i];
			
			// Innerhalb des sichtbaren bereichs oder nicht
			if (i >= this.active && i < this.active + this.slideVisibleItems) {
				var newHeight = el.origHeight;
				var newOpacity = 1;
			}
			else {
				var newHeight = this.minHeight;
				var newOpacity = 0;
			}

			// Links oder rechts
			if(dir == 'left'){
				var newX = el.getX() - (this.slideWidth * this.slideVisibleItems);
			}
			else{
				var newX = el.getX() + (this.slideWidth * this.slideVisibleItems);
			}
			
			el.shift({
				x: newX,
				height: newHeight,
				opacity: newOpacity,
				easing: this.transitionEasing,
				duration: this.transitionDuration
			});
		}
		
		this.fireEvent('onSetSlide');
	}
});