caph.app.addScene('SearchScene', $class({
    $extends: caph.require('ui.base.Scene'),
    
    searchItem: function() {
    	this.query = this.input.getValue() || '';
    	this.itemList = [];
    	
    	// local version
    	caph.xhr(searchUrl, {
    		type: 'JSON'
    	}).then(function(result) {
    		var value = result.value;
    		
    		if (value.status === 'OK') {
    			_.filter(value.dataList, function(item) {
    	    		if (item.title.indexOf(this.query) > -1) {
    	    			this.itemList.push(item);
    	    		}
    			}, this);
    			
    			this.makeList();
    			
    			currentItem = this.list.getCurrentPositionItem();
    		}
    	}.bind(this));
    	
    	/* server version
    	caph.xhr(searchUrl, {
    		type: 'JSON',
    		parameter: {
    			query: this.query,
    			start: 0,
    			offset: 20
    		}
    	}).then(function(result) {
    		var value = result.value;
    		
    		if (value.status === 'OK') {
    			this.itemList = value.dataList;
    			this.makeList();
    			
    	        currentItem = this.list.getCurrentPositionItem();
    		}
    	}.bind(this));
    	*/
    },
    
    makeList: function() {
    	var List = caph.require('ui.base.component.List');
    	
   		this.list && this.list.destroy();
        this.list = new List({
            direction: List.HORIZONTAL,
    		row: 2.2,
    		column: 7.06,
    		gap: [Style.listItemGap, 0],
    		size: [Style.width - Style.listLeft, Style.height - (Style.topHeight * 2)],
    		position: [Style.listLeft, Style.topHeight, 0],
            on: {
            	focusitem: function (message) {
            		var children = message.source.getChildren();
            		
            		if (!caph.isEmpty(children)) {
            			var image = children[0];
	            		var text = children[1];
	            		var label = text.getChildren()[0];
	            		var border = children[2];
	            		
	            		var imageSize = image.size();
	            		var textSize = text.size();
	            		
	            		text.setStyle({
		            		backgroundColor: '#ffffff'
		            	});
	            		
	            		label.setTextColor(Style.fontColorFocused);
	            		label.setStyle({
	            			opacity: 1
	            		});
	            		
	            		border.visibility(true);
	            		border.position([0, 0]);
	            		border.size([imageSize[0], imageSize[1] + textSize[1]]);
            		}
	            	
	            	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)) {
                			var text = children[1];
                			var label = text.getChildren()[0];
                			var border = children[2];
                			
                    		text.setStyle({
        	            		backgroundColor: ''
        	            	});
                    		
    	            		label.setTextColor(Style.fontColorNormal);
    	            		label.setStyle({
    	            			opacity: 0.6
    	            		});
    	            		
    	            		border.visibility(false);
                		}
                		
	            		message.source.scale(1, 1);
                	}
                },
                selectitem: function (message) {
                	var item = message.detail;
                	
                	currentScene.go('DetailsScene', Scene.state.READY, {
                		id: item.getProperty('id'),
                		genreId: item.getProperty('genreId')
                	});
                },
                nextpage: function() {
                	/* server version
            		caph.xhr(searchUrl, {
            			type: 'JSON',
                		parameter: {
                			query: this.getParent().getParent().query,
                			start: this.getItemCount(),
                			offset: 4
                		}
                	}).then(function(result) {
                		var value = result.value;
                		
                		if (value.status === 'OK' &&  && value.dataList.length > 0) {
                			this.addItems(value.dataList);
                		}
                	}.bind(this));
                	*/
                }
            },
            decorateItem: function(data, index) {
            	var item = ListItem.getMovie({
	    			id: data.id,
	    			genreId: data.genre.id,
	        		title: data.title,
	    			thumbnailUrl: '../../' + Style.imageRootPath + data.thumbnailUrl 
	        	});
            	
            	item.requestPostRender(function() {
	    			var bottom = this.getChildren()[1];
	    			
	    			var bottomSize = bottom.size();
	    			bottomSize[1] = bottomSize[1] - (Style.descriptionHeight / 2) + Style.descriptionMarginTop;
	    			
	    			bottom.size(bottomSize);
	    			bottom.getChildren()[1].destroy();
	    		}.bind(item));
            	
            	return item;
            },
            items: this.itemList
        });
        
		this.list.setStyle({
			overflow: 'visible'
		});
		
		this.list.on({
			keydown: function(message) {
				if (message.key().up && message.source.getProperty('data-list-item-index') % 2 === 0) {
					message.stopPropagation();
					currentCategory.focus();
				}
			}
		});
		
		this.list.setMouseAutoScrollAreaSize(Style.listLeft);
    	this.list.setMouseAutoScrollLockDuration(240);
    	this.list.setKeyLockDuration(240);
    	
		this.footer.addChild(this.list);
	},
    
    oncreate: function(){
    	var View = caph.require('module.renderer.View');
		var Component = caph.require('ui.base.Component');
		var Icon = caph.require('stripe.ui.component.Icon');
		var Label = caph.require('ui.base.component.Label');
		var Input  = caph.require('stripe.ui.component.Inputbox');
        var Button = caph.require('stripe.ui.component.Button');
		var Float = caph.require('ui.base.layout.Float');
		
		this.contentType = 'search';
		this.query = '';
		
    	this.header = new Float({
    		size: [Style.width, Style.topHeight],
    		hAlign: 'left',
			vAlign: 'center',
    		dom: {
    			style: {
    				backgroundColor: Style.topBackgroundColor
    			}
    		}
    	});
    	
    	this.returnIconArea = new Component({
			on: {
				focus: function() {
					var children = this.getChildren();
					
					if (children[1].visibility()) {
						var border = children[0];
						border.size(this.size());
						border.position(this.offset());
						border.visibility(true);
						border.setStyle({
							border: Style.categoryBorder
						});
					}
				},
				blur: function() {
					this.getChildren()[0].visibility(false);
				}
			}
		});
    	
    	this.returnIconArea.requestPostRender(function() {
    		var returnIconSize = this.returnIcon.size();
    		this.returnIconArea.size([returnIconSize[0] + Style.returnIconLeft * 2, returnIconSize[1] + Style.returnIconTop * 2]);
    	}.bind(this));
    	
    	this.returnIconArea.addChild(new View({
    		dom: {
    			style: {
    				boxSizing: 'border-box',
    				visibility: 'hidden'
    			}
    		}
    	}));
    	
    	this.returnIconArea.addChild(this.returnIcon = Icon.ret());
    	
		this.returnIcon.position([Style.returnIconLeft, Style.returnIconTop]);
		this.returnIcon.focusable(true);
		this.returnIcon.on({
			focus: function() {
				this.removeClass('focus');
			},
			click: function(message) {
				this.input.setValue((this.query = ''));
				this.back(Scene.state.READY);
			}.bind(this),
			keydown: function(message) {
				if (message.key().enter) {
					this.input.setValue((this.query = ''));
					this.back(Scene.state.READY);
				}
			}.bind(this)
		});
		
        this.input = new Input({
        	placeholder: 'Input Keyword',
        	callback: function(message) {
        		currentScene.searchItem();
        	},
        	on: {
        		focus: function() {
        			currentCategory = this;
        		},
        		keydown: function(message) {
        			if (message.key().down) {
        				message.stopPropagation();
        				currentItem.focus();
        			}
        		}
        	},
        	dom: {
				style: {
					marginLeft: Style.searchInputLeft + 'px'
				}
        	}
        });
        
        this.searchButton = new Button({
            contents: 'Search',
            on: {
            	focus: function() {
            		currentCategory = this;
            	},
                click: function(){
                	currentScene.searchItem();
                },
                keydown: function(message){
                	var key = message.key();
                	
                    if (key.enter){
                    	currentScene.searchItem();
                    } else if (key.down) {
                    	message.stopPropagation();
        				currentItem.focus();
                    }
                }
            },
        	dom: {
				style: {
					marginLeft: Style.searchButtonMarginLeft + 'px'
				}
        	}
        });
        
        this.header.addChild(this.returnIconArea.addChild(this.returnIcon), {
        	size: [undefined, Style.topHeight]
        });
        
        this.header.addChild(new Label({
			text: 'SEARCH',
		    align: {
		    	horizontal: 'center',
		    	vertical: 'center'
		    },
		    dom: {
				style: {
					marginLeft: Style.searchTitleLeft + 'px',
					opacity: 0.8
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.titleFontSize), {
        	size: [undefined, Style.searchItemHeight]
        });
        
        this.header.addChild(this.input, {
        	size: [400, Style.searchItemHeight]
        });
        this.header.addChild(this.searchButton, {
        	size: [200, Style.searchItemHeight]
        });
        
		this.footer = new Component({
			dom: {
				style: {
					backgroundColor: Style.mainBackgroundColor
				}
			}
		}).size([Style.width, Style.height - Style.topHeight]).position([0, Style.topHeight]);
		
		this.addChild(this.header);
		this.addChild(this.footer);
    },
    
    onshow: function() {
    	this.searchItem();
    	
		this.returnIconArea.visibility(false);
		this.returnIcon.setSelected(false);
		
		currentScene = this;
    	currentCategory = this.input;
    	
		setTimeout(function() {
			currentCategory.focus();
    	}, 0);
    },
    
    onkeydown: function(message) {
    	if (message.key()['return']) {
    		this.back(Scene.state.READY);
    	}
    }
}));
