/*********************************
 52 pick-up re-design project
 
 author    : sandra mansour
 date      : november 26 2010
 file name : myscript.js
 
 Copyright 2011 52 Pick-up Inc.
 Do not use without permission
 info@52pick-up.com
 *********************************/

$(window).resize(function() {
  PU.Snowflakes.Resize();
});

/***********************
Class PU()
***********************/
if (typeof (PU) == 'undefined')
    var PU = {};
   

    
/***********************
Class Generic()
***********************/
PU.Generic = {
	/***
	 function ShowSubNav()
	 Animates the sub navigation - slide in and font size increases
	 ***/
	ShowSubNav: function(objID, hideObjID1)
	{
		$("#" + hideObjID1).removeClass('show');
		$("#" + objID).slideDown(100).animate({fontSize:"11px", width:"450px"}, 400);
	},
	
	/***
	 function Redirect()
	 ***/
	Redirect: function(url)
	{
		window.location = url;
	},
	
	/***
	 function ShowNewButtons()
	 The category page displayed a "New" button image for projects that are considered
	 new. If I don't hide this button then it is visible before the content pane slides
	 down and it looks really bad. To fix this I hid all of the "New" images and they are 
	 only displayed on page load.
	 ***/
	ShowNewButtons: function()
	{
		var i = 1;
		while ($("#PU52-NewButton" + i).length)
		{
			$("#PU52-NewButton" + i).show();
			i++;
		}
	}
}



/***********************
Class Events()
***********************/
PU.Events = {
	_imageCount: 0,	//[integer] the total number of images

	Init_CategoriesListPageEvents: function(count)
	{
		for (var i = 1; i < count; i++)
		{
			var url = $("#a_link" + i).attr('href');
			
			//add events. if it's not an iPad add the regular events
			if (!PU.iPad._is_iPad)
			{
				$("#item" + i).mouseover(function() { PU.Events.OnMouseOver_ProjectList(this); });
				$("#item" + i).mouseout(function() { PU.Events.OnMouseOut_ProjectList(this); });
			}
			$("#item" + i).click(function() { PU.Events.Redirect_ProjectList(this); });
		}
	},
	
	/** redirects using the url in the a link **/
	Redirect_ProjectList: function(obj)
	{
		PU.Generic.Redirect($("#a_link_" + obj.id).attr('href'));
	},

	/** OnMouseOver events for projects listed in categories list page **/
	OnMouseOver_ProjectList: function(obj)
	{	
		$("#img_strikeout_" + obj.id).show();
	},

	/** OnMouseOut events for projects listed in categories list page **/
	OnMouseOut_ProjectList: function(obj)
	{
		$("#img_strikeout_" + obj.id).hide();
	},
	
	OnClick_Digital_ToggleGroups: function(id)
	{
		for (var i = 1; i <= PU.Events._imageCount; i++)
		{
			$("#PU52-Group" + i).removeClass('show');
			$("#PU52-Group" + i).hide();
			$("#PU52-WebURL" + i).hide();
			$("#PU52-Link" + i).removeClass();
		}
		$("#PU52-Group" + id).show();
		$("#PU52-WebURL" + id).show();
		$("#PU52-Link" + id).addClass("selected");
	}
}



