/*
	Karimov Alexey (gleam.alex@gmail.com)
	2010/10/08
	Обновление картинки
*/

var CFrameTick = function ( container, progress_container, url, video_id ) {
	var	hMain = container;
	var	hTimer = 0;
	var	pUrl = url;
	var	iTick = 0;
	var	hImg = new Array ( );
	var	iImgC = 0;
	var iZindex = 0;
	var	hTitle = 0;

	this.initialize = function ( ) {
		hTitle = document.createElement ( 'DIV' );
		hTitle.id = 'divTickFrame';
		hTitle.innerHTML = 'Обрабатываемый<br/>кадр';
		hTitle.style.position = 'absolute';
		hTitle.style.visibility = 'hidden';
		hTitle.style.display = 'block';
		hTitle.style.textAlign = 'center';
		hTitle.style.marginTop = '5px';
		hTitle.style.cursor = 'default';

		hMain.appendChild ( hTitle );
		hMain.style.backgroundColor = '#000000;';

		this.nextImage ( );
	}

	this.nextImage = function ( ) {
		if ( this.hTimer ) window.clearTimeout ( this.hTimer );

		var	p = this;
		var i = new Image ( );

		i.onload = function ( ) {
			if ( ( i.width && i.height && i.src ) ) {
				hImg [ iImgC ].onload = function ( ) { if ( !this.width || !this.height ) { } else { $(this).stop ( ).fadeTo ( 500, 1 ); }; this.onload = function ( ) { }; };

				$(hImg [ iImgC ] ).hide ( );

				hImg [ iImgC ].style.position = 'absolute';
				hImg [ iImgC ].style.left = '0px';
				hImg [ iImgC ].style.top = '0px';
				hTitle.style.zIndex = ( hImg [ iImgC ].style.zIndex = ++ iZindex ) + 1;
				hImg [ iImgC ].style.borderStyle = 'solid';
				hImg [ iImgC ].style.borderWidth = '1px';
				hImg [ iImgC ].style.borderColor = '#ffffff';
				hTitle.style.width = ( hImg [ iImgC ].width = i.width ) + 'px';
				hTitle.style.height = ( hImg [ iImgC ].height = i.height ) + 'px';
				hTitle.style.visibility = 'visible';
				hImg [ iImgC ].src = i.src;

				if ( parseInt ( hMain.style.height ) < i.height + 2 ) $( hMain ).animate ( { height: ( i.height + 2 ) + 'px' }, 500 );
				hMain.appendChild ( hImg [ iImgC ] );

				iImgC = ( iImgC + 1 ) % 10;
			}

			i.onload = function ( ) { };
		}

		if ( !hImg [ iImgC ] ) hImg [ iImgC ] = document.createElement ( 'IMG' );
		hImg [ iImgC ].onmouseover = hTitle.onmouseover = function ( ) { $( hTitle ).stop ( ).fadeTo ( 200, 0 ); };
		hImg [ iImgC ].onmouseout = hTitle.onmouseout = function ( ) { $( hTitle ).stop ( ).fadeTo ( 200, 1 ); };

		i.src = pUrl + '?rd=' + Math.random ( ) + '&tick=' + iTick;

		iTick ++;

		$.ajax ( {
			url: '/video.' + video_id,
			type: 'GET',
			dataType: 'json',
			success: function ( d ) {
				$( progress_container ).html ( d.encoded_percent );
			}
		} );

		this.hTimer = window.setTimeout ( function ( ) { p.nextImage ( ); }, 4500 );
	}
	
	this.initialize ( );
}