var ListScene = $class({
    $extends: caph.require('ui.base.Scene'),
    
    getSceneOption: function() {
    	return {};
    },
    
    oncreate: function() {
    	var View = caph.require('module.renderer.View');
    	var option = this.getSceneOption();
    	
    	this.contentType = 'list';
    	this.isShowCloseButton = true;
    	
    	this.addChild(this._createTopBackground());
    	this.addChild(this._createTitle(option.title));
    	
    	this.addChild(this.border = new View({
			dom: {
				style: {
					visibility: 'hidden',
					boxSizing: 'border-box',
				}
			}
		}));
    	
    	this.addChild(this.top = this._createCategoriesAndButtons(option.selectedCategory))
    	this.addChild(this.bottom = this._createList(option.list));
    	
    	this.setStyle({
    		backgroundColor: Style.mainBackgroundColor
    	});
    },
    
    _createTopBackground: function() {
		var View = caph.require('module.renderer.View');
		
		return new View({
			dom: {
				style: {
					backgroundColor: Style.topBackgroundColor
				}
			}
		}).size([Style.width, Style.topHeight]);
    },
    
    _createTitle: function(title) {
    	var Label = caph.require('ui.base.component.Label');
		
		return new Label({
			text: title,
		    align: {
		    	horizontal: 'left',
		    	vertical: 'center'
		    },
		    size: [undefined, Style.topHeight],
			position: [Style.titleMarginLeft, 0],
			dom: {
				style: {
					opacity: 0.8
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.titleFontSize);
    },
    
    _createCategoriesAndButtons: function(selectedCategory) {
    	var Float = caph.require('ui.base.layout.Float');
    	
    	var container = new Float({
			size: [Style.width, Style.topHeight],
			position: [0, 0, 0],
			hAlign: 'right',
			vAlign: 'center'
		});
    	
    	this._createCategories(selectedCategory).forEach(function(category) {
    		container.addChild(category, {
    			size: [Style.categoryWidth, Style.topHeight]
    		});
    		
    		container.addChild(this._createSeparator(), {
    			size: [1, Style.topHeight]
    		});
    	}, this);
    	
    	container.addChild(this._createIcon('search', function(message) {
    		currentScene.go('SearchScene', Scene.state.READY);
    	}), {
    		size: [Style.categoryIconWidth, Style.topHeight]
    	});
    	
    	container.addChild(this._createSeparator(), {
			size: [1, Style.topHeight]
		});
    	
    	container.addChild(this._createIcon('exit', function(message) {
    		if (window.curWidget) {
				window.curWidget.setPreference('exit', 'true');
			}
			
			try {
				var app = tizen.application.getCurrentApplication();
				app.exit();
			} catch (e) {
				console.log('Tizen is not supported or failed to exit');
			}
    	}), {
    		size: [Style.categoryIconWidth, Style.topHeight]
    	});
		
    	return container;
    },
	
	_createCategories: function(selectedCategory) {
		var EventManager = caph.require('module.event.Manager');
		var Label = caph.require('ui.base.component.Label');
		
		return genres.map(function(genre) {
			var category = genre.name;
			var type = (category === selectedCategory ? 'Selected' : 'Normal');
			
			var label = new Label({
				text: category,
			    align: {
			    	horizontal: 'center',
			    	vertical: 'center'
			    },
				on: {
					focus: function(message) {
						currentCategory = this;
						
						this.setTextSize(Style.categoryFontSizeFocused);
						this.setTextColor(Style.fontColorNormal);
						
						var border = this.getParent().getParent().getChildren()[2];
						border.size(this.size());
						border.position(this.offset());
						border.visibility(true);
						border.setStyle({
							border: Style.categoryBorder
						});
						
						if (message.detail.method === 'key') {
							currentScene.go(this.getText().replace(' ', '') + 'Scene', Scene.state.READY);
						}
					},
					blur: function(message) {
						this.setTextSize(Style['categoryFontSize' + type]);
						this.setTextColor(Style['fontColor' + type]);
						
						this.getParent().getParent().getChildren()[2].visibility(false);
					},
					click: function() {
						currentScene.go(this.getText().replace(' ', '') + 'Scene', Scene.state.READY);
					},
					keydown: function(message) {
						var key = message.key();
						
						if (key.enter || key.down) {
							message.stopPropagation();
							currentItem.focus();
						}
					}
				}
			}).setTextStyle({
				padding: Style.categoryPadding
			});
			
			label.setTextSize(Style['categoryFontSize' + type]);
			label.setTextColor(Style['fontColor' + type]);

			label.focusable(true);
			label.setMultiLine(false);
			
			EventManager.getInstance().addObserver(label);

			return label;
		});
	},
	
	_createSeparator: function() {
		var View = caph.require('module.renderer.View');
		
		return new View({
			dom: {
				style: {
					opacity: 0.3,
					padding: Style.categorySeparatorPadding,
					boxSizing: 'border-box'
				}
			}
		}).addChild(new View({
			dom: {
				style: {
					backgroundColor: '#ffffff'
				}
			}
		}).size([1, Style.categorySeparatorHeight]));
	},
	
	_createIcon: function(type, callback) {
		var Component = caph.require('ui.base.Component');
		var Icon = caph.require('stripe.ui.component.Icon');
		
		var container = new Component({
			on: {
				focus: function() {
					var border = this.getParent().getParent().getChildren()[2];
					border.size(this.size());
					border.position(this.offset());
					border.visibility(true);
					border.setStyle({
						border: Style.categoryBorder
					});
					this.setStyle({
						opacity: 1
					});
				},
				blur: function() {
					this.getParent().getParent().getChildren()[2].visibility(false);
					this.setStyle({
						opacity: 0.6
					});
				}
			},
			dom: {
				style: {
					opacity: 0.6
				}
			}
		});
		
		var icon = Icon[type]();
		icon.position([Style.categoryIconLeft, Style.categoryTop + Style.categoryIconTop]);
		icon.focusable(true);
		icon.on({
			focus: function() {
				currentCategory = this;
				this.removeClass('focus');
			},
			click: function(message) {
				callback.call(this, message);
			},
			keydown: function(message) {
				var key = message.key();
				
				if (key.enter) {
					callback.call(this, message);
				} else if (key.down) {
					message.stopPropagation();
					currentItem.focus();
				}
			}
		});
		
		container.addChild(icon);
		return container;
	},
	
	_createList: function(option) {
		var List = caph.require('ui.base.component.List');
	    
	    var list = new List({
	        row: option.row,
	        column: option.column,
	        gap: [Style.listItemGap, 0],
	        size: [option.width, option.height],
	        position: [option.x, option.y, 0],
	        direction: List.HORIZONTAL,
	        on: {
	            focusitem: function (message) {
	            	var imageSize, descriptionSize;
	            	var children = message.source.getChildren();
	            	
	            	if (!caph.isEmpty(children)) {
	            		imageSize = children[0].size();
	            		descriptionSize = children[1].size();
	            		
		            	children[1].setStyle({
		            		backgroundColor: '#ffffff'
		            	});
		            	
		            	children[1].getChildren().forEach(function(item) {
	            			item.setTextColor(Style.fontColorFocused);
		            		
		            		item.setStyle({
		            			opacity: 1
		            		});
		            	});
		            	
		            	if (children[2]) {
		            		children[2].position([0, 0]);
		            		children[2].size([imageSize[0], imageSize[1] + descriptionSize[1]]);
		            		children[2].visibility(true);
		            	}
	            	}
	            	
	            	message.source.scale(1.05, 1.05);
	            	currentItem = message.source;
	            },
	            bluritem: function (message) {
	            	if (message.source) {
	            		var children = message.source.getChildren();
	            		
	            		if (!caph.isEmpty(children)) {
			            	children[1].setStyle({
			            		backgroundColor: ''
			            	});
			            	children[1].getChildren().forEach(function(item, index) {
		            			item.setTextColor(Style.fontColorNormal);
			            		
			            		item.setStyle({
			            			opacity: (index === 0) ? 0.8 : 0.6
			            		});
			            	});
			            	
			            	if (children[2]) {
			            		children[2].visibility(false);
			            	}
	            		}
		            	
		            	message.source.scale(1, 1);
	            	}
	            },
	            selectitem: function (message) {
	            	var source = message.source;
	            	var id, genreId;
	            	
	            	while (source && caph.isBlank((id = source.getProperty('id')))) {
	            		source = source.getParent();
	            	}

	            	if (source) {
	                	currentScene.go('DetailsScene', Scene.state.READY, {
	                		id: id,
	                		genreId: source.getProperty('genreId')
	                	});
	            	}
	            },
	            nextpage: option.onnextpage
	        },
	        decorateItem: option.decorateItem
	    });
	    
	    list.setStyle({
	    	overflow: 'visible',
	    	backgroundColor: Style.mainBackgroundColor,
	    	webkitTransition: '-webkit-transform 0.5s ease-out'
	    });
	    
	    list.setMouseAutoScrollAreaSize(Style.listLeft);
	    list.setMouseAutoScrollLockDuration(240);
    	list.setKeyLockDuration(240);
    	
	    return list;
	},
	
	onshow: function(message) {
    	var topComponents = this.top.getChildren();
    	topComponents[6].visibility(true);
    	
    	if (this.isShowCloseButton) {
    		topComponents[7].visibility(true);
        	topComponents[8].visibility(true);
    	}
    	
    	topComponents[6].getChildren()[0].setSelected(false);
    	topComponents[8].getChildren()[0].setSelected(false);
    	
    	this.bottom.x(Style.listLeft);
    	this.bottom.moveToX(0);
    	
    	currentScene = this;
    },
    
    onhide: function() {
    	var topComponents = this.top.getChildren();
    	topComponents[6].visibility(false);
    	
    	if (this.isShowCloseButton) {
    		topComponents[7].visibility(false);
        	topComponents[8].visibility(false);
    	}
    },
    
    onkeydown: function(message) {
    	if (message.key()['return']) {
    		this.back(Scene.state.READY);
    	}
    }
});