﻿//ajax loading with animation
function ajaxJquery(id, page, size)
{
	if(size > 1) {$(id).load(page);}
	$(id).animate({
	height: size },1500);
	if(size == 1)
	{
		id = id.substring(1);
		document.getElementById(id).innerHTML = '';
	}
}
//big image
function bigImage()
{
	//create array contain the randomly animation functions
	animate_array = new Array();
	animate_array[0] = 'animate';
	animate_array[1] = 'widthHeight';
	animate_array[2] = 'Opacity';
	
	//get the randomly number
	var num 	= Math.floor(Math.random()*3);

	var output 	= animate_array[num];

	if(output == 'animate')
		return animateAll();
	else if (output == 'widthHeight')
		return widthHeightImage();
	else 
		return imageOpacity();
}
//hid big image
function hideImage()
{
	if(hide == "normal")
	{
		document.getElementById("animate_image").style.position 	= 'absolute';
		document.getElementById("animate_image").style.visibility = 'hidden';
	}
	else if(hide == 'widthHeight')
	{
			$('#animate_image').animate({
			height: '0px',
			width: '0px'
      		}, 1500 );
	}
	else if(hide == 'opacity')
	{
			$('#animate_image').animate({
			opacity: 0},1500);
	}
	else if (hide == 'all') {
		$('#animate_image').animate({
			opacity: 0,
			width: '0px',
			height: '0px'},1500);
	}
	setTimeout('document.getElementById("animate_image").style.visibility  = "hidden"',1500);
	setTimeout('document.getElementById("container").style.visibility = "visible"',1500);
}

//animate width and height
function widthHeightImage()
{
	document.getElementById("animate_image").style.height 	   = '0px';
	document.getElementById("animate_image").style.width 	   = '0px';
	document.getElementById("animate_image").style.opacity 	   = 1;
	document.getElementById("animate_image").style.visibility  = 'visible';
	document.getElementById("container").style.visibility 	   = 'hidden';
	$('#animate_image').animate({
			height: '670px',
			width: '670px'},1500);
	hide = 'widthHeight';
}
//opacity animation 
function imageOpacity()
{
	document.getElementById("animate_image").style.opacity 	   = 0;
	document.getElementById("animate_image").style.visibility  = 'visible';
	document.getElementById("container").style.visibility 	   = 'hidden';
	$('#animate_image').animate({
			opacity: 1},1500);
	//document.getElementById("animate_image").= 'show_image';
	hide = 'opacity';
}
//animate width, height and opacity
function animateAll()
{
	document.getElementById("animate_image").style.opacity 	   = 0;
	document.getElementById("animate_image").style.width 	   = 0;
	document.getElementById("animate_image").style.height 	   = 0;
	document.getElementById("animate_image").style.visibility  = 'visible';
	document.getElementById("container").style.visibility 	   = 'hidden';
	$('#animate_image').animate({
		opacity: 1,
		width: '670px',
		height: '670px'},1500);
	//document.getElementById("animate_image").= 'show_image';
	hide = 'all';
}
/**
 * animate jquery height by giving id and size
 * @param id
 * @param size
 * @return
 */
function jqueryAnimate(id,size)
{
	$(id).animate({
		height: size },1500);
}
