/// <reference path="./typings/angularjs/angular.d.ts"/>
/// <reference path="./typings/jquery/jquery.d.ts"/>
/// <reference path="./typings/ng-file-upload/ng-file-upload.d.ts"/>
class MainController {
	/* --- --- --- private const field --- --- --- */
	private DRAW_MILLI_SEC = 3000;

	/* --- --- --- private field --- --- --- */

	/*
	 * エンドロール中にフェードインアウトを
	 * 繰り返して描画される画像のリスト
	 */
	private portraits: FileList;
	private drawnPortrait: number = 0;

	/* --- --- --- public constructor --- --- --- */
	constructor(private $interval: ng.IIntervalService) {}

	/* --- --- --- public method --- --- --- */
	/**
	 * フォームで指定された画像をbodyの背景に設定します
	 * @param FileAPI(<input type="file"/>)で選択した1つのファイル
	 */
	public setBackgroundImage($files: FileList) : void {
		let file: File = $files[0];
		let fileReader = new FileReader();
		let setBgImage: EventListener = e => $("body").css("background-image", "url(" + fileReader.result + ")");
		fileReader.addEventListener("load", setBgImage);
		fileReader.readAsDataURL(file);
	}


	/*
	 * エンドロール中に描画される画像のリストを設定します
	 * @param エンドロール中に描画される画像のリスト
	 */
	public setPortraits($files: FileList) : void {
		this.portraits = $files;
	}


	/*
	 * setPortraits(FileList)で選択した全ての画像を
	 * フェードインとフェードアウトで描画します
	 */
	public startDrawingPortraits() : void {
		if (this.portraits == null) {
			alert("portraits was not selected");
			return;
		}

		//NOTE: why couldn't I use for loop ?
		this.$interval(this.drawingPortraits(), this.DRAW_MILLI_SEC, this.portraits.length);
	}

	/* --- --- --- private method --- --- --- */
	/**
	 * 画像の残り描画回数と画像のリストを受け取り
	 * 画像の1つをDRAW_SEC秒描画してから次の画像の描画に入ります。
	 * 画像の描画には強調効果としてフェードイン, フェードアウトが使用されます。
	 * @param rest      画像の残り描画回数
	 * @param portraits 画像のリスト
	 */
	private drawingPortraits() : any {
		let portrait: File = this.portraits[this.drawnPortrait++];
		let fileReader     = new FileReader();
		let drawingPortraits: EventListener = e => $("#portrait").attr("src", fileReader.result);
		fileReader.addEventListener("load", drawingPortraits);
		fileReader.readAsDataURL(portrait);
		console.log(this.drawnPortrait);
		return true;
	}
}

let appEndrollMate = angular.module("appEndrollMate", ["ngFileUpload"]);
appEndrollMate.controller("MainController", ["$interval", MainController]);