/***********************
Class PhotoPlayer()
***********************/
PU.PhotoPlayer = {
	/* constant variables */
	LOOP_MAX: 10,		//[integer] the number of times to loop through the set
	IMAGE_COUNT: 12,	//[integer] the number of images in the set
	IMAGE_NAME: "pp",	//[string] the image name
	IMAGE_EXT: ".jpg",	//[string] the image extension
	IMAGE_ID: "img",	//[string] the image object ID
	DELAY: 4000,		//[string] the amount of time to delay before starting the player, in milliseconds
	SPEED: 1000,		//[string] the speed at which to show/fade the images in milliseconds
	
	/* variables */
	_loop_count: 0,		//[integer] number of times the set has looped
	_images: Array(),	//[Image] an array of Images that are in this set
	_player_is_on: 0,	//[boolean] indicates whether the player is on (true) or off (false)
	_curr_image: 1,		//[integer] the current image index in the set
	_timer: '',			//[Timeout] the timeout object
	_preloaded: false,	//[boolean] indicates if the images in the set were preloaded (true) or not (false)
	
	Init: function()
	{
		PU.PhotoPlayer.Preloader();
		
		//append the images to the player div:
		for (i = (PU.PhotoPlayer._images.length - 1); i >= 0 ; i--)
			$("#PU52_Images").append(PU.PhotoPlayer._images[i]);
		
		if (PU.PhotoPlayer._preloaded && !PU.PhotoPlayer._player_is_on)
		{
			PU.PhotoPlayer._player_is_on = 1;
			$("#PU52_Images").delay(PU.PhotoPlayer.SPEED).fadeOut('0', function() { $("#PU52_Loader").hide(); }).fadeIn(PU.PhotoPlayer.SPEED);
			setTimeout("PU.PhotoPlayer.Play()", PU.PhotoPlayer.DELAY + PU.PhotoPlayer.SPEED);
		}
	},

	Preloader: function()
	{
		//first pre-load the images:
		for (i = 1; i <= PU.PhotoPlayer.IMAGE_COUNT; i++)
		{
			temp_image = new Image();
			temp_image.id = PU.PhotoPlayer.IMAGE_ID + i;
			temp_image.src = "img/photo_player/" + PU.PhotoPlayer.IMAGE_NAME + (i < 10 ? "0" + i : i) + PU.PhotoPlayer.IMAGE_EXT;
			PU.PhotoPlayer._images.push(temp_image);
		}
		if (i > PU.PhotoPlayer.IMAGE_COUNT)
			PU.PhotoPlayer._preloaded = true;
	},
	
	Play: function()
	{
		//stop the loop once we have reached the maximum number of loops:		
		if (PU.PhotoPlayer._loop_count == PU.PhotoPlayer.LOOP_MAX)
		{
			clearTimeout(PU.PhotoPlayer._timer);
			PU.PhotoPlayer._player_is_on = 0;
		}
		else if (PU.PhotoPlayer._curr_image == PU.PhotoPlayer.IMAGE_COUNT)
		{
			PU.PhotoPlayer._loop_count++;
			$("#" + PU.PhotoPlayer.IMAGE_ID + "1").fadeIn(PU.PhotoPlayer.SPEED, function() { PU.PhotoPlayer.Reset(); } );
			PU.PhotoPlayer._curr_image = 1;
		}
		else
		{
			$("#" + PU.PhotoPlayer.IMAGE_ID + PU.PhotoPlayer._curr_image).fadeOut(PU.PhotoPlayer.SPEED);
			PU.PhotoPlayer._curr_image++;
		}
		
		if (PU.PhotoPlayer._player_is_on)
			PU.PhotoPlayer._timer = setTimeout("PU.PhotoPlayer.Play()", PU.PhotoPlayer.DELAY);
	},
	
	/***
	 function Reset()
	 reverts all images to their original state
	 ***/
	Reset: function()
	{
		for (i = 1; i <= PU.PhotoPlayer.IMAGE_COUNT; i++)
			$("#" + PU.PhotoPlayer.IMAGE_ID + i).show();
	}
}


/***********************
Class CategoryView()
***********************/
PU.CategoryView = {
	_currImageIndex: 1,	//[integer] the index of the current image

	/***
	 function sweepImages()
	 handles next and previous functionality for the CategoryView page
	 ***/
	sweepImages: function(direction, id)
	{
		//the next image index
		PU.CategoryView._currImageIndex = (direction == 0 ? id : PU.CategoryView._currImageIndex + direction);
		
		//show/hide the next and previous buttons
		if (PU.CategoryView._currImageIndex == 1)
			$("a.prev").hide();
		else if (PU.CategoryView._currImageIndex == PU.Events._imageCount)
			$("a.next").hide();
		else
		{
			$("a.prev").removeClass('hide');
			$("a.next").removeClass('hide');
			$("a.prev").show();
			$("a.next").show();
		}

		//display the correct image:
		PU.Events.OnClick_Digital_ToggleGroups(PU.CategoryView._currImageIndex);
	}
}



/***********************
Class iPad()
***********************/
PU.iPad = {
	IPAD_HEIGHT: 1024,	//[integer] height of the iPad
	IPAD_WIDTH: 768,	//[integer] width of the iPad
	
	_is_iPad: false,	//[boolean] is this device an iPad?
	
	/***
	 Determines if the device is an iPad. If so then setup the page to be iPad Optimized.
	 ***/
	init: function(user_agent)
	{
		PU.iPad._is_iPad = (user_agent.indexOf('ipad') != -1);
		if (PU.iPad._is_iPad)
			PU.iPad.updateOrientation();
	},
	
	updateOrientation: function()
	{
		var mainClass = $(window).width() == PU.iPad.IPAD_HEIGHT ? "iPad-Landscape" : "iPad-Portrait";
		$("#Main").removeClass(); //remove all previous classes
		$("#Main").addClass(mainClass);
	}
}


