Ext.namespace('MySB');
Ext.UpdateManager.defaults.indicatorText = '<div class="loading-indicator">&nbsp;</div>';
Ext.Updater.defaults.loadScripts = true;
Ext.Updater.defaults.disableCaching = true;

MySB.VerticalTabPanel = Ext.extend(Ext.ux.VerticalTabPanel, {
	start: 0,
	maxItems: 10,
	itemCount: -1,
	maxOffset: -1,
	tabItems: null,
	filter: null,
	
	initComponent: function() {
		MySB.VerticalTabPanel.superclass.initComponent.call(this);
		this.tabItems = this.initialConfig.tabItems;
	},
	
	showItems: function(start) {
		
		this._initCounters();
			
		if (isNaN(start))
			start = this.findPanel(start);
		
		if (start == null)
			start = 0;
		
		this.start = Math.max(0, Math.min(this.maxOffset, start));

		this.disable();

		this.removeAll();
		
		var x = -1;

		for (var item in this.tabItems) {
			if (this._isFiltered(item))
				continue;
			
			x++;
		
			if (x < this.start)
				continue;

			if (x >= this.start + this.maxItems)
				continue;
		
			this.addTabItem(item);
		}
		
		var el;

		// counter
		if (el = Ext.get('tabRange'))
			el.update((this.start + 1) + '-' + Math.min(this.start + this.maxItems, this.itemCount) );
				
		if (el = Ext.get('tabCount'))
			el.update(x+1);				

		// "enable/disable" pager buttons
		if (el = Ext.get('tabUpItem')) {
			if (this.start == 0)
				el.addClass('inactive');
			else
				el.removeClass('inactive');
		}
			
		if (el = Ext.get('tabDownItem')) {
			if (this.start == this.maxOffset)
				el.addClass('inactive');
			else
				el.removeClass('inactive');
		}

		el = this.getItem(this.currentId);
		if (el != null)
			this.activate(el);
		
		this.enable();
	},
	
	setFilter: function(filterValue) {
		this.filter = filterValue;
		this.itemCount = -1;
		this.showItems(0);
	},
	
	findPanel: function(p) {
		var x = 0;
		for (var item in this.tabItems) {
			if (item == p)
				return x;
				
			x++;
		}
	},

	scrollItems: function(offset) {
		this._initCounters();

		var start = Math.max(0, Math.min(this.maxOffset, this.start + offset * this.maxItems));

		if (start != this.start)
			this.showItems(start);
	},
	
	_initCounters: function() {		
		if (this.itemCount == -1 || this.maxOffset == -1) {
			this.itemCount = 0;
			for (var item in this.tabItems) {
				if (!this._isFiltered(item))
					this.itemCount++;
			}
			
			this.maxOffset = Math.floor((this.itemCount - 1) / this.maxItems) * this.maxItems;
		}
	},
	
	_isFiltered: function(item) {
		return this.filter > '' && (
			!this.tabItems[item].categories ||
			(this.tabItems[item].categories && this.tabItems[item].categories.indexOf(this.filter) == -1)
		);
	},
	
	addTabItem: function(){},
	selectTabItem: function(){}
});


