Clients = function() {
	this.clients_list = $('#doc_list > li');
	this.isIE = $.browser.msie;

	this.init();
}

Clients.prototype = {
	ANIM_DURATION : 'fast',

	init: function() {
		this.initList();
		new Popup(this.clients_list);
	},

	initList: function() {
		var oThis = this;

		this.clients_list.each(
			function(i){
				var oMap = new ClientsLetter($(this), i, oThis);
			}
		);
	}
}

ClientsLetter = function(oItem, id, oClients){
	this.oItem = oItem;
	this.id = id;
	this.oClients = oClients;

	this.init();
}

ClientsLetter.prototype = {
	is_animate: false,
   	MAX_CORNER: 7,
	CANVAS_WIDTH: 110,
	CANVAS_HEIGHT: 140,

	init : function(){
		this.jLetters_list = $('#doc_list li .letter');
		this.jClose_popup = $('.big_popup .close');
		this.jMap = this.oItem.find(".map");
		//this.jLetter = this.oItem.find("img.letter");
		this.jLetter = this.oItem.find(".letter");
		this.eCanvas = this.oItem.find('canvas.letter')[0];
		this.eImage = this.oItem.find('img.letter')[0];

		this.canvas_context();
		this.attachEvents();
	},

	attachEvents : function(){
		var oThis = this;

		this.jMap.hover(
			function(){
				oThis.bOut = false;
				if(!oThis.is_animate){
					oThis.open();
				}
			},
			function(){
				oThis.bOut = true;
				if(!oThis.is_animate){
					oThis.close();
				}
			}
		).click(
			function() {
				oThis.jLetters_list.removeClass('not_display');
				$(oThis.jLetter).addClass('not_display');
			}
		);

		this.jClose_popup.click(
			function() {
				$(oThis.jLetter).removeClass('not_display');
			}
		);
	},

	open: function(){
		var oThis = this;
		this.is_animate = true;

		this.jMap.animate({height: '100px'}, this.oClients.ANIM_DURATION, function() {
			oThis.is_animate = false;

			if(oThis.bOut){
				oThis.close();
			}
		});

		this.jLetter.animate({bottom: '250px'}, this.oClients.ANIM_DURATION, function() {
			oThis.is_animate = false;

			if(oThis.bOut){
				oThis.close();
			}
		});
	},

	close: function(){
		var oThis = this;
		this.is_animate = true;

		this.jMap.animate({height: '63px'}, this.oClients.ANIM_DURATION, function() {
			oThis.is_animate = false;
		});
		this.jLetter.animate({bottom: '214px'}, this.oClients.ANIM_DURATION, function() {
			oThis.is_animate = false;
		});
	},

	randomizer: function() {
		var iDeg = Math.floor(Math.random() * this.MAX_CORNER) * Math.PI / 180;
		if(Math.floor(Math.random()*2) === 1) {
			return iDeg;
		}
		else {
			return -iDeg;
		}
	},

	canvas_context: function() {
		if(this.eCanvas.getContext) {
			var canvasContext = this.eCanvas.getContext('2d');
			this.eImage.style.visibility = 'hidden';
		}
		else {
			$(this.eCanvas).remove();
		}

		this.rotate_image(canvasContext);
	},

	rotate_image: function(canvasContext) {
		var	iDeg = this.randomizer();

		if(!this.oClients.isIE) {
			this.eCanvas.setAttribute('width', this.CANVAS_WIDTH);
			this.eCanvas.setAttribute('height', this.CANVAS_HEIGHT);
			canvasContext.rotate(iDeg);
			canvasContext.translate(5, 10);

			var oThis = this;
			$(window).load(
				function(){
					canvasContext.drawImage(oThis.eImage, 0, 0);
				}
			)
		}

		else {
			var M11 = Math.cos(iDeg),
				M12 = -Math.sin(iDeg),
				M21 = Math.sin(iDeg),
				M22 = Math.cos(iDeg);

			this.eImage.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11="' + M11 + '", M12="' + M12 + '", M21="' + M21 + '", M22="' + M22 +  '", SizingMethod = "auto expand")';
		}
	}
}


$(
	function(){
		new Clients();
	}
);