var ThemesApp = new Class({
	Implements: [Options],

	options: {
		version: '1.0',
		database: 'themes2.db',
		picFolder: 'data/',
		bigPicFolder: 'bigdata/',
		verybigPicFolder: 'verybigdata/',
		noimage1: 'src/img/100x139.jpg',
		noimage2: 'src/img/340x284.jpg',
		noimage3: 'src/img/716x600.jpg',
		server: 'http://easyprintthemestore.com/easyprint/ljthemes/',
		//server: 'http://localhost/easyprint/ljthemes/',
		//server: 'http://localhost/easyprint/ljthemes/',
		categoriesTpl: '<a id="{id}" href="#">{name}</a>'
	},


	initialize: function(options){
		this.setOptions(options);
		this.appExiting = false;
		this.curPicture = -1;
		this.curPage = -1;
		this.page = 0;
		this.curTheme = -1;		
		this.curKeyword = '';
		this.curCategory = '';
		this.categoriesEl = $('categories');
		this.versesCategoriesEl = $('verses');
		this.scrollerEl = $('scroller');
		this.navEl = $('nav');
		this.searchFieldEl = $('searchfield');
		this.searchBtnEl = $('searchbtn');
		this.searchMenuEl = $('searchmenu');
		this.doc = this.categoriesEl.getDocument();
		this.doc3 = $('doc3');

		this.setApplicationNameAndVersion();


		this.loadCategories(true);		
		this.loadVersesCategories();

		//this.themesTokens = this.db.getTokens();
		//this.versesTokens = this.db.getVersesTokens();
		
		this.autocompleter = new Autocompleter.Request.JSON(this.searchFieldEl, this.options.server + 'api/themestokens.php', {
			'minLength': 1, // We need at least 1 character
			'selectMode': 'type-ahead', // Instant completion
			'multiple': false // Tag support, by default comma separated
		});
		
		/*
		this.autocompleter = new Autocompleter.Local(this.searchFieldEl, this.themesTokens, {
			'minLength': 1, // We need at least 1 character
			'selectMode': 'type-ahead', // Instant completion
			'multiple': false // Tag support, by default comma separated
		});*/
		
		this.searchMenuEl.addEvent('change', function() {
			if (this.searchMenuEl.get('value') == 'themes') {
				this.autocompleter.destroy();
				/*this.autocompleter = new Autocompleter.Local(this.searchFieldEl, this.themesTokens, {
					'minLength': 1, // We need at least 1 character
					'selectMode': 'type-ahead', // Instant completion
					'multiple': false // Tag support, by default comma separated
				});*/
				this.autocompleter = new Autocompleter.Request.JSON(this.searchFieldEl, this.options.server + 'api/themestokens.php', {
					'minLength': 1, // We need at least 1 character
					'selectMode': 'type-ahead', // Instant completion
					'multiple': false // Tag support, by default comma separated
				});
				
			}	
			else {
				this.autocompleter.destroy();
				this.autocompleter = new Autocompleter.Request.JSON(this.searchFieldEl, this.options.server + 'api/versestokens.php', {
					'minLength': 1, // We need at least 1 character
					'selectMode': 'type-ahead', // Instant completion
					'multiple': false // Tag support, by default comma separated
				});
				
			}
		}.bind(this));
			
		this.searchFieldEl.addEvents({
			'focus': function(e) {
				if (this.searchFieldEl.get('value') == 'Search Here...') {
					this.searchFieldEl.set('value', '');
				}
			}.bind(this),

			'blur': function(e) {
				if (this.searchFieldEl.get('value') == '') {
					this.searchFieldEl.set('value', 'Search Here...');
				}
			}.bind(this),
			
			'keydown': function(e) {
				switch (e.code){
					case 13:
						if (this.searchFieldEl.get('value') != '') {
							this.search(this.searchFieldEl.get('value'));
						}
					break;
				}
			}.bind(this)
		});

		this.searchBtnEl.addEvent('click', function(e) {
			if (this.searchFieldEl.get('value') != '') {
				this.search(this.searchFieldEl.get('value'));
			}
		}.bind(this));
		
	},	
	
	loadCategories: function(loadThemes) {
		new Request.JSON({url: this.options.server + 'api/categories.php', onComplete: function(categories){
			if (categories && categories.length > 0) {
				for (var i = 0; i < categories.length; i++) {
					var category = categories[i];
					var categoryEl = new Element('div', {
						'id': 'cat_' + category.id,
						'class': 'category',
						'html': this.options.categoriesTpl.substitute({
							id: 'catlink_' + category.id,
							name: category.name
						})
					});
					this.categoriesEl.grab(categoryEl, 'bottom');
					$('catlink_' + category.id).addEvent('click', function(e) {
						e.stop();			
						var el = $(e.target).getParent();
						var linkIDParts = el.id.split('_');
						var id = linkIDParts[1];
						this.loadThemes(id, el.get('text'));
					}.bind(this));
				
				}
				if (loadThemes) {
					this.loadThemes(categories[0].id, categories[0].name);
				}	
			}
		}.bind(this)}).get();			
	},

	loadVersesCategories: function() {
		new Request.JSON({url: this.options.server + 'api/vcategories.php', onComplete: function(categories){
			if (categories && categories.length > 0) {
				for (var i = 0; i < categories.length; i++) {
					var category = categories[i];
					var categoryEl = new Element('div', {
						'id': 'vcat_' + category.id,
						'class': 'category',
						'html': this.options.categoriesTpl.substitute({
							id: 'vcatlink_' + category.id,
							name: category.name
						})
					});
					this.versesCategoriesEl.grab(categoryEl, 'bottom');
					$('vcatlink_' + category.id).addEvent('click', function(e) {
						e.stop();			
						var el = $(e.target).getParent();
						var linkIDParts = el.id.split('_');
						var id = linkIDParts[1];
						this.loadVerses(id, el.get('text'));
					}.bind(this));
				
				}
			}
		}.bind(this)}).get();						
	},

	buildNav: function () {
		this.navEl.empty();
		if (this.curCategory) {
			this.navEl.set('html','<b>Category:</b> ' + this.curCategory);
		}
		else {
			this.navEl.set('html', '<b>Search Results For:</b> ' + this.curKeyword);
		}	

		/*
		this.navEl.empty();
		var pages = Math.ceil(this.themes.length / 12);
		this.pages = pages;
		this.curPage = 0;

		var prevEl = new Element('a', {
			'href': '#',
			'html': '< Previous'
		});
		this.navEl.grab(prevEl);
		this.navEl.appendText(' | Page: ');

		prevEl.addEvent('click', function(e){
			e.stop();
			if (this.curPage > 0) {
				this.goPage(this.curPage - 1);
			}	
		}.bind(this));
		
		for (var i = 0; i < pages; i++) {
			var pgEl = new Element('a', {
				'href': '#',
				'html': '' + (i+1) + ''
			});
			this.navEl.grab(pgEl);
			pgEl.addEvent('click', function(e, index){
				e.stop();
				this.goPage(index);
			}.bindWithEvent(this, i));
			this.navEl.appendText(' ');

			
		}	
		
		if (this.curPage < pages) {
			this.navEl.appendText(' | ');
			var nextEl = new Element('a', {
				'href': '#',
				'html': 'Next >'
			});
			this.navEl.grab(nextEl);
			nextEl.addEvent('click', function(e){
				e.stop();
				if (this.curPage < this.pages - 1) {
					this.goPage(this.curPage + 1);
				}	
			}.bind(this));
		}		
		*/
	},

	loadThemes: function(categoryId, name) {
		this.curKeyword = '';
		this.curCategory = name;

		new Request.JSON({url: this.options.server + 'api/themes.php', onComplete: function(themes){
			this.themes = themes;
			this.addThemes();		
		}.bind(this)}).get({'id':categoryId});						
	},	

	search: function(keyword) {
		this.curKeyword = keyword;
		this.curCategory = '';

		if (this.searchMenuEl.get('value') == 'themes') {
			if (keyword) {
				new Request.JSON({url: this.options.server + 'api/search.php', onComplete: function(themes){
					this.themes = themes;
					this.addThemes();		
				}.bind(this)}).get({'keyword':keyword});										
			}
		}
		else {	
			if (keyword) {
				new Request.JSON({url: this.options.server + 'api/vsearch.php', onComplete: function(verses){
					this.verses = verses;
					this.addVerses();		
				}.bind(this)}).get({'keyword':keyword});														
			}	
		}	
	},	
		
	playThemes: function() {
		if (this.playingThemes) {
			this.bigPreviewContainerEl.empty();
			this.curTheme++;
			if (this.curTheme == this.themes.length) {
				this.curTheme = 0;
			}
			this.p2El.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
			this.p1El.set('html', this.themes[this.curTheme].name);
			this.loadPicture(this.themes[this.curTheme], this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
		}	
	},	
		
	addThemes: function() {
		this.scrollerEl.empty();
		if (this.themes.length > 0) {
			for (var i = 0; i < this.themes.length; i++) {
				var theme = this.themes[i];
				var thumbEl = new Element('div', {
					'id': 'thumb_' + theme.id,
					'class': 'thumb'
				});
				this.scrollerEl.grab(thumbEl);
				
				var divEl = new Element('div');
				thumbEl.grab(divEl);

				var pEl = new Element('p', {
					'html': theme.name
				});
				thumbEl.grab(pEl);
				
				this.loadPicture(theme, divEl, this.options.picFolder, 0);

				divEl.addEvent('click', function(e, theme, index) {
					this.curTheme = index;
					this.playingThemes = false;
					if (!this.bigPreviewOverlayEl) {
						this.bigPreviewOverlayEl = new Element('div', {
							'class': 'bigpreviewoverlay'
						});
						this.doc3.grab(this.bigPreviewOverlayEl);
					}
					if (!this.bigPreviewEl) {						
						var sz = this.doc.getSize();

						this.bigPreviewEl = new Element('div', {
							'class': 'bigpreview',
							'style': 'left:' + (sz.x/2 - 719/2) + 'px;top:0px;'
						});

						this.doc3.grab(this.bigPreviewEl);

						this.bigPreviewContainerEl = new Element('div', {
							'class': 'bigpreviewcont'
						});
						this.bigPreviewEl.grab(this.bigPreviewContainerEl);
						
					}	
					
					var closeFn = function() {
						if (this.bigPreviewEl) this.bigPreviewEl.tween('opacity', 1, 0);							
						if (this.bigPreviewOverlayEl) this.bigPreviewOverlayEl.tween('opacity', 0.7, 0);						
						if (this.bigPreviewContainerEl) this.bigPreviewContainerEl.empty();
						if (this.themesTimer) $clear(this.themesTimer);
						this.playEl.setStyle('background', 'url(src/img/play.png) no-repeat');
					}
					
					if (!this.playerEl) {						
						this.playerEl = new Element('div', {
							'class': 'player'
						});
						this.bigPreviewEl.grab(this.playerEl);
						
						this.p1El = new Element('p', {
							'class': 'playertheme',
							'html': this.themes[this.curTheme].name

						});
						this.playerEl.grab(this.p1El);

						this.p2El = new Element('p', {
							'class': 'playerpagin',
							'html': (this.curTheme + 1) + ' / ' + this.themes.length

						});
						this.playerEl.grab(this.p2El);

						/*
						this.firstEl = new Element('div', {
							'class': 'firstbtn'
						});
						this.playerEl.grab(this.firstEl);
						
						this.firstEl.addEvent('click', function(e) {
							e.stop();
							this.bigPreviewContainerEl.empty();
							this.curTheme = 0;
							this.pEl.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
							this.loadPicture(this.themes[this.curTheme], this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
						}.bind(this));
						*/
						this.prevEl = new Element('div', {
							'class': 'prevbtn'
						});
						this.playerEl.grab(this.prevEl);

						this.prevEl.addEvent('click', function(e) {
							e.stop();
							if (this.curTheme > 0) {
								this.bigPreviewContainerEl.empty();
								this.curTheme--;
								this.p2El.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
								this.p1El.set('html', this.themes[this.curTheme].name);								
								this.loadPicture(this.themes[this.curTheme], this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
							}	
						}.bind(this));

						this.playEl = new Element('div', {
							'class': 'playbtn'
						});
						this.playerEl.grab(this.playEl);

						this.playEl.addEvent('click', function(e) {
							e.stop();
							if (this.playingThemes) {
								this.playEl.setStyle('background', 'url(src/img/play.png) no-repeat');
								this.playingThemes = false;
								$clear(this.themesTimer);
							}
							else {
								this.playEl.setStyle('background', 'url(src/img/pause.png) no-repeat');
								this.playingThemes = true;
								this.themesTimer = this.playThemes.periodical(3000, this);								
							}	
						}.bind(this));

						this.nextEl = new Element('div', {
							'class': 'nextbtn'
						});
						this.playerEl.grab(this.nextEl);

						this.nextEl.addEvent('click', function(e) {
							e.stop();
							if (this.curTheme < this.themes.length - 1) {
								this.bigPreviewContainerEl.empty();
								this.curTheme++;
								this.p2El.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
								this.p1El.set('html', this.themes[this.curTheme].name);
								this.loadPicture(this.themes[this.curTheme], this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
							}	
						}.bind(this));

						/*	
						this.lastEl = new Element('div', {
							'class': 'lastbtn'
						});
						this.playerEl.grab(this.lastEl);

						this.lastEl.addEvent('click', function(e) {
							e.stop();
							this.bigPreviewContainerEl.empty();
							this.curTheme = this.themes.length - 1;
							this.pEl.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
							this.loadPicture(this.themes[this.curTheme], this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
						}.bind(this));
						*/

						this.closeEl = new Element('span', {
							'class': 'closebtn'
						});
						this.playerEl.grab(this.closeEl);		
						
						this.closeEl.addEvent('click', closeFn.bind(this));										
					}	
					else {
						this.p2El.set('html', (this.curTheme + 1) + ' / ' + this.themes.length);
						this.p1El.set('html', this.themes[this.curTheme].name);
					}
					
					
					this.bigPreviewEl.addEvents({
						mouseenter: function() {
							this.playerEl.tween('opacity', 0, 1);							
						}.bind(this),
						mouseleave: function() {
							this.playerEl.tween('opacity', 1, 0);														
						}.bind(this)
					});
					
					this.bigPreviewOverlayEl.addEvent('click', closeFn.bind(this));	
					this.bigPreviewEl.addEvent('click', closeFn.bind(this));	
					
					this.bigPreviewOverlayEl.tween('opacity', 0, 0.7);
					this.bigPreviewEl.tween('opacity', 0, 1);
					
					this.loadPicture(theme, this.bigPreviewContainerEl, this.options.verybigPicFolder, 2);
				}.bindWithEvent(this, [theme, i]));
				
				divEl.addEvent('mouseenter', function(e, theme, thumbEl) {
					var pos = thumbEl.getPosition();
					var left = (pos.x > 350?pos.x - 350:pos.x + 114);
					var top = (pos.y > 314?pos.y - 300 + 126:pos.y);
					if (!this.previewEl) {
						this.previewEl = new Element('div', {
							'class': 'preview',
							'style': 'visibility:visible;opacity:0;left:' + left +'px;top:' + top + 'px;'
						});
						//this.doc.grab(this.previewEl);
						this.doc3.grab(this.previewEl);
						
						this.previewImgEl = new Element('div');
						this.previewEl.grab(this.previewImgEl);
						
						this.previewPEl = new Element('p', {
							'html': theme.name
						});
						this.previewEl.grab(this.previewPEl);
					}	
					else {
						this.previewEl.setStyles({
							left: left,
							top: top
						});
						this.previewPEl.set('html', theme.name);
					}
					this.previewEl.tween('opacity', 0, 1);
					
					this.loadPicture(theme, this.previewImgEl, this.options.bigPicFolder, 1);
					
				}.bindWithEvent(this, [theme, thumbEl]));
				
				divEl.addEvent('mouseleave', function() {
					if (this.previewEl) {
						this.previewEl.tween('opacity', 1, 0);
						this.previewImgEl.empty();
					}	
				}.bindWithEvent(this));
				
			}
		}
		else {
			this.scrollerEl.set('html', '<div style="margin:20px auto;width:300px;height:30px;text-align:center;">There are no themes for the current selection</div>');

		}	
		this.buildNav();
	},

	loadVerses: function(categoryId, name) {
		this.curKeyword = '';
		this.curCategory = name;

		new Request.JSON({url: this.options.server + 'api/verses.php', onComplete: function(verses){
			this.verses = verses;
			this.addVerses();		
		}.bind(this)}).get({id:categoryId});														
	},	
			
	addVerses: function() {
		this.scrollerEl.empty();
		if (this.verses.length > 0) {
			for (var i = 0; i < this.verses.length; i++) {
				var verse = this.verses[i];
				var rtfEl = new Element('p', {
					'id': 'rtf_' + verse.id,
					'class': 'rtf'
				});
				this.scrollerEl.grab(rtfEl);

				var verseTitleEl = new Element('span', {
					'class': 'versetitle',	
					'html': verse.name + ': '
				});
				rtfEl.grab(verseTitleEl);

				var textlong = 120;
				var verseBodyEl = new Element('span', {
					'class': 'versebody',	
					'html': verse.verse?verse.verse.substr(0, textlong):''
				});
				rtfEl.grab(verseBodyEl);
				
				if (verse.verse && verse.verse.length > textlong) {
					rtfEl.appendText('... ');
					var verseMoreEl = new Element('a', {
						'class': 'versemore',	
						'html': 'View All'
					});
					rtfEl.grab(verseMoreEl);
					verseMoreEl.addEvent('click', function(e, verse) {
						if (!this.bigPreviewOverlayEl) {
							this.bigPreviewOverlayEl = new Element('div', {
								'class': 'bigpreviewoverlay'
							});
							this.doc3.grab(this.bigPreviewOverlayEl);
						}	
						
						if (!this.rtfPreviewEl) {
							var sz = this.doc.getSize();
							this.rtfPreviewEl = new Element('div', {
								'class': 'rtfpreview',
								'html': '<b>' + verse.name + '</b><br>' + verse.verse,
								'style': 'left:' + (sz.x/2 - 719/2) + 'px;top:0px;'

							});
							this.doc3.grab(this.rtfPreviewEl);
						}	
						else {
							this.rtfPreviewEl.set('html', '<b>' + verse.name + '</b><br>' + verse.verse);
						}
						
						var closeFn = function() {
							this.rtfPreviewEl.tween('opacity', 1, 0);							
							this.bigPreviewOverlayEl.tween('opacity', 0.7, 0);						
							this.rtfPreviewEl.empty();
						}
						
						this.bigPreviewOverlayEl.addEvent('click', closeFn.bind(this));	
						this.rtfPreviewEl.addEvent('click', closeFn.bind(this));	
						
						this.bigPreviewOverlayEl.tween('opacity', 0, 0.7);
						this.rtfPreviewEl.tween('opacity', 0, 1);
						
					}.bindWithEvent(this, verse));					
				}
				
				
			}
		}
		else {
			this.scrollerEl.set('html', '<div style="margin:20px auto;width:300px;height:30px;text-align:center;">There are no verses for the current selection</div>');

		}	
		this.buildNav();
	},
		
	goPage: function(page) {
		this.curPage = page;
		this.scrollerEl.set('tween', {duration:'long', transition:'quad:out'})
		this.scrollerEl.tween('top', -464 * this.curPage);
	},
	
	getFileName: function(theme, size) {
		if (size == 1) {
			var nameParts = theme.theme.split('-');
			return nameParts.join('') + (nameParts[nameParts.length-1] != 'LJ'?'LJ':'') + '.jpg';
		}	
		else if (size == 2) {
			var nameParts = theme.theme.split('-');
			return nameParts.join('') + (nameParts[nameParts.length-1] != 'LJ'?'LJ':'') + '1.jpg';			
		}
		else {
			return theme.theme + '.jpg';
		}			
	},
	
	getNoImage: function(size) {
		switch (size) {
			case 1:
				return this.options.noimage2;
			break;
			case 2:
				return this.options.noimage3;
			break;
			default:
				return this.options.noimage1;
			break;
		}
	},
	
	loadPicture: function(theme, parentEl, folder, size, callback, errorCallBack) {
		var fileName = this.getFileName(theme, size);
		var remoteFile = this.options.server + '../data/LJ-Themes/' +  theme.theme + '/' + fileName
		if (parentEl) {
			var imgLoader = new Asset.image(remoteFile, {
				alt: theme.name,
				onload: function(img){
					parentEl.grab(img);
				//parentEl.set('html', '<img src="' + src + '" alt="' + theme.name + '"  />');
				},
				onerror: function(img){
					parentEl.set('html', '<img src="' + this.getNoImage(size) + '" alt="' + theme.name + '"  />');
				},
				onabort: function(img){
					parentEl.set('html', '<img src="' + this.getNoImage(size) + '" alt="' + theme.name + '"  />');
				}
			});
		}
	},	
		
	setApplicationNameAndVersion: function () {
		var versionEl = $('version');
		versionEl.set('html', this.options.version);
	}

});

window.addEvent('domready', function() {
	var app = new ThemesApp();
});