/* 
Carousel jQuery version
*/
// configuration
var includes = '_inc/';
var path = './wp-content/themes/condition/images/';
var opacity = 80;
var height = 100;
var radiusx = 150;
var radiusy = 45;

var centerx = 100;
var centery = 45;
var initSpeed = 0.005;
var maxSpeed = 0.3;
var speed = initSpeed;
var clickit = true;

//Arreglo de fotos
var images = new Array();
images.push("julian.png");
images.push("calvin.png");
images.push("catherin.png");
images.push("javier.png");
images.push("monica.png");

//dialogos
var dialog = new Array();
dialog.push("julian_text.png");
dialog.push("calvin_text.png");
dialog.push("catherin_text.png");
dialog.push("javier_text.png");
dialog.push("monica_text.png");

//parte de abajo de los diálogos
bottomTextImg = "bottom_text.png";

//parametro de tiempo para que cada personaje esté en el centro
var quantum = new Array();
quantum.push(0);
quantum.push(1000);
quantum.push(760);
quantum.push(500);
quantum.push(250);

var rotating = "normal";
var timeWithoutClick = 0;

var counter = 0; 
var tempX = 0;
var elt_posX,elt_posY,b, c, posx, posy;
var elements = new Array();
var clear="_css/clear.gif" 


var imageLitW = "68";
var imageLitH = "210";
var imageBigW = "85";
var imageBigH = "261";
	
// During page on load
$(document).ready( function() { 
  // create each element
	setTimeout('stop()', 1000);
	setInterval('shiftCharacter()', 10000);
	$(images).each( function(index) {
		var photo = images[index];	
		var text = dialog[index];	
		id_div = photo.split(".");
		var id = id_div[0];   
		var div = "<div id = '" + id + "' class = 'image' style = 'position:absolute;display:none;z-index:1;' ></div>";
		$("#containerC").prepend(div);	
		
		var dial = "<div id = 'dialog_" + index + "' style = 'z-index:1000;top:" + (centery - 90) + "px;left:" + (centerx + 20) + 
			"px;position:absolute;display:none;'>" + "<img  src = '" + path + text + "' >";
		if(index == 1){
			dial +=	"<img src = '" + path + bottomTextImg + "' style = 'position:relative;top:0px;left:-50px;'>" + "</div>";
		}else{
			dial +=	"<img src = '" + path + bottomTextImg + "' style = 'position:relative;top:45px;left:-130px;'>" + "</div>";
		}
			
		$("#containerC").prepend(dial);	
		if(clickit!=false) { 
			$("#" + id ).click( function(){ 
				ImgClick(index);
			});
			$("#" + id ).css('cursor', 'pointer');
		}
		var img = "<img id = 'img_" + index + "' src = '" + path + photo + "' class = 'reflect rheight33'"
					+ "width = '" + imageLitW + "' height = '" + imageLitH + "'>";
		$("#" + id ).append(img);
		elements.push(id);
	});	
    
	$("#containerC").mouseover( function(){
		if(rotating == "stop"){
			resume();
		}
	});
	
	$("#containerC").mouseout( function(){
		if(rotating == "normal"){
			rotating = "stop";
		}
	});
	open();

});


function open() { 
	// appear each element
	$(elements).each( function(i) {	
		var element = elements[i];
		$("#" + element).fadeIn('slow');
	});
  
	// start carousel   
	b = setInterval('carousel()',40);  
}


function ImgClick(index) {
	// rotate to center main object
	timeWithoutClick = 0;
	hideAllDialogs();
	setAllNormalSize();
	stop();
	if(parseInt($("#" + elements[index]).css('top')) < (centery - 20) ){
		if(parseInt($("#" + elements[index]).css('left')) < centerx){
			centerImageBackLeft(index);
		}else{
			centerImageBackRight(index);
		}
	}else{
		centerImage(index);
	}
}