MySB.AppPanel = Ext.extend(MySB.VerticalTabPanel, {
	
	initComponent: function() {
		MySB.AppPanel.superclass.initComponent.call(this);
		
		Ext.get('appFilter').on({
			change: function(ev, el) {
				this.setFilter(el.value);
			}.createDelegate(this)
		})
	},

	addTabItem: function(item) {
		this.add({
			title: this.tabItems[item].title,
			id: this.tabItems[item].id,
			countries: this.tabItems[item].countries,
			settingsPage: this.tabItems[item].settingsPage,
			
			listeners: {
				activate: function(p) {
					
					if (this.disabled)
						return;
						
					this.currentId = p.getId();
					this.selectTabItem(p);
					
				}.createDelegate(this)
			}
		});
	},
	
	selectTabItem: function(newPage) {		
		if (newPage.settingsPage) {
			var el = Ext.get('appDetails');

			el.load({
				url: newPage.settingsPage,
				callback: this._initAppSettings,
				scope: this
			});
		}
		else { 
			Ext.get('appDetails').update(newPage.title);
		}
	},
	
	login: function() {
		if (this.getActiveTab() != null)
			document.location = '/user/login?redirect=/appgallery/' + this.getActiveTab().getId();
	},
	
	_initAppSettings: function(el, success, result, options) {

		MySB.initButtons();

		if (Ext.get('settingsPanel')) {
			new MySB.SettingsTabs({
				renderTo: 'settingsPanel',
				selector: 'div.x-tab'
			});
		}

		var btn;
		if (btn = Ext.get('deleteAppBtn')) {
			new Ext.Button({
				text: MySB.strings['APP_UNINSTALL'],
				renderTo: 'deleteAppBtn',
				cls: 'btn-secondary',
				handler: function() {
					document.forms.deleteAppForm.submit();
				}
			});
		}

		var submitBtns = Ext.query('input[type=submit]');

		for (var i = 0; i < submitBtns.length; i++) {
			btn = Ext.get(submitBtns[i]);
			try { btn.dom.type = 'button'; }
			catch(e){}
			
			btn.on({
				click: function(ev, button) {
					this.followLink(
						button.form.action || options.url,
						false,
						'POST',
						Ext.Ajax.serializeForm(button.form)
					);
				}.createDelegate(this)
			});
		}

		// sortable lists like favorites, podcasts etc.
		var sortable = Ext.DomQuery.selectNode('ol.sortable');
		if (sortable) {
			this.editableList = new MySB.EditableList({
				id : sortable.id
			});
		}
		
		var error = Ext.get('errorMessages');
		if (error)
			error.pause(5).fadeOut();
	},
	
	followLink: function(url, warning, method, params) {
		if ( warning ? confirm(warning) : true ) {
			var el = Ext.get('appDetails');

			el.load({
				url: url,
				method: method || 'GET',
				params: params,
				callback: this._initAppSettings,
				scope: this
			});
		}
	},
	
	toggleApp: function(pref, state) {
		if (this.getActiveTab() == null)
			return;
		
		var installEl   = Ext.get('install');
		var uninstallEl = Ext.get('uninstall');
		var spinnyEl    = Ext.get('loading');
		
		spinnyEl.setDisplayed('block');
		installEl.setDisplayed('none');
		uninstallEl.setDisplayed('none');

		Ext.Ajax.request({
			url: '/appgallery/toggle?appId=' + this.getActiveTab().getId(),
			method: 'GET',
			success: function(result) {
				new Ext.util.DelayedTask().delay(500, function(){
					spinnyEl.setDisplayed('none');

					if (result && result.responseText)
						result = Ext.util.JSON.decode(result.responseText);
					else
						result = {};
					
					if (result.result && !result.error) {
						uninstallEl.setDisplayed('block');
					}
					else if (!result.error) {
						installEl.setDisplayed('block');
					}
					else if (state)
						uninstallEl.setDisplayed('block');
					else
						installEl.setDisplayed('block');
				});
			}
		});
	},
	
	savePlayerAppSettings: function(myForm, btnEl) {
		btnEl = Ext.get(btnEl);
		
		if (btnEl)
			btnEl.addClass('x-item-disabled');
			
		Ext.Ajax.request({
			form: myForm,
			method: 'POST',
			success: function(result) {
		
				if (btnEl)
					btnEl.removeClass('x-item-disabled');

				var el = Ext.get('success');
				if (el != null && result.responseText) {
				
					if (el.hasActiveFx())
						el.stopFx();
						
					el.update(result.responseText);
					el.fadeIn().pause(5).fadeOut()
				}
			}
		});
	}
});