/***********************
Class Snowflakes()
***********************/
PU.Snowflakes = {
	/* constant variables */
	DIV_ID: "Snowflakes-jQuery",			//[string] the ID of the drawing DIV
	CANVAS_ID: "Snowflakes-HTML5",			//[string] the ID of the HTML5 Canvas
	IMAGE_FILE_NAME: "snowflake_",			//[string] the snowflake image file names
	IMAGE_EXTENSION: ".png",				//[string] the image file extension
	IMAGE_HEIGHT: 35,						//[integer] the snowflake image height in pixels
	COUNT: 5,								//[integer] the number of snowflake images
	MAX_ROWS: 4,							//[integer] the maximum number of rows of snow
	CANVAS_OFFSET: 10,						//[integer] the offset for the height and width of the canvas in pixels
	DELAY: Array(200, 400, 600, 800),		//[array|integer] an array of integers representing the speed at which to drop a new snowflake in milliseconds
	SPEED: 10000,							//[integer] the speed of the snowflake drop in milliseconds
	FPS: 30,								//[integer] frames per second (HTML5)
	HTML5_DROP_AMOUNT: 5,					//[integer] the pixel amount to drop each snowflake by

	/* variable declarations */
	_container_id: "",						//[string] the container div ID
	_is_HTML5: false,						//[boolean] indicates if the browser supports HTML5
	_HTML5_canvas: null,					//[Canvas] the HTML5 Canvas
	_HTML5_context: null,					//[Context] the HTML5 Canvas' 2D Context object
	_canvas_width: 0,						//[integer] the width of the drawing canvas or div in pixels
	_images: Array(),						//[array|Image] an array of the preloaded snowflake images
	_snowflakes: Array(),					//[array|Snowflake] an array of objects of type Snowflake
	_count: 0,								//[integer] the total number of snowflakes drawn
	_rows: 1,								//[integer] the total number of rows of snow
	_count_per_row: 250,					//[integer] the number of snowflakes allowed per row
	_interval: null,						//[Interval] the interval created on Start()
	_snowflake_transform_interval: null,	//[Interval] the interval for the snowflake transformation
	_snowflake_rotate_interval: null,		//[iNTERVAL] the interval for the snowflake spins
	_player_is_on: false,					//[boolean] indicates if this player is on
	_player_is_ready: false,				//[boolean] indicates if the player is ready to start playing
	

	/***
	 function Init()
	 initializes and preloads the images
	 ***/
	Init: function(containerID)
	{
		PU.Snowflakes._container_id = containerID;

		//check if the browser supports HTML5:
		PU.Snowflakes._is_HTML5 = false;// "HTMLCanvasElement" in window;
			
		if (PU.Snowflakes._is_HTML5) /** HTML5 **/
		{
			PU.Snowflakes._HTML5_canvas = document.createElement("canvas");
			PU.Snowflakes._HTML5_canvas.id = PU.Snowflakes.CANVAS_ID;
			$("#" + PU.Snowflakes._container_id).append(PU.Snowflakes._HTML5_canvas);
			
			PU.Snowflakes._HTML5_context = PU.Snowflakes._HTML5_canvas.getContext("2d");
		}
		else /** jQUERY **/
		{
			var div = document.createElement("div");
			div.id = PU.Snowflakes.DIV_ID;
			$("#" + PU.Snowflakes._container_id).append(div);
		}
		
		PU.Snowflakes.Preloader();
		PU.Snowflakes.SetCanvas();
		
		PU.Snowflakes._player_is_ready = true;
	},
	
	/***
	 function Resize()
	 this function is called when the browser is resized and sets the new canvas width and height
	 ***/
	Resize: function()
	{
		PU.Snowflakes.SetCanvas();
		
		$("#" + PU.Snowflakes.DIV_ID + " img").animate( { top: PU.Snowflakes._canvas_height - PU.Snowflakes.IMAGE_HEIGHT }, 0 );
	},
	
	/***
	 function SetCanvas()
	 resets the canvas width and height based on the window width and height
	 ***/
	SetCanvas: function()
	{
		//determine the height and width of the display area
		PU.Snowflakes._canvas_width = $(window).width() - PU.Snowflakes.CANVAS_OFFSET;
		PU.Snowflakes._canvas_height = $(window).height() - PU.Snowflakes.CANVAS_OFFSET;

		$("#" + PU.Snowflakes._container_id).width(PU.Snowflakes._canvas_width);
		$("#" + PU.Snowflakes._container_id).height(PU.Snowflakes._canvas_height);

		// set the canvas width and height using it's properties:
		if (PU.Snowflakes._is_HTML5) /** HTML5 **/
		{
			PU.Snowflakes._HTML5_canvas.width = PU.Snowflakes._canvas_width;
			PU.Snowflakes._HTML5_canvas.height = PU.Snowflakes._canvas_height;
		}
	},

	/***
	 function Start()
	 Autoplays the snowflakes
	 ***/
	Start: function()
	{
		if (PU.Snowflakes._player_is_ready)
		{
			PU.Snowflakes._player_is_on = true;
			
			var delay = PU.Snowflakes.DELAY[PU.Snowflakes.RandomNum(-1, 3)];
			
			//HTML5 Draw() needs a separate Interval
			if (PU.Snowflakes._is_HTML5) /** HTML5 **/
			{
				PU.Snowflakes._interval = setInterval("PU.Snowflakes.NewSnowflake();", delay * 1.5);
				delay /= PU.Snowflakes.FPS;
				PU.Snowflakes._snowflake_transform_interval = setInterval("PU.Snowflakes.HTML5_Draw('drop');", delay);
				PU.Snowflakes._snowflake_rotate_interval = setInterval("PU.Snowflakes.HTML5_Draw('rotate');", delay);
			}
			else
				PU.Snowflakes._interval = setInterval("PU.Snowflakes.NewSnowflake();", delay);
		}
	},
	
	/***
	 function NewSnowflake()
	 Creates a new snowflake
	 ***/
	NewSnowflake: function()
	{	
		if (PU.Snowflakes._rows > PU.Snowflakes.MAX_ROWS)
		{
			clearInterval(PU.Snowflakes._interval);
			PU.Snowflakes._interval = null;
			PU.Snowflakes._player_is_on = false;
		}
		else
		{
			// get a random snowflake and create a new one:
			var snowflake_index = PU.Snowflakes.RandomNum(-1, PU.Snowflakes.COUNT); //get a random snowflake
			var snowflake = new Snowflake(); //create a new snowflake
			snowflake.Init(PU.Snowflakes._count, PU.Snowflakes._images[snowflake_index]);
			PU.Snowflakes._snowflakes.push(snowflake);
		
			if (PU.Snowflakes._count > 0 && PU.Snowflakes._count % PU.Snowflakes._count_per_row == 0)
			{
				PU.Snowflakes._rows += .5;
				PU.Snowflakes._count_per_row = PU.Snowflakes._count_per_row < 50 ? 50 : PU.Snowflakes._count_per_row - 50;
				$("#test").html($("#test").html() + "<br>Row Count=" + PU.Snowflakes._rows + "<BR>Count per row=" + PU.Snowflakes._count_per_row);
			}
			
			if (!PU.Snowflakes._is_HTML5) /** jQUERY **/
				PU.Snowflakes.jQuery_Drop(PU.Snowflakes._count);

			PU.Snowflakes._count++;
		}
	},
	
	/***
	 function Drop()
	 drops the snowflake for browsers that do NOT support HTML5 using jQuery
	 ***/
	jQuery_Drop: function(ind)
	{		
		var offset_y = PU.Snowflakes.RandomNum(10, 20);
		var myTop = PU.Snowflakes._canvas_height - ($(PU.Snowflakes._snowflakes[ind]._image).height() * PU.Snowflakes._rows) - offset_y;
		
		$(PU.Snowflakes._snowflakes[ind]._image).animate( { top: myTop }, PU.Snowflakes.SPEED );
	},
	
	/***
	 function Drop()
	 drops the snowflake for browsers that DO support HTML5
	 Parameters:
	 	@transformation: either "drop" or "rotate"
	 ***/
	HTML5_Draw: function(transformation)
	{
		//first clear the canvas:
		PU.Snowflakes._HTML5_canvas.width = PU.Snowflakes._HTML5_canvas.width;
		
		var complete = true; //if all snowflakes have been drawn we need to clear the intervals
		
		//draw all the snowflakes:
		for (var i = 0; i < PU.Snowflakes._count; i++)
		{
			PU.Snowflakes._HTML5_context.save();
			
			var curr = PU.Snowflakes._snowflakes[i]; // get the current snowflake
			
			// I want every snowflake to drop in a random position:
			var offset_y = PU.Snowflakes.RandomNum(10, 20);
			var myTop = PU.Snowflakes._canvas_height - (curr._height * PU.Snowflakes._rows) - offset_y;

			// add the shadow to each snowflake:
			PU.Snowflakes._HTML5_context.shadowOffsetX = 4;
			PU.Snowflakes._HTML5_context.shadowOffsetY = 4;
			PU.Snowflakes._HTML5_context.shadowBlur = 0;
			PU.Snowflakes._HTML5_context.shadowColor = "rgba(238,233,233,0.5)";
			
			// only continue if the snowflake has not reached the end
			if ((curr._y + PU.Snowflakes.HTML5_DROP_AMOUNT) < myTop)
			{
				complete = false;
				
				switch (transformation)
				{
					case "drop":
						curr._y += PU.Snowflakes.HTML5_DROP_AMOUNT;
						break;
					case "rotate":
						var angle_radians = curr._rotate_degrees * (Math.PI / 180); /* radians = degrees * (Math.PI / 180) */
						var trans_x = curr._x + (curr._width * 0.5);
						var trans_y = curr._y + (curr._height * 0.5);
						curr._rotate_degrees += 10;
		
						PU.Snowflakes._HTML5_context.translate(trans_x, trans_y);
						PU.Snowflakes._HTML5_context.rotate(angle_radians);
						PU.Snowflakes._HTML5_context.translate(-trans_x, -trans_y);
						break;
				}
			}
			
			//draw the transformed image:	
			PU.Snowflakes._HTML5_context.drawImage(curr._image, curr._x, curr._y, curr._width, curr._height);
			
			PU.Snowflakes._HTML5_context.restore();
		}
		
		if (PU.Snowflakes._interval == null && complete)
		{
			clearInterval(PU.Snowflakes._snowflake_transform_interval);
			clearInterval(PU.Snowflakes._snowflake_rotate_interval);
			PU.Snowflakes._snowflake_transform_interval = null;
			PU.Snowflakes._snowflake_rotate_interval = null;
		}
	},
	
	/***
	 function RandomNum()
	 Random number generator
	 ***/
	RandomNum: function(start_num, end_num)
	{
		var randnum;
		if (start_num == -1)
			randnum = Math.floor(Math.random() * end_num);
		else
		{
			randnum = Math.random() * (end_num - start_num);
			randnum = Math.round(start_num + randnum);
		}
		return randnum;
	},

	/***
	 function Preloader()
	 preloads the snowflake images
	 ***/
	Preloader: function()
	{
		//first pre-load the images:
		for (i = 1; i <= PU.Snowflakes.COUNT; i++)
		{
			var temp_image = new Image();
			temp_image.src = "img/snowflakes/" + PU.Snowflakes.IMAGE_FILE_NAME + i + PU.Snowflakes.IMAGE_EXTENSION;
			PU.Snowflakes._images.push(temp_image);
		}
	}
}