// carousel 
function carousel() {
	timeWithoutClick ++;
	
	if( timeWithoutClick == 150){
		stop();
		setAllNormalSize();
		hideAllDialogs();
	}
	if(rotating == "normal"){
		$(elements).each( function(i) {
			var photo = elements[i];
			angle = i*2*Math.PI/elements.length;		
			posx = centerx+Math.sin(counter*(speed)+angle)*radiusx;
			posy = centery+Math.cos(counter*(speed)+angle)*radiusy;
			$("#" + photo).css( 'left', posx+'px');
			$("#" + photo).css( 'top' , posy+'px');
			$("#" + photo).css( 'zIndex' , Math.round(posy));
			
		});	
		counter++;
	}
}

function centerImage(j){
	rotating = "center";
	counter = quantum[j];
	$(elements).each( function(i) {
			var photo = elements[i];
			angle = i*2*Math.PI/elements.length;		
			posx = centerx+Math.sin(counter*(speed)+angle)*radiusx;
			posy = centery+Math.cos(counter*(speed)+angle)*radiusy;			
			$("#" + photo).css( 'zIndex' , Math.round(posy));
			$("#" + photo).animate({
				left: posx+'px',
				top: posy+'px'
			}, 500, function(){
				if(i == 0){
					makeBig(j);
				}
			});		
	});	
	
}

function centerImageBackLeft(j){
	rotating = "center";
	if(j == quantum.length - 1){
		counter = quantum[0];
	}else{
		counter = quantum[j + 1];
	}
	$("#" + elements[j]).css('zIndex', 1 );
	$(elements).each( function(i) {
			var photo = elements[i];
			angle = i*2*Math.PI/elements.length;		
			posx = centerx+Math.sin(counter*(speed)+angle)*radiusx;
			posy = centery+Math.cos(counter*(speed)+angle)*radiusy;			
			$("#" + photo).animate({
				left: posx+'px',
				top: posy+'px'
			}, 400, function(){
				if( i == 0){
					centerImage(j);
				}
			});
	});	
}

function centerImageBackRight(j){
	rotating = "center";
	if(j == 0){
		counter = quantum[quantum.length - 1];
	}else{
		counter = quantum[j - 1];
	}	
	$("#" + elements[j]).css('zIndex', 1 );
	$(elements).each( function(i) {
			var photo = elements[i];
			angle = i*2*Math.PI/elements.length;		
			posx = centerx+Math.sin(counter*(speed)+angle)*radiusx;
			posy = centery+Math.cos(counter*(speed)+angle)*radiusy;			
			$("#" + photo).animate({
				left: posx+'px',
				top: posy+'px'
			}, 300, function(){
				if( i == 0){
					centerImage(j);
				}
			});
	});	
}

function showDialog(j){
	$("#dialog_" + j).fadeIn();
}

function hideDialog(j){
	$("#dialog_" + j).fadeOut();
}

function hideAllDialogs(){
	$(elements).each( function(i) {
		hideDialog(i);
	});	
}

function makeBig(j){
	var id = "#img_" + j;
	$(id).animate({
		height: imageBigH,
		width: imageBigW
	}, 300);
	
	$(id).next().animate({
		width: imageBigW
	}, 300);
	
	showDialog(j);
}

function normalSize(j){	
	var id = "#img_" + j;
	$(id).animate({
		height: imageLitH,
		width: imageLitW
	}, 200);	
	
	$(id).next().animate({
		width: imageLitW
	}, 200);
}

function setAllNormalSize(){
	$(elements).each( function(i) {
		normalSize(i);
	});
}

function stop(){
	rotating = "stop";
}

function resume(){
	rotating = "normal";
	setAllNormalSize();
	hideAllDialogs();
}

var currentChar = 0;

function shiftCharacter(){
	if(rotating == "stop"){
		ImgClick(currentChar);
		currentChar--;
		if(currentChar == -1){
			currentChar = 4;
		}
	}
}