var Scene = caph.require('ui.base.Scene');

caph.app.addScene('DetailsScene', $class({
    $extends: Scene,
    
    getImage: function(item) {
    	var type = item.genre.id === 2 ? 'movie' : 'tv';
    	return ListItem.getItemImage('../../' + Style.imageRootPath + item.imageUrl).size([Style[type + 'DetailImageWidth'], Style[type + 'DetailImageHeight']]);
    },
    
    getGenreAndRating: function(item) {
    	var Linear = caph.require('ui.base.layout.Linear');
		
    	var genreAndRating = new Linear({
    		direction: Linear.LayoutParam.HORIZONTAL
    	});
    	
    	genreAndRating.addChild(this.genre = this.getGenre(item), {
    		size: [undefined, Style.genreHeight] 
    	});
    	genreAndRating.addChild(this.currentRating = this.getCurrentRating(item), {
    		size: [undefined, Style.genreHeight] 
    	});
    	genreAndRating.addChild(this.currentRatingText = this.getCurrentRatingText(item), {
    		size: [undefined, Style.genreHeight] 
    	});
    	
    	return genreAndRating;
    },
    
    getGenre: function(item) {
    	var Label = caph.require('ui.base.component.Label');
    	
    	return new Label({
			text: item.genre.name || 'Genre',
			align: {
				horizontal: 'left', 
				vertical: 'middle' 
			},
			dom: {
				style: {
					opacity: 0.8
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.genreFontSize);
    },
    
    getCurrentRating: function(item) {
    	var Linear = caph.require('ui.base.layout.Linear');
    	var View = caph.require('module.renderer.View');
    	
    	var i, suffix, star, remain;
    	var userRating = (caph.isBlank(item.userRating) ? 0 : item.userRating).toFixed(1);
    	
    	var rating = new Linear({
    		size: [(Style.starSize + Style.starMarginRight) * 5, Style.genreHeight],
    		interval: Style.starMarginRight,
    		dom: {
    			style: {
    				marginLeft: Style.ratingMarginLeft
    			}
    		}
    	});
    	
    	for (i = 0; i < 5; i++) {
    		if (userRating < i + 1) {
    			suffix = 'bk';
    		} else {
    			suffix = 'wh';
    		}
    		
    		star = new View({
    			dom: {
    				style: {
    					background: 'url("' + Style.imageRootPath + 'app/app_star_' + suffix + '.png") left center no-repeat'
    				}
    			}
    		});
    		
    		remain = userRating - i;
    		
    		if (remain > 0 && remain < 1) {
    			star.addChild(new View({ 
					dom: {
	    				style: {
	    					background: 'url("' + Style.imageRootPath + 'app/app_star_wh.png") left center no-repeat'
	    				}
	    			}
				}).size([Style.starSize * remain, Style.genreHeight]));
			}
    		
    		rating.addChild(star, {
    			size: [Style.starSize, Style.genreHeight]
    		});
    	}
    	
    	return rating;
    },
    
    getCurrentRatingText: function(item) {
    	var Label = caph.require('ui.base.component.Label');
    	
    	return new Label({
			text: (caph.isBlank(item.userRating) ? 0 : item.userRating).toFixed(1),
			align: {
				horizontal: 'left', 
				vertical: 'middle' 
			},
			dom: {
				style: {
					marginLeft: Style.ratingMarginLeft,
					opacity: 0.6
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.ratingFontSize);
    },
    
    getIcons: function(item) {
    	var Linear = caph.require('ui.base.layout.Linear');
    	var View = caph.require('module.renderer.View');
    	
    	var icons = caph.isEmpty(item.info) ? ['dolby', 'free', 'hd', 'rg13', 'sd'] : item.info;
    	
    	var container = new Linear({
    		direction: Linear.LayoutParam.HORIZONTAL,
    		interval: Style.infoIconMarginRight
    	});
    	
		icons.forEach(function(icon) {
			container.addChild(new View({
				dom: {
					style: {
						background: 'url("' + Style.imageRootPath + 'app/app_tag_' + icon + '.png") center center no-repeat'
					}
				}
			}), {
				size: [Style[icon + 'Width'], Style.infoIconHeight]
			});
		});
		
		return container;
    },
    
    getInfo1: function(item) {
    	var Linear = caph.require('ui.base.layout.Linear');
    	var Label = caph.require('ui.base.component.Label');
    	
    	var infos = ['Release: ' + (item.publishYear || '0000'), 'Director: ' + (item.director || 'Unknown')];
    	
    	var container = new Linear({
    		direction: Linear.LayoutParam.HORIZONTAL
    	});
		
    	infos.forEach(function(info, index, array) {
			container.addChild(new Label({
				text: info,
				align: {
					horizontal: 'left', 
					vertical: 'middle' 
				},
				multiLine: false,
				dom: {
					style: {
						opacity: 0.6
					}
				}
			}).setTextColor(Style.fontColorNormal).setTextSize(Style.infoTextFontSize), {
				size: [undefined, Style.infoTextHeight]
			});
			
			if (index < array.length - 1) {
				container.addChild(this.getSeparator(), {
					size: [Style.infoTextSeparatorWidth, Style.infoTextHeight]
				});
			}
		}, this);
		
		return container;
    },
    
    getSeparator: function() {
    	var View = caph.require('module.renderer.View');
		
		return new View({
			dom: {
				style: {
					padding: Style.infoTextSeparatorPadding,
					boxSizing: 'border-box',
					opacity: 0.2
				}
			}
		}).addChild(new View({
			dom: {
				style: {
					backgroundColor: '#ffffff'
				}
			}
		}).size([1, Style.infoTextSeparatorHeight]));
    },
    
    getInfo2: function(item) {
    	var Label = caph.require('ui.base.component.Label');
    	var actor = 'Actor: ' + (item.actor || 'Unknown');
    	
    	return new Label({
			text: actor,
			align: {
				horizontal: 'left', 
				vertical: 'middle' 
			},
			multiLine: false,
			ellipsis: true,
			dom: {
				style: {
					opacity: 0.6
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.infoTextFontSize);
    },
    
    getInfo3: function(item) {
    	var View = caph.require('module.renderer.View');

    	var description = new View({
    		dom: {
    			style: {
    				opacity: 0.6,
    				overflow: 'hidden',
					lineHeight: Style.infoTextHeight + 'px',
					color: Style.fontColorNormal,
					fontSize: Style.infoTextFontSize,
					marginTop: Style.infoTextHeight + 'px'
    			}
    		}
    	});

    	description.addChild(new View({
    		dom: {
    			innerText: item.description
    		}
    	}).z(0));
    	
    	return description;
    },
    
    getRating: function(item) {
    	var Float = caph.require('ui.base.layout.Float');
    	var View = caph.require('module.renderer.View');

    	var i, suffix, star, remain;
    	var userRating = (caph.isBlank(item.userRating) ? 0 : item.userRating).toFixed(1);
    	
    	var rating = new Float({
    		hAlign: 'center',
    	    vAlign: 'center',
    	    hInterval: Style.ratingButtonStarMarginRight,
    		position: [Style.ratingButtonLeft, Style.buttonTop],
            size: [Style.buttonWidth, Style.buttonHeight],
            dom: {
            	style: {
            		opacity: 0.8,
            		boxSizing: 'border-box',
            		border: '2px solid white'
            	}
            },
            on: {
            	focus: function() {
            		currentCategory = this;
            		
            		this.setStyle({
            			opacity: 1,
            			backgroundColor: 'white'
            		});
            	},
            	blur: function() {
            		this.setStyle({
            			opacity: 0.8,
            			backgroundColor: ''
            		});
            	},
            	click: function() {
            		this.ratingPopup.show();
            	}.bind(this),
            	keydown: function(message) {
            		var key = message.key();
            		
            		if (key.enter) {
            			message.stopPropagation();
            			this.ratingPopup.show();
            			
            			currentScene = null;
            			currentCategory = null;
            		} else if (key.up) {
            			message.stopPropagation();
            			this.moreButton.focus();
            		} else if (key.down) {
            			message.stopPropagation();
            			currentItem.focus();
            		}
            	}.bind(this)
            }
    	}).focusable(true);
    	
    	for (i = 0; i < 5; i++) {
    		if (userRating < i + 1) {
    			suffix = 'bk';
    		} else {
    			suffix = 'yl';
    		}
    		
    		star = new View({
    			dom: {
    				style: {
    					marginTop: Style.ratingButtonStarTop + 'px',
    					background: 'url("' + Style.imageRootPath + 'app/app_icon_star_' + suffix + '.png") left center no-repeat'
    				}
    			}
    		});
    		
    		remain = userRating - i;
    		
    		if (remain > 0 && remain < 1) {
    			star.addChild(new View({ 
					dom: {
	    				style: {
	    					background: 'url("' + Style.imageRootPath + 'app/app_icon_star_yl.png") left center no-repeat'
	    				}
	    			}
				}).size([Style.ratingButtonStarSize * remain, Style.ratingButtonStarSize]));
			}
    		
    		rating.addChild(star, {
    			size: [Style.ratingButtonStarSize, Style.ratingButtonStarSize]
    		});
    	}
    	
    	return rating;
    },
    
    getRatingPopup: function() {
    	var Popup = caph.require('stripe.ui.component.Popup');
    	var Rating = caph.require('stripe.ui.component.Rating');
    	
    	var ratingPopup = new Popup({
			popupType: 'CONFIRM',
			buttonContent: ['OK', 'CANCLE'],
			callback: function(result) {
				if (result) {
					this.rating.destroy();
					this.rating = this.getRating({
						userRating: ratingPopup.getMessageAreaComponent().getChildren()[0].getRatingValue()
					});
					this.addChild(this.rating);
				}

				currentScene = this;
    			currentCategory = this.rating;
    			
				setTimeout(function() {
					this.rating.focus();	
				}.bind(this), 0);
			}.bind(this)
		}).setTitle('Rating');
    	
    	ratingPopup.getMessageAreaComponent().addChild(new Rating().level(2));
    	
        return ratingPopup;
    },
    
    getRelatedList: function(genreId) {
    	var List = caph.require('ui.base.component.List');
    	var Label = caph.require('ui.base.component.Label');
    	
        var list = new List({
            direction: List.HORIZONTAL,
    		row: 1.01,
    		column: genreId === 2 ? 11.725 : 7.175,
    		gap: [Style.listItemGap, 0],
    		size: [Style.width - Style.relatedListLeft, Style.relatedListHeight],
    		position: [Style.relatedListLeft, Style.relatedListTop, 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();
                		var labelSize = label.size();

                		text.size([textSize[0], Style.relatedTextHeightFocused]);
                		text.setStyle({
    	            		backgroundColor: '#ffffff'
    	            	});
                		
                		label.setTextColor(Style.fontColorFocused);
                		label.size([labelSize[0], Style.relatedTextHeightFocused]);
                		label.setStyle({
                			opacity: 1
                		});
                		
                		border.size([imageSize[0], imageSize[1] + textSize[1]]);
                		border.position([0, 0]);
    	            	border.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)) {
                			var text = children[1];
                    		var textSize = text.size();

                    		text.size([textSize[0], Style.relatedTextHeight]);
                    		text.setStyle({
        	            		backgroundColor: ''
        	            	});
                    		
    	            		var label = text.getChildren()[0];
    	            		var labelSize = label.size();
    	            		
    	            		label.setTextColor(Style.fontColorNormal);
    	            		label.size([labelSize[0], Style.relatedTextHeight]);
    	            		label.setStyle({
    	            			opacity: 0.6
    	            		});
    	            		
    	            		children[2].visibility(false);
                		}
	            		
	            		message.source.scale(1, 1);
                	}
                },
                selectitem: function (message) {
                	// local version
                	caph.xhr(detailUrl, {
                    	type: 'JSON'
                    }).then(function(result) {
                    	var target = this.getParent();
                    	var value = result.value;
                    	
                    	if (value.status === 'OK') {
                    		target.createItem(_.find(value.dataList, function(item) {
                    			return item.id === message.detail.getProperty('id');
                    		}));
                    		
                    		target.ratingPopup.getMessageAreaComponent().getChildren()[0].setRatingValue(0);
                        	
                        	currentCategory = target.button;
                    	}
                    }.bind(this));
                	
                	/* server version
                	caph.xhr(detailUrl, {
                    	type: 'JSON',
                    	parameter: {
                    		id: message.detail.getProperty('itemId')
                    	}
                    }).then(function(result) {
                    	var value = result.value;
                    	
                    	if (value.status === 'OK') {
                    		this.createItem(value.data);
                        	this.ratingPopup.getMessageAreaComponent().getChildren()[0].setRatingValue(0);
                        	
                        	currentCategory = this.button;
                    	}
                    }.bind(this));
                    */
                },
                nextpage: function() {
                	/* server version
                	caph.xhr(listUrl, {
                    	type: 'JSON',
                    	parameter: {
                    		id: genreId,
                    		start: this.getItemCount(),
                    		offset: 2
                    	}
                    }).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.getItemLayout();
        	    var image = ListItem.getItemImage('../../' + Style.imageRootPath + data.thumbnailUrl);
        	    var description = ListItem.getItemDescription();
        	    var title = ListItem.getItemDescriptionTitle(data.title).setStyle({
        	    	left: '',
        	    	top: ''
        	    }).setAlign({
        	    	horizontal: 'center'
        	    });
        	    
        	    item.addChild(image, {
        	    	size: ['100%', Style.relatedImageHeight]
        	    });
        	    
        	    item.addChild(description, {
        	    	size: ['100%', Style.relatedTextHeight]
        	    });
        	    
        	    item.addChild(ListItem.getFocusLayer());
        	    
        	    description.addChild(title, {
        	    	size: ['100%', Style.relatedTextHeight]
        	    });
        		
        		return ListItem.setCommonProperty(item, data);
            }
        });
        
		list.setStyle({
			overflow: 'visible'
		});
		
		list.on({
			keydown: function(message) {
				if (message.key().up) {
					message.stopPropagation();
					caph.module.focus.Manager.getInstance().focus(currentCategory);
				}
			}
		});
		
		list.setMouseAutoScrollAreaSize(Style.relatedListLeft);
		list.setMouseAutoScrollLockDuration(240);
		list.setKeyLockDuration(240);	
		
		return list;
    },
    
    oncreate: function() {
		var View = caph.require('module.renderer.View');
		var Component = caph.require('ui.base.Component');
		var Linear = caph.require('ui.base.layout.Linear');
		var Label = caph.require('ui.base.component.Label');
		var Icon = caph.require('stripe.ui.component.Icon');
		var Button = caph.require('stripe.ui.component.Button');
		
    	this.contentType = 'detail';
    	
    	this.header = new Component({
    		dom: {
    			style: {
    				backgroundColor: Style.topBackgroundColor
    			}
    		}
    	}).size([Style.width, Style.topHeight]);
    	
		this.title = new Label({
			align: { 
				horizontal: 'center', 
				vertical: 'center' 
			},
			size: [Style.width, Style.topHeight],
			dom: {
				style: {
					opacity: 0.9
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.titleFontSize);
		
		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.position());
						border.visibility(true);
						border.setStyle({
							border: Style.categoryBorder
						});
					}
				},
				blur: function() {
					this.getChildren()[0].visibility(false);
				}
			}
		});
		
		this.returnIconArea.addChild(new View({
    		dom: {
    			style: {
    				boxSizing: 'border-box',
    				visibility: 'hidden'
    			}
    		}
    	}));
		
		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.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.back(Scene.state.READY);
			}.bind(this),
			keydown: function(message) {
				if (message.key().enter) {
					this.back(Scene.state.READY);
				}
			}.bind(this)
		});
		
		this.header.addChild(this.title);
		this.header.addChild(this.returnIconArea.addChild(this.returnIcon));
		
		this.content = new View();
		this.content.addChild(this.description = new Linear({
			direction: Linear.LayoutParam.VERTICAL,
			fillType: {
				width: Linear.LayoutParam.FILL_PARENT
			}
		}));
		this.content.addChild(this.moreButton = new Component({
			size: [Style.moreButtonSize, Style.moreButtonSize],
			dom: {
				style: {
					opacity: 0.8,
					border: '1px solid white',
					boxSizing: 'border-box',
					background: 'url("' + Style.imageRootPath + 'btn_icon_more.png") no-repeat center',
					visibility: 'hidden'
				}
			},
			on: {
				focus: function() {
					this.setStyle({
						opacity: 1,
						backgroundImage: 'url("' + Style.imageRootPath + 'btn_icon_more_f.png")',
						backgroundColor: 'white'
					});
				},
				blur: function() {
					this.setStyle({
						opacity: 0.8,
						backgroundImage: 'url("' + Style.imageRootPath + 'btn_icon_more.png")',
						backgroundColor: ''
					});
				},
				click: function(message) {
					this.moreButton.visibility(false).setEnable(false);
					
					this.button.visibility(false).setEnable(false);
					this.rating.visibility(false).setEnable(false);
					this.relatedList.visibility(false).setEnable(false);
					this.relatedListTitle.visibility(false).setEnable(false);

					this.info3.size(undefined, Style.infoTextHeight * 13);
					
					if (this.info3.size()[1] < this.info3.getChildren()[0].size()[1]) {
						this.downArrow.visibility(true).setEnable(true);
					}
					
					this.closeButton.visibility(true).setEnable(true);
					this.closeButton.focus();
            	}.bind(this),
            	keydown: function(message) {
            		var key = message.key();
            		
            		if (key.enter) {
            			this.moreButton.visibility(false).setEnable(false);
            			
            			this.button.visibility(false).setEnable(false);
            			this.rating.visibility(false).setEnable(false);
            			this.relatedList.visibility(false).setEnable(false);
            			this.relatedListTitle.visibility(false).setEnable(false);
    					
            			this.info3.size(undefined, Style.infoTextHeight * 13);
    					
    					if (this.info3.size()[1] < this.info3.getChildren()[0].size()[1]) {
    						this.downArrow.visibility(true).setEnable(true);
    					}
    					
    					this.closeButton.visibility(true).setEnable(true);
    					this.closeButton.focus();
            		} else if (key.down) {
            			message.stopPropagation();
            			currentCategory.focus();
            		}
            	}.bind(this)
			}
		}).focusable(true));
		
		this.upArrow = new Component({
			size: [Style.detailArrowWidth, Style.detailArrowHeight],
			position: [0, Style.detailArrowUpTop],
    		dom: {
    			style: {
    				background: 'url("' + Style.imageRootPath + 'arrow/detailpage_arrow_up.png' + '") no-repeat',
    				visibility: 'hidden',
    				opacity: 0.6
    			}
    		}
    	});
		
		this.downArrow = new Component({
			size: [Style.detailArrowWidth, Style.detailArrowHeight],
			position: [0, Style.detailArrowDownTop],
    		dom: {
    			style: {
    				background: 'url("' + Style.imageRootPath + 'arrow/detailpage_arrow_down.png' + '") no-repeat',
    				visibility: 'hidden',
    				opacity: 0.6
    			}
    		}
    	});
		
		this.closeButton = new Button({
        	contents: 'Close',
            position: [0, Style.closeButtonTop],
            size: [Style.closeButtonWidth, Style.closeButtonHeight],
            on: {
            	click: function(message) {
            		this.closeButton.visibility(false).setEnable(false);
            		
            		this.upArrow.visibility(false).setEnable(false);
            		this.downArrow.visibility(false).setEnable(false);
            		
            		this.button.visibility(true).setEnable(true);
            		this.rating.visibility(true).setEnable(true);
            		this.relatedList.visibility(true).setEnable(true);
            		this.relatedListTitle.visibility(true);

            		this.info3.size([undefined, Style.infoTextHeight * 6]);
            		this.info3.getChildren()[0].y(0);
					
					if (this.info3.size()[1] < this.info3.getChildren()[0].size()[1]) {
						this.moreButton.visibility(true).setEnable(true);
					}
					
					this.button.focus();
            	}.bind(this),
            	keydown: function(message) {
            		var key = message.key();
            		
            		if (key.enter) {
            			this.closeButton.visibility(false).setEnable(false);
            			
            			this.upArrow.visibility(false).setEnable(false);
            			this.downArrow.visibility(false).setEnable(false);
                		
            			this.button.visibility(true).setEnable(true);
            			this.rating.visibility(true).setEnable(true);
            			this.relatedList.visibility(true).setEnable(true);
            			this.relatedListTitle.visibility(true);

            			this.info3.size(undefined, Style.infoTextHeight * 6);
            			this.info3.getChildren()[0].y(0);
    					
    					if (this.info3.size()[1] < this.info3.getChildren()[0].size()[1]) {
    						this.moreButton.visibility(true).setEnable(true);
    					}
    					
    					this.button.focus();
            		} else if (key.up) {
            			var inner = this.info3.getChildren()[0];
        				var innerTop = inner.y() || 0;
        				
        				if (innerTop === 0) {
        					this.upArrow.visibility(false).setEnable(false);
        					return;
        				}
        				
        				var y = innerTop + Style.infoTextHeight;
        				inner.y(y);
        				
        				if (y === 0) {
        					this.upArrow.visibility(false).setEnable(false);
        				}
        				
        				if (!this.downArrow.visibility()) {
        					this.downArrow.visibility(true).setEnable(true);
        				}
            		} else if (key.down) {
            			var outer = this.info3;
        				var outerHeight = outer.size()[1];
        				var inner = outer.getChildren()[0];
        				var innerHeight = inner.size()[1];
        				var innerTop = inner.y() || 0;
        				
        				if (outerHeight - innerTop === innerHeight) {
        					this.downArrow.visibility(false).setEnable(false);
        					return;
        				}
        				
        				var y = innerTop - Style.infoTextHeight;
        				inner.y(y);
        				
        				if (outerHeight - y === innerHeight) {
        					this.downArrow.visibility(false).setEnable(false);
        				}
        				
        				if (!this.upArrow.visibility()) {
        					this.upArrow.visibility(true).setEnable(true);
        				}
            		}
            	}.bind(this)
            }
        });
		
		this.button = new Button({
        	contents: 'Watch Now',
            position: [Style.watchButtonLeft, Style.buttonTop],
            size: [Style.buttonWidth, Style.buttonHeight],
            on: {
            	focus: function() {
            		currentCategory = this;
            	},
            	click: function() {
            		this.go('VideoScene', Scene.state.READY);
            	}.bind(this),
            	keydown: function(message) {
            		var key = message.key();
            		
            		if (key.enter) {
            			message.stopPropagation();
            			this.go('VideoScene', Scene.state.READY);	
            		} else if (key.up) {
            			message.stopPropagation();
            			this.moreButton.focus();
            		} else if (key.down) {
            			message.stopPropagation();
            			currentItem.focus();
            		}
            	}.bind(this)
            }
        });
		
		this.relatedListTitle = new Label({
			text: 'Customers Who Watched This Also Watched',
			align: {
				horizontal: 'left', 
				vertical: 'middle' 
			},
			size: [undefined, Style.relatedTextHeight],
			position: [Style.relatedTextLeft, Style.relatedTextTop],
			dom: {
				style: {
					opacity: 0.6
				}
			}
		}).setTextColor(Style.fontColorNormal).setTextSize(Style.infoTextFontSize);
		
		this.addChild(this.header);
		this.addChild(this.content);
		this.addChild(this.upArrow);
		this.addChild(this.downArrow);
		this.addChild(this.closeButton);
		this.addChild(this.button);
		this.addChild(this.relatedListTitle);
		this.addChild((this.ratingPopup = this.getRatingPopup()));
		
		this.setStyle({
			backgroundColor: Style.mainBackgroundColor
		});
    },
    
	onshow: function(message) {
		if (!caph.isBlank(message.detail.parameter)) {
			// local version
			caph.xhr(detailUrl, {
	        	type: 'JSON'
	        }).then(function(result) {
	        	var value = result.value;
	        	
	        	if (value.status === 'OK') {
	        		this.loadItem(_.find(value.dataList, function(item) {
	        			  return item.id === message.detail.parameter.id;
	        		}));
	        	}
	        }.bind(this));
			
			/* server version
			caph.xhr(detailUrl, {
	        	type: 'JSON',
	        	parameter: {
	        		id: message.detail.parameter.id
	        	}
	        }).then(function(result) {
	        	var value = result.value;
	        	
	        	if (value.status === 'OK') {
	        		this.loadItem(value.data);
	        	}
	        }.bind(this));
	        */
		}
		
		currentScene = this;
		currentCategory = this.button;
		
		if (this.relatedList && this.relatedList.getItemCount() > 0) {
			currentItem = this.relatedList.getCurrentPositionItem();
		}
	},
	
	loadItem: function(data) {
		var type = data.genre.id === 2 ? 'movie' : 'tv';
		
		var messageArea = this.ratingPopup.getMessageAreaComponent();
		var messageAreaSize = messageArea.size();
		
		var rating = messageArea.getChildren()[0];
		var ratingSize = rating.size(); 
		
		rating.position([messageAreaSize[0] / 2 - ratingSize[0] / 2, messageAreaSize[1] / 2 - ratingSize[1] / 2]);
		rating.setRatingValue(0);
		
		this.createItem(data);
		this.createRelatedList(data.genre.id);
		
		this.closeButton.visibility(false);

		this.content.position([Style[type + 'DetailLeft'], Style.detailTop]);
		this.content.size([Style.width - Style[type + 'DetailLeft'], Style.height - Style.detailTop - Style.relatedListHeight]);

		this.moreButton.position([Style.width - Style.moreButtonRight - Style.moreButtonSize - Style[type + 'DetailLeft'], Style.genreHeight + Style.infoHeight + (Style.infoTextHeight * 8)]);
		
		this.description.position([Style[type + 'DetailImageWidth'] + Style[type + 'DetailDescriptionLeft'], 0]);
		this.description.size([Style.infoTextWidth, Style.height - Style.detailTop - Style.relatedListHeight]);

		this.upArrow.x(Style[type + 'DetailLeft'] + Style[type + 'DetailImageWidth'] + Style[type + 'DetailDescriptionLeft'] + (Style.infoTextWidth / 2) - (this.upArrow.size()[0] / 2)).visibility(false);
		this.downArrow.x(Style[type + 'DetailLeft'] + Style[type + 'DetailImageWidth'] + Style[type + 'DetailDescriptionLeft'] + (Style.infoTextWidth / 2) - (this.downArrow.size()[0] / 2)).visibility(false);
		this.closeButton.x(Style[type + 'DetailLeft'] + Style[type + 'DetailImageWidth'] + Style[type + 'DetailDescriptionLeft'] + (Style.infoTextWidth / 2) - (this.closeButton.size()[0] / 2)).visibility(false);
		
		this.relatedListTitle.visibility(true);
		
		if (this.info3.size()[1] < this.info3.getChildren()[0].size()[1]) {
			this.moreButton.visibility(true);
		} 
		
		this.button.visibility(true);
		
		setTimeout(function() {
			this.button.focus();
    	}.bind(this), 0);
	},
	
	createItem: function(item) {
		this.replaceItem();
		
    	this.title.setText(item.title);
    	
    	this.returnIcon.setSelected(false);
		this.returnIconArea.visibility(false);
    	
    	this.content.addChild((this.image = this.getImage(item)));
    	
    	this.description.addChild(this.genreAndRating = this.getGenreAndRating(item), {
    		size: [undefined, Style.genreHeight]
    	});
		
		this.description.addChild((this.icons = this.getIcons(item)), {
			size: [undefined, Style.infoHeight]
		});
		
		this.description.addChild((this.info1 = this.getInfo1(item)), {
			size: [undefined, Style.infoTextHeight]
		});
		
		this.description.addChild((this.info2 = this.getInfo2(item)), {
			size: [Style.infoTextWidth, Style.infoTextHeight]
		});
		
		this.description.addChild((this.info3 = this.getInfo3(item)), {
			size: [Style.infoTextWidth, Style.infoTextHeight * 6]
		});
		
		this.addChild((this.rating = this.getRating(item)));
	},
	
	 replaceItem: function() {
    	this.image && this.image.destroy();
   		this.genre && this.genre.destroy();
    	this.currentRating && this.currentRating.destroy();
    	this.currentRatingText && this.currentRatingText.destroy();
    	this.genreAndRating && this.genreAndRating.destroy();
    	this.icons && this.icons.destroy();
    	this.info1 && this.info1.destroy();
    	this.info2 && this.info2.destroy();
    	this.info3 && this.info3.destroy();
    	this.rating && this.rating.destroy();
    },
	    
	createRelatedList: function(genreId) {
		this.relatedList && this.relatedList.destroy();
		this.addChild((this.relatedList = this.getRelatedList(genreId)));
		
		// local version
		caph.xhr(listUrl[genreId], {
        	type: 'JSON'
        }).then(function(result) {
        	var value = result.value;
        	
        	if (value.status === 'OK') {
       			this.relatedList.addItems(value.dataList);
       			currentItem = this.relatedList.getCurrentPositionItem();
        	}
        }.bind(this));
		
		/* server version
		caph.xhr(listUrl, {
        	type: 'JSON',
        	parameter: {
        		id: genreId,
        		start: this.getItemCount(),
        		offset: genreId === 2 ? 24 : 16
        	}
        }).then(function(result) {
        	var value = result.value;
        	
        	if (value.status === 'OK') {
       			this.relatedList.addItems(value.dataList);
       			currentItem = this.relatedList.getCurrentPositionItem();
        	}
        }.bind(this));
        */
	},
	
    onkeydown: function(message) {
    	if (message.key()['return']) {
    		this.back(Scene.state.READY);
    	}
    }
}));
