/**
 * @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, elId).elements;
		this.items	= [];
		var tmp = Ext.select(this.itemSelector, true, elId).elements;
		Ext.each(tmp, function(el){
			var id = Ext.id(el);
			var tel = Ext.get(id);
			
			var thumb = Ext.select('a[@class*=thumbimg]', true, id);
			
			this.items.push({
				id : id,
				item :{
					thumb : Ext.select('a[@class*=thumbimg]', true, id).elements[0].firstChild.src,
					medium: Ext.select('a[@class*=thumbimg]', true, id).elements[0].href,
					large: Ext.select('a[@class*=thumbimg]', true, id).elements[0].rel
				},
				caption: Ext.select('p[@class*=caption_thumb]', true, id).elements[0].innerHTML,
				desc: Ext.select('p[@class*=desc_thumb]', true, id).elements[0].innerHTML,
				copy: Ext.select('p[@class*=copy_thumb]', true, id).elements[0].innerHTML
			});
		}, this);

		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.slidercanvas 	= Ext.select('div[@class*=slidercanvas]', 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;

		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, this.items[0]);
		}
		if (this.mctype == 'image') {
			this.showItem(undefined, this.items[0]);
		}
		/* 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 = this.items[this.itemIndex-1];
			this.showItem(e, item);
/*
			if(this.currentThumb < this.active){
				this.prev();
			}
*/
		}, this);

		this.ffwbtnSingle.on('click', function(e, p){
			var item = this.items[this.itemIndex+1];
			this.showItem(e, item);
/*
			if(this.currentThumb+1 > this.active+this.slideitems){
				this.next();
			}
*/
		}, this);


		Ext.each(this.items, function(el){
			var link = Ext.select('a[@class*=thumbimg]', true, el.id);
			link.on('click', function(e, p, c){
//					alert('click');
				this.showItem(e, el);
				if(typeof e != 'undefined'){
					e.stopEvent();
				}						
				return(false);
			}, this);
		}, this);
	
		var tmp = Ext.get(this.items[0].id);
	
		this.itemsperset = parseInt(tmp.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++){
			if(this.items[i].id == item.id){
				retval=i;
			}			
		}	
		return(retval);
	},

	showItem: function(e, item){

		this.itemIndex = this.findItemIndex(item);
		this.activeItem = item;

		// showing video-detail 
		if (this.mctype == 'video') {
			var mediaspace = Ext.select('div[@class=mediaplayer]', 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]', 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);
			var hidden  = Ext.select('div[@class=hidden]', true, this.elId);
			var detail_image = Ext.select('div[@class=detail_image]', true, this.elId);
			
			var thtml = '<a href="'+this.activeItem.item.large+'" title="'+this.activeItem.caption+'" rel="lightbox'+ this.elId + '" class="lb_'+ this.elId + '">'
					+ '<img src="'+this.activeItem.item.medium+'" alt="'+this.activeItem.caption+'" />'
					+ '</a>';

			detail_image.fadeOut({
			    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
			    easing: 'easeOut',
			    duration: .5,
			    remove: false,
			    useDisplay: true,
				scope: this,
				callback: function(){

					mediaspace.update(thtml);
					mediatitle.update(this.activeItem.caption);
					mediadesc.update(this.activeItem.desc);		
					mediacopy.update(this.activeItem.copy);
					detail_image.fadeIn({
					    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
					    easing: 'easeOut',
					    duration: 1
					});
					var lbhtml = ''
					Ext.each(this.items, function(el){
						lbhtml += '<a href="'+el.item.large+'" title="'+el.caption+'" rel="lightbox'+ this.elId + '" class="lb_'+ this.elId + '">'
							+ '<img src="'+el.item.medium+'" alt="'+el.caption+'" />'
							+ '</a>';					
					}, this);
					hidden.update(lbhtml);
					Ext.ux.Lightbox.register('a[rel^=lightbox'+ this.elId + ']', true);
				}
			});
		}

		/* mark all items as nonactive */
		Ext.each(this.items, function(el){
			Ext.select('div[@class*=thumb]', true, el.id).removeClass('active');
		}, this);
		/* mark active item */
		Ext.select('div[@class*=thumb]', true, this.items[this.itemIndex].id).addClass('active');
		
		this.doArrows();
		this.fireEvent('onItemShow');
	},

	prev: function(){
		for(var i=0; i<this.items.length; i++){
			var el = Ext.get(this.items[i].id);
			el.setWidth(100, true);
			el.setHeight(100);				
		}
		this.doArrows();
	},
	
	next: function(){
		for(var i=0; i<this.items.length; i++){
			var el = Ext.get(this.items[i].id);
			el.setWidth(0, true);
			el.setHeight(0);				
		}
		this.doArrows();
	},
	
	dummy: function(){
		// just for delay
	},
	
	doArrows: function(){
		
		if(this.itemIndex <= 0){
			this.backbtnSingle.setVisible(false);
		}else{
			this.backbtnSingle.setVisible(true);
		}
		if(this.itemIndex >= 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.setWidth(0, true);
				el.setHeight(0);				
				this.dummy();
			}
		}else{
			for (var i = this.active; i < max; i++) {
				this.dummy();
				var el = this.items[i];
				el.setWidth(el.origWidth, true);
				el.setHeight(el.origHeight);
				this.dummy();
			}
		}
		this.fireEvent('onSetSlide');
	}
});