MySB.PlayerPanel = Ext.extend(MySB.VerticalTabPanel, {
	addTabItem: function(item) {
		this.add({
			title: this.tabItems[item].title,
			editLink: this.tabItems[item].editLink,
			listeners: {
				activate: function(p) {
					this.selectTabItem(p); 
				}.createDelegate(this)
			}
		});
	},
	
	selectTabItem: function(newPage){
		if (newPage.editLink) {
			Ext.get('success').hide();
			Ext.get('submitPlayerSettings').hide();
			this.loadDetailsPage(newPage.editLink);
		}
		else { 
			Ext.get('playerDetails').update(newPage.title);
		}
	},
	
	loadDetailsPage: function(url) {
		Ext.get('playerDetails').load({
			url: url,
			method: 'get',
			callback: this._initPlayerSettings,
			scope: this
		});
	},
	
	renamePlayerTab: function(playerID, newName) {
		var el = Ext.get('__PLAYER_TAB_' + playerID);
		if (el)
			el.update(newName);
	},
	
	saveSettings: function() {
		var url = playerPanel.getActiveTab().editLink || '/player/editPlayer';
		url = url.replace(/player=\d*/, '');
		
		var thisForm = document.forms.editPlayer; 
		
		Ext.Ajax.request({
			url: url,
			form: document.forms.editPlayer,
			callback: function(options, success, result) {
				var el = Ext.get('success');
				if (success && el != null && result.responseText) {
				
					if (el.hasActiveFx())
						el.stopFx();
						
					el.update(result.responseText);
					el.fadeIn().pause(5).fadeOut()
					
					playerPanel.renamePlayerTab(thisForm.player.value, thisForm.name.value);
					if (el = Ext.get('playerHeaderName'))
						el.update(thisForm.name.value);
					
					this.loadAlarmSettings();
				}
			},
			scope: this
		});
	},

	_initPlayerSettings: function(response) {
		
		this.initAlarmSettings();

		MySB.initButtons();

		new MySB.SettingsTabs({
			renderTo: 'settingsPanel',
			selector: 'div.x-tab.playersettings'
		});

		if (btn = Ext.get('deletePlayerBtn')) {
			new Ext.Button({
				text: MySB.strings['DELETE_PLAYER'],
				renderTo: 'deletePlayerBtn',
				cls: 'btn-secondary',
				disabled: btn.hasClass('disabled'),
				handler: function() {
					var answer = confirm(MySB.strings["DELETE_PLAYER_CONFIRM"]);
					if ( answer ) {
						location.href = "/player/deletePlayer?player=" + playerId;
					}
					else {
						return false;
					}
				}
			});
		}
		
		var menuEditor = Ext.get('menueditor');
		if (menuEditor) {
			this.menuEditor = new MySB.SortableList({
				id : menuEditor.id,
				tpl: new Ext.Template(
					'<li id="draggable_{id}" class="draggable">',
						'<a href="#" onclick="playerPanel.menuEditor.deleteMenu(\'draggable_{id}\'); return false;">',
							'<img src="/static/images/delete_button.png"/>',
						'</a>&nbsp;',
						'<span class="dragHandle title">{title}</span>',
					'</li>',
					{
						compiled: true
					}
				),
				defaultMenuItems: new Array(),
				
				notifyDrop: function() {
					var menuItems = Ext.query('li.draggable', Ext.isIE7 ? null : this.id);
					var mainMenuOrder = Ext.get('mainMenuOrder');
					
					if (menuItems && mainMenuOrder) {
						mainMenuOrder.dom.value = "";
						for (var x = 0; x < menuItems.length; x++) {
							mainMenuOrder.dom.value += "mainMenu[]=" + menuItems[x].id.replace('draggable_', '') + '&';
						}
					}
				},
				
				addNew: function() {
					var item = Ext.get('addMenu');

					if (item && item.getValue() && item.dom.options[item.dom.selectedIndex]) {
						this.tpl.append(this.el, {
							id: item.getValue().replace('menu_', ''),
							title: item.dom.options[item.dom.selectedIndex].text	
						});
						
						this.init();
						this.notifyDrop();
					}
				},
				
				deleteMenu: function(id) {
					var item = Ext.get(id);
					
					if (item)
						item.remove();
						
					this.init();
					this.notifyDrop();
				},
				
				resetDefaults: function() {
					if (defaultMenu.length > 0) {
					
						Ext.get(this.el).update('');
					
						for (var x = 0; x < defaultMenu.length; x++) {
							this.tpl.append(this.el, {
								id: defaultMenu[x].id,
								title: defaultMenu[x].title	
							});
						}
						
						this.init();
						this.notifyDrop();
					}
				}
			});
			
			// call this once to initialize the form field storing the sort order
			this.menuEditor.notifyDrop();
		}

		var btn;
		if (btn = Ext.get('disconnectPlayerBtn')) {
			new Ext.Button({
				text: MySB.strings['PLAYER_DISCONNECT_SQUEEZENETWORK'],
				renderTo: 'disconnectPlayerBtn',
				cls: 'btn-secondary',
				disabled: btn.hasClass('disabled'),
				handler: function() {
					var answer = confirm(MySB.strings["CONFIRM_PLAYER_DISCONNECT"]);
					if ( answer ) {
						Ext.Ajax.request({
							url: '/player/disconnect',
							params: {
								player: playerId
							},
							callback: function(options, success, result) {
								this.loadDetailsPage('/player/editPlayer?player=' + playerId);
							},
							scope: this
						});
					}
					else {
						return false;
					}
				}.createDelegate(this)
			});
		}

		Ext.get('submitPlayerSettings').show();
	},
	
	initAlarmSettings : function() {
		var alarmSelector = Ext.get('alarmSelector');
		if (alarmSelector) {
			
			alarmSelector.on({
				change: {

					fn: function(ev, option){
						if (option) {
							var alarms = Ext.query('div.alarmSettings');
							for (var i = 0; i < alarms.length; i++) {
								Ext.get(alarms[i]).setStyle('display', option.value == Ext.id(alarms[i]) ? 'block' : 'none');
							}
						}
					}
				
				}
			});
			
			var alarms = Ext.query('div.alarmSettings');
			if (alarms && alarms[0])
				Ext.get(alarms[0]).setDisplayed('block');
		}
	},

	loadAlarmSettings : function() {
		var el = Ext.get('alarmPanels');
		
		if (el) {
			
			el.load({
				url: '/player/editAlarms',
				method: 'GET',
				params: {
					player: document.forms.editPlayer.player.value
				},
				callback: function(options, success, result) {
					this.initAlarmSettings();
					MySB.initButtons();
				},
				scope: this
			});
		}
	},
	
	deleteAlarm : function(alarm) {
		if (alarm) {
			document.forms.editPlayer['deleteAlarm' + alarm].value = 1;
			
			Ext.Ajax.request({
				url: '/player/editAlarms',
				form: document.forms.editPlayer,
				method: 'POST',
				
				callback: function(options, success, result) {
					var el = Ext.get('alarmPanels');
		
					if (success && el != null && result.responseText) {
						el.update(result.responseText);
					}
					
					this.initAlarmSettings();
					MySB.initButtons();
				},
				scope: this
			});
		}
	}
});


