/**
 *
 *
 * ALBUMS is a javascript album written in jQuery.
 * It loads the xml data
 * It will create UI elments and append the content
 *
 * Tested in Safari 3, Firefox 3, MSIE 7
 * @name albums.js
 * @author venkat.bitla
 * @version 0.1
 * @date July 11, 2008
 * @category jQuery plugin
 */


var TARGET_WIDTH =981;

var ALBUMS = function(){

	var _P = {

		init : function( params ) {
			_P.params = params;
			_P.loadXml();

		},

		params : null,
		data : null,

		// Load xml function with ajax with GET request and load the photo graphers data with category
		loadXml : function() {
			$.ajax({
				type : "GET",
				url : _P.params.xmlPath,
				dataType : "xml",
				success : function( data ) {
					 _P.data = data;
					_P.preloadPhotographers();
					_P.tabNavigation();
					_P.pageNavigation();

				}
			});
		},


	//function for loading the Photographers of specific category
	preloadPhotographers : function() {
		//reset position of container from sliding
		$("#photgrapherData").css("marginLeft","0px") ;
		$("#photgrapherData").css("width",TARGET_WIDTH+"px")
		var catType; // Cateogry Type of photographer

		$( "#photgrapherData" ).empty(); // Clear the previously cache data of photographerData DIV in the view

		if(arguments.length >0){

			catType=arguments[0];

		 } else{

			catType="featured";   // Default to "feature" category photographers

		 }

			var catgCollectn=$( "photographer[category="+catType+"]", _P.data );
			var counter = 0;
			var newWidth = 1;

			catgCollectn.each(function( i ) {	//collect the cateogry photographers
				if(counter >= 5 )
				{
					//addPrevNext(catgCollectn.length);
					Slider.totalItems = catgCollectn.length;
					Slider.container = $("#photographerContainer");
					Slider.slidingContainer = $("#photgrapherData");
					Slider.init();

					//dynamic width of container
					if(counter%5==0)
					{
						newWidth++;
						Slider.pages = newWidth;
						$("#photgrapherData").css("width",newWidth * TARGET_WIDTH +"px")
					}
				}else
				{
					//if($("#prevNext").length > 0 ) $("#prevNext").remove();
					Slider.reset();
				//	console.log(Slider.pages)
				}
				var name = $.trim( $( "name", this ).text() );			// Name of the photographer
				var description =  $.trim( $( "description", this ).text() );   // Description of photographer
				var gender =$.trim( $( "gender", this ).text() ); //Gender of the photographer
				var proNoun;
				if(gender=="male"){
					proNoun= "his";
					}
					else if (gender=="female"){
					proNoun= "her";
					}
					else {
					proNoun= "their";
					}

				//insert the html data to photgrapherData Div in the view
				$( "#photgrapherData" ).append([
						"<div class='photogrphrInfo'>",
						"<div class='desc'><span>",
						 name,
						"</span>",
						 description,
			      "<div><a href='#' class='moreinfo'",
			      ">get ",
				  proNoun,
				  " whole story &gt;&gt;</a></div></div>",
			      "<div class='photo'><a href='#' class='moreinfoo'><img class='image' src='",
			      $.trim( $( "image > src", this ).text() ),
			      "'width='124' height='124'",
			      "alt ='",
			       name,
			      "'/> </a> </div>",
				    "</div>"].join( "" ));

					counter++;


				});

			/*On click event function on css class moreinfo to show the individual photographer,
			*  pass the argument index of the photographer.
			*/
			$( ".moreinfo").click(function( e ) {
					var index = $(".moreinfo").index(this);
					//_P.show_photographer_info(catgCollectn.eq(index).find("briefdesc").text());
					_P.show_photographer_info(catgCollectn.eq(index));
			});
			$( ".moreinfoo").click(function( e ) {
					var index = $(".moreinfoo").index(this);
					//_P.show_photographer_info(catgCollectn.eq(index).find("briefdesc").text());
					_P.show_photographer_info(catgCollectn.eq(index));
			});



/* --------------------- As per the change request this code is commented ------------------------------*/

			/* Mouseover event  on photographers image to show the slides of photographer,
			* pass the argument index of the photographer.
			*/
			/*
				$("div.photo img").mouseover(function(e){
					 var index = $("img.image").index(this);
					_P.showslides(catgCollectn.eq(index));
					_P.animateSlideShow();

				});


			//Defualt data on the view if the photographer is not selected
			_P.showslides(catgCollectn.eq(0));
			_P.animateSlideShow(); //animate slides

			*/

/* --------------------- End of Code comment ------------------------------*/

		},



/* --------------------- As per the change request this code is commented ------------------------------*/

	/*
		showslides : function(photographer){

		var $slideshow = $( "slideshow", photographer );
	    $("#slideshow").empty();
			var slide = $slideshow.find('slide');
		      slide.each(function(){
					var $slide = $(this);
					$("#slideshow").append([
									"<img src='",
									 $slide.text(),
									"'>"].join(""));
								});
		},

	*/

/* --------------------- End of Code comment ------------------------------*/

		//Function will show the photographer description


		show_photographer_info : function(photographer, nodeValue){
			$("#pGrapherDesc").empty();
			$("#mainSlide").empty();
			$("#thumbSlidesView").empty();
			$("#pGrapherName").empty();
			$("#pGrapherStudio").empty();
			var photographer_desc=photographer.find("briefdesc").text();
			var photographer_name=photographer.find("name").text();
			var photographer_studio=photographer.find("studio").text();


			_P.show_photographer_album(photographer);	// populates Photographer's album with slide thumbnails
			$().slideviewer(); //call to slide viewer finction which bind the mouseover and onclick functionality
			//alert(photographer);
			$("#mainSlide a").lightBox();
			$("#pGrapherDesc").append([photographer_desc].join(""));
			$("#pGrapherName").append([photographer_name].join(""));

			$("#pGrapherStudio").append([photographer_studio].join(""));

		},

	// Function will create photogrpaher album with Thumbnail View of slides
		show_photographer_album: function(photographer){
			var slidecollect = $("slides",photographer);
			var slides = slidecollect.find('slide');
				slides.each(function(i){
					var $eachslide = $(this);
					var id = $eachslide.attr("id");
					var thumbid = id+"t";
					//alert(thumbid);
					var thumbsrc= $eachslide.text().replace(/album/i,"album/thumbs"); //assign  thumbnail source URL to variable
					//alert(thumbsrc);
					//alert(id);
				$("#thumbSlidesView").append([
									    "<img src='",
										thumbsrc,
										"' class='thumbs'",
										"id='"+thumbid+"' / >"].join(""));
					if(i==0){
					$("#mainSlide").append([
										"<a href='",
										$eachslide.text(),
										"'>",
										"<img src='",
										$eachslide.text(),
										"' class='selected'",
										"id='"+id+"'",
										" / ></a>"].join(""));

					}
					else{
					$("#mainSlide").append([
										"<a href='",
										$eachslide.text(),
										"'>",
										"<img src='",
										$eachslide.text(),
										"'",
										"id='"+id+"'",
										" / ></a>"].join(""));
					}
									 });

		},


//Function for animating the slide show using Jquery cycle commented as per change request
	/*	animateSlideShow : function(){
			   $('#slideshow').cycle({
		           fx:    'scrollLeft',
		           delay: 0,
				   timeout: 4000,
				   speedIn: 'in'
				   //speedOut: 'out'
			});

		},
	*/


	//Function for Tab navigation
		tabNavigation : function() {
				$("#featured").addClass("active_tab");
				// When a link is clicked
				$("a.tab").click(function () {
					// switch all tabs off
					$(".active_tab").removeClass("active_tab");
					var idval=$(this).attr("id");
					_P.preloadPhotographers(idval);
					_P.pageNavigation();
					//alert(idval);

					// switch this tab on
					$(this).addClass("active_tab");
				 });

		},


	//Function for Page navigation
		pageNavigation : function(){
			$(".moreinfo,.moreinfoo").click(function(){
		  $("#homeContent").fadeOut("slow");
		   $("#photoContent").fadeIn("slow");


		});
		$("#backBtn,#extrmLogo").click(function(){
		 //alert("hello");
		  $("#photoContent").fadeOut("slow");
		  $("#homeContent").fadeIn("slow");
		});

		}




	};
	return {
		init : function( params ) { // init function to initialise and load the requried data
			_P.init( params );
		}
	};
}();

/*
* @class ALBUMS
* @param .xml file
* Jquery excutes the $function once DOM is loaded
*/
//addition of a prev/next nav for containers with more than 3 asse
function addPrevNext(num)
{
	Slider.totalItems = num;
	Slider.container = $("#photographerContainer");
	Slider.slidingContainer = $("#photgrapherData");
	Slider.pages = Math.round(num/3);
	Slider.init();
	console.log(num%3)
}
$(function(){
	ALBUMS.init({ xmlPath : "data/albums.xml" });

	//display initially the homecontent
        $("#photoContent").fadeOut("slow");  //Fadeout the photographer DIV container while loading the homepage
        $("#homeContent").fadeIn("slow");    // Fade in the home content DIV
		// Setting for the slide show/image scroller on the home page.
		marqueeInit({
	uniqueid: 'slideshow',
	style: {
		//'padding': '2px',
		'width': '983px',
		'height': '405px'
	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'pause', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true
});


 });