/***
 Class Snowflake()
 The snowflake object
 ***/
function Snowflake() {
	this._id = -1;		//[integer] the ID of this snowflake
	this._image = null;	//[Image] the image associated with this Snowflake
	this._x = 0;		//[integer] the origin x-coordinate
	this._y = 0;		//[integer] the origin y-coordinate
	this._width = 0;	//[integer] the image width
	this._height = 0;	//[integer] the image height
	this._x_offset = 1;		//[integer] the horizontal offset
	this._rotate_degrees = 0; //[integer] the rotation in degrees
}

/***
 function Init()
 initializes a new snowflake based on the properties of the passed snowflake object
 ***/
Snowflake.prototype.Init = function(id, snowflake)
{
	this._id = id;
	this._image = new Image();
	this._image.src = snowflake.src;
	this._height = PU.Snowflakes.RandomNum(10, PU.Snowflakes.IMAGE_HEIGHT);
	this._width = this._height;

	//get x- and y-coordinates:
	this._x = PU.Snowflakes.RandomNum(-1, PU.Snowflakes._canvas_width) - this._image.width;
	this._y = -1 * PU.Snowflakes.IMAGE_HEIGHT;
		
	if (!PU.Snowflakes._is_HTML5) /** jQuery **/
	{
		this._image.width = this._width;
		this._image.height = this._height;
		
		$(this._image).css('left', this._x + 'px');
		$(this._image).css('top', this._y + 'px');
		
		//add it to the div:
		$("#" + PU.Snowflakes.DIV_ID).append(this._image);
	}
				
	return this;
};
/***
 end of object Snowflake
 ***/