MySB.SettingsTabs = Ext.extend(Ext.TabPanel, {
	tabs : null,
	
	initComponent : function(a, b, c) {
		this.tabs = Ext.query(this.initialConfig.selector);
		var tabPanels = new Array();
	
		if (this.tabs.length > 0) {
			for (var i = 0; i < this.tabs.length; i++) {
				tabPanels.push({
					elId: Ext.id(this.tabs[i]),
					title: this.tabs[i].title
				});
				
				this.tabs[i].title = null;
				Ext.get(this.tabs[i]).setVisibilityMode(Ext.Element.DISPLAY);
			}
		}

		Ext.apply(this, {
			items: tabPanels,
			activeItem: 0
		});
		
		MySB.SettingsTabs.superclass.initComponent.call(this);
		
		this.on({
			tabchange: function(tabPanel, tab) {
				for (var i = 0; i < this.tabs.length; i++) {
					Ext.get(this.tabs[i]).setStyle('display', tab.elId == Ext.id(this.tabs[i]) ? 'block' : 'none');
				}
			}
		});
	}
});


MySB.initButtons = function() {
	var buttons = Ext.query('span.primaryBtn');

	for (var i = 0; i < buttons.length; i++) {
		new Ext.Button({
			renderTo: Ext.id(buttons[i]),
			text: buttons[i].title,
			type: Ext.get(buttons[i]).hasClass('submitBtn') ? 'submit' : 'button',
			listeners: [{
				click: buttons[i].onclick || function(){ return false; }
			}],
			cls: 'btn-primary'
		});
	}

	buttons = Ext.query('span.secondaryBtn');

	for (var i = 0; i < buttons.length; i++) {
		new Ext.Button({
			renderTo: Ext.id(buttons[i]),
			text: buttons[i].title,
			type: Ext.get(buttons[i]).hasClass('submitBtn') ? 'submit' : 'button',
			listeners: [{
				click: buttons[i].onclick || function(){ return false; }
			}],
			cls: 'btn-secondary'
		});
	}
};


MySB.SortableList = function(config){
	Ext.apply(this, config);
	this.init();
};

MySB.SortableList.prototype = {
	el: '',
	
	init: function() {
		if (this.id && Ext.get(this.id)) {
			this.el = this.id;
			this._initDD();
		}
	},
		
	_initDD: function(el){
		new Ext.dd.DragZone(this.el, { ddGroup: this.el + '_group' });
		
		new Ext.dd.DropZone(this.el, {
			ddGroup: this.id + '_group',
			onNodeOver: this.onNodeOver,
			notifyDrop: this.notifyDrop
		});

		var drags = Ext.query('li', this.el);
		for( var i =0; i< drags.length; i++ ) {
			var handles = Ext.query('span.dragHandle', drags[i]);

			Ext.dd.Registry.register(drags[i], {
				handles: handles,
				isHandle: true
			});
		}
		
	},
	
	onNodeOver: function(nodeData, source, e, data){
		var y = e.getPageY();

		var goingUp = false;
		if (y < this.lastY)
			goingUp = true;

		this.lastY = y;
		
		var destEl = Ext.get(nodeData.ddel);
		var srcEl = Ext.get(data.ddel);
		srcEl.setStyle('visibility', 'hidden');

		//see if this exists
		if (destEl.is('li')) {
			if (goingUp)
				srcEl.insertBefore(destEl);
			else
				srcEl.insertAfter(destEl);
		}
	},
	
	notifyDrop: function(source, e, data) {},
	
	addNew: function() {},
	
	remove: function(id, url) {}
};


MySB.EditableList = Ext.extend(MySB.SortableList, {
	editHTML: new Array(),
	
	notifyDrop: function(source, e, data) {
		var query = '';
		var items = Ext.query('li', source.el.dom);
		
		for( var i =0; i< items.length; i++ ) {
			var id = items[i].id;
			if (id) {
				id = id.replace(/draggable_/g, "");
				query += this.id + "[]=" + id + "&";
			}
		}

		Ext.Ajax.request({
			url: '/settings/' + this.id + '/reorder',
			method: 'POST',
			params: query
		});
	},
	
	addNew: function() {
		Ext.Ajax.request({
			url: '/settings/' + this.id + '/add',
			params: Ext.Ajax.serializeForm('add_form'),
			scope: this,
			success: function(result) {
				if (result && result.responseText)
					result = Ext.util.JSON.decode(result.responseText);
				else
					result = {};

				if (result.warning) {
					alert(result.warning);
				}
				
				if (result.html) {
					var el = Ext.get(this.el);
					if (el)
						Ext.DomHelper.append(el, '<li id="draggable_' + result.new_id + '" class="draggable">' + result.html + '</li>');

					this._initDD();
				}
			}
		});
	},
	
	edit: function(id) {
		var el = Ext.get("draggable_" + id);
		
		this.editHTML[id] = el.dom.innerHTML;
		el.load({
			url: '/settings/' + this.id + '/edit/' + id
		});
		
		return false;
	},
	
	remove: function(id, url) {
		Ext.Ajax.request({
			url: url,
			success: function(result) {
				var el = Ext.get("draggable_" + id);
				if (el)
					el.remove();
			}
		});
	},
	
	saveEdit: function(id) {
		var el = Ext.get("draggable_" + id);
		
		if (el) {
			el.load({
				url: '/settings/' + this.id + '/edit/' + id,
				params: Ext.Ajax.serializeForm('edit_form'),
				scope: this,
				callback: function(){
					delete this.editHTML[id];
				}
			});
		}
	},
	
	cancelEdit: function(id) {
		var el = Ext.get("draggable_" + id);
		
		if (el) {
			el.update(this.editHTML[id]);
			delete this.editHTML[id];
		}
	}
});

