/*** [Section : Theater] ***/
(function(window, undefined)
{
	var _close = function()
	{
		var close = new Image()
		close.src = '/img/close_16.png';
		close.id = 'th_close';
		return close;
	}();

	var _header = function()
	{
		var header = document.createElement('header');
		header.appendChild(_close);
		return header;
	}();

	var _theater = function()
	{
		var th = document.createElement('div');
		th.id = 'th_theater';
		th.appendChild(_header);
		return th;
	}();
	
	var _background = function()
	{
		var bg = document.createElement('div');
		bg.id = 'th_bg';
		bg.appendChild(_theater);
		return bg;
	}();

	var _waiting = function()
	{
		var w = document.createElement('div');
		w.className = 'waiting';
		var loading = new Image();
		loading.src = '/img/loading.gif';
		w.innerHTML = '<span>Chargement de l\'image en cours</span><br />';
		w.appendChild(loading);
		return w;
	}();

	var _painting = null;


	function Theater()
	{
		_close.onclick = this.close;
		// _background.onclick = this.close;
	};
 
	Theater.prototype.open = function (id)
	{
		var body = window.document.getElementsByTagName('body')[0];
		_theater.appendChild(_waiting);
		_theater.style.width = '220px'; //size of waiting 

		body.appendChild(_background);

		_painting = new Image();

		_painting.onload = function() {
			_theater.style.width = _painting.width + 'px';
			_theater.removeChild(_waiting);
			_theater.appendChild(_painting);
		}
		
		// Only for debug and cache clearing
		// _painting.src= 'http://www.abelonevignati.com/img/big/52a4fc307add0573b6a1b2ed15f13085d819891d.jpg?'+escape(new Date());
		_painting.src= '/img/big/'+id+'.jpg';
	};
	
	Theater.prototype.close = function ()
	{
		var body = window.document.getElementsByTagName('body')[0];
		_theater.removeChild(_painting);
		body.removeChild(_background);
	};
	


	window.Theater = Theater;
})(this);

/*** [Section : Theater] ***/






function copyToClipboard() {
  window.prompt ("Copier l'adresse mail : Ctrl+C, Entrer", "abelone@hotmail.fr");
}

function toggle_expand(expander)
{
	var els = document.getElementsByClassName('row invisible');
	var new_class = 'row visible';
	var new_text = '- Cacher les tableaux';
	
	if(els.length<1)
	{
		els = document.getElementsByClassName('row visible');
		new_class = 'row invisible';
		new_text = '+ Plus de tableaux';
	}
		
	/* Because els is a LIVE NodeList */
	while(els.length>0)
		els[0].className = new_class;
		
	expander.innerText = new_text;
}

function collapse()
{
	var els = document.getElementsByClassName('row visible');
	
	/* Because els is a LIVE NodeList */
	while(els.length>0)
		els[0].className = 'row invisible';
}

var background = null;
var popup = null;
var waiting = null;
var body = null;
function initPopUp()
{
	background = createBackground();
	popup = createPopUp();
	waiting = createWaiting();
	body = document.getElementsByTagName('body')[0];	
	compatibilityFunc_addEventListener(popup, 'click', closeImage);
	compatibilityFunc_addEventListener(background, 'click', closeImage);
}

function createBackground()
{
	var bg = document.createElement('div');
	bg.className = 'popup_background';
	bg.style.width=screen.width+'px';
	bg.style.height=screen.height+'px';
	return bg;
}

function createPopUp()
{
	var pu = document.createElement('div');
	pu.className = 'popup_frame';
	return pu;
}

function createWaiting()
{
	var w = document.createElement('div');
	w.className = 'waiting content';
	var loading = new Image();
	loading.src = '/img/loading.gif';
	w.innerHTML = '<span>Chargement de l\'image en cours</span>';
	w.appendChild(loading);
	return w;
}

function openBig(id)
{
	body.appendChild(background);
	popup.appendChild(waiting);
	body.appendChild(popup);
	var img = new Image();
	img.className = 'content';
	img.onload = function() {
		img.style.top = '-'+ (img.height/2 + 30) +'px';
		popup.removeChild(waiting);
		popup.appendChild(img);
	}
	// Only for debug and cache clearing
	// img.src= '/img/big/'+id+'.jpg?'+escape(new Date());
	img.src= '/img/big/'+id+'.jpg';
}

function closeImage()
{
	popup.innerHTML = '';
	body.removeChild(popup);
	body.removeChild(background);
}

function compatibilityFunc_addEventListener(element, event_type, callback)
{
	if (element.addEventListener)
	{  
	  element.addEventListener(event_type, callback, false);   
	}
	else if (element.attachEvent)
	{  
	  element.attachEvent(event_type, callback);  
	}
}

function compatibilityFunc_removeEventListener(element, event_type, callback)
{
	if (element.removeEventListener)
	{  
	  element.removeEventListener(event_type, callback, false);   
	}
	else if (element.detachEvent)
	{  
	  element.detachEvent(event_type, callback);  
	}
}



var thumbnail = new Image();
var prev_position_x = 0;
var prev_position_y = 0;
var dx = 0;
var dy = 0;
var context = null;
var canvas = null;

function thumbInit(filename)
{
	canvas = document.getElementById("thumbnail");
	compatibilityFunc_addEventListener(canvas, "mousedown", startDrag);
	compatibilityFunc_addEventListener(window, "mouseup", stopDrag);
	
	context = canvas.getContext("2d");
	thumbnail.onload = function() {
			context.drawImage(thumbnail,0,0,298,142,0,0,298, 142);
	}
	var src = '/img/big/' + filename + '.jpg';
	thumbnail.src = src;
}

function startDrag(e)
{
		prev_position_x = e.clientX;
		prev_position_y = e.clientY;
		compatibilityFunc_addEventListener(window, "mousemove", processDrag);
}

function stopDrag()
{
	compatibilityFunc_removeEventListener(window, "mousemove", processDrag);
}

function processDrag(e)
{
	var w = thumbnail.width;
	var h = thumbnail.height;
	var cur_x = e.clientX;
	var cur_y = e.clientY;
	dx += prev_position_x - cur_x;
	dy += prev_position_y - cur_y;
	prev_position_y = cur_y;
	prev_position_x = cur_x;
	dx = (dx<0)?0:dx;
	dy = (dy<0)?0:dy;
	dx = (dx>w-298)?w-298:dx;
	dy = (dy>h-142)?h-142:dy;
	
	context.drawImage(thumbnail,dx,dy,298,142,0,0,298, 142);
}

function saveCanvas(id)
{
	canvasData = canvas.toDataURL("image/jpeg");
	var ajax = new XMLHttpRequest();
	ajax.onreadystatechange=function() {
	  if (ajax.readyState==4 && ajax.status==200)
	  {
	    console.log(ajax.responseText);
	  }
	}
	
	ajax.open("POST",'/paintings/'+id+'/save_thumbnail',false);
	ajax.setRequestHeader('Content-Type', 'application/upload');
	ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest");
	ajax.send(canvasData);
}