// animation in bottom center box
MySB.SlideShow = {
	el: null,
	slides: new Array(),
	currentItem: -1,
	

	init: function(el) {
		this.el = Ext.get(el);
	
		this._initSlides();
		this._initNavigation();
		
		if (this.slides.length > 0) {
		
			this.task = new Ext.util.DelayedTask(this.next, this);
			this.showSlide(0);
			
		}
	},
	
	_initSlides: function() {
		Ext.each(this.el.query('div.slide'), function(el) {
			el = Ext.get(el);
			el.hide();
			this.slides.push(el);
			
			var subEl = el.first('div');
			if (subEl) {
				
				Ext.DomHelper.insertAfter(subEl, {
					tag: 'div',
					cls: 'slideDivider',
					children: [
						{ 
							tag: 'img', 
							src: '/static/images/slideShow/hort_divider.png'
						}
					]
				});
			}
			
			subEl = el.last('div');
			if (subEl) {
				subEl.addClass('slideText');
			}
		}, this);
	},
	
	_initNavigation: function() {
		var el = this.el.last('div.slide');
		if (el) {
			Ext.DomHelper.insertAfter(el, [
				{ 
					tag: 'img', 
					src: '/static/images/slideShow/arrow_left_press.png',
					id: 'slideBack'
				},

				{ 
					tag: 'img', 
					src: '/static/images/slideShow/arrow_right_press.png',
					id: 'slideForward'
				},

				{ 
					tag: 'img', 
					src: '/static/images/slideShow/paginate_8_series.png',
					id: 'slidePaginator'
				},
				
				{
					tag: 'img',
					src: '/static/images/slideShow/paginate_on.png',
					id: 'slidePageIndicator'
				}
			]);
			
			Ext.get('slideBack').on('click', this.previous, this);
			Ext.get('slideForward').on('click', this.next, this);
		}
	},
	
	previous: function() {
		var newItem = this.currentItem - 1;
		newItem = newItem >= 0 
			? newItem % this.slides.length
			: this.slides.length + newItem;

		this.showSlide(newItem);
	},
	
	next: function() {
		var newItem = this.currentItem + 1;
		newItem = newItem % this.slides.length;

		this.showSlide(newItem);
	},
	
	showSlide: function(newItem) {

		if (this.task)
			this.task.cancel();
		
		if (this.currentItem >= 0) {
			this.slides[this.currentItem].hide({
				duration: 0.5,
				easing: 'easeOut'
			});
		}
		
		this.currentItem = newItem;

		this.slides[this.currentItem].show({
			duration: 0.5,
			easing: 'easeIn'
		});
		
		var coord = Ext.get('slidePaginator').getXY();
		coord[0] = coord[0] + this.currentItem * 16;
		var indicator = Ext.get('slidePageIndicator');
		indicator.setXY(coord, indicator.getY() == coord[1]);

		if (this.task)
			this.task.delay(5000);
	}
};

MySB.strings = {};