/* USER DEFINED (EDITABLE) */

var userid = "21086892@N04";  // Flickr user id
var api_key = "3c6c32f0ccf6ca5ff97810c43ed48c1c ";

var headerTitle = "Flickr";
//var subHeaderTitle = "Photo Gallery";

var maxPhotos =  12;  // Total number of photos to fetch
var numPerRow = 3;    // Thumbnails in each row
var thumbSpacing = 7; // Pixel spacings between thumbnails

var buddyIcon = "http://farm3.static.flickr.com/2023/buddyicons/21086892@N04.jpg?1195586543#21086892@N04"; // Icon URL
//var authorName = "lhmint";
/* ************************************************************* 	
                    DO NOT EDIT CODE BELOW
************************************************************** */
var thumbSize = 85;   // Width and height, in pixels.


//addScriptFile('assets/JS/JS-dateTimeConversion.js', 'dateTimeConversion-id');

//addScriptFile(scriptSrc, scriptID)

$(document).ready(function() {
			
	var widgetSize = (thumbSize+thumbSpacing)*numPerRow+50;	
	var feedURL = 'http://api.flickr.com/services/feeds/photos_public.gne?id='+userid +'&lang=en-us&format=json&jsoncallback=?';
	
	// http://api.flickr.com/services/feeds/photos_public.gne?id=21086892@N04&format=json

// Pull Data from remote site.					   
	
	var feedData = new Object();
	var itemsArray = new Array();
	var stringHtml="";
	
	
	
	$.getJSON(feedURL,loadData);

	function loadData(data) {
		var cellcount, cellwidth, cellType;
		
		feedData['headerTitle'] = headerTitle;
		feedData['buddyIcon'] = buddyIcon;
		feedData['title'] = data.title;
		feedData['link'] = data.link;
		
		itemsArray = data['items'];/**/
		
		 itemsArray = itemsArray.slice(0,maxPhotos);
		
		stringHtml+= buildHeader(feedData);


		
		$(itemsArray).each(function(index, itemObj){
							
			var feedImage = itemObj['media']['m'];
			itemObj.enlargeImage = (feedImage).replace("_m.jpg", ".jpg");
			itemObj.thumbnail = (feedImage).replace("_m.jpg", "_s.jpg");
			
			itemObj.datenTaken = itemObj.date_taken;
			stringHtml += buildGallery(index, itemObj);
			cellcount++;
						if(index==maxPhotos-1) {
				return;
			}
	 	}); // end each
		
		stringHtml+= buildFooter(feedData);
		
		//put that feed content on the screen!
		
		$('#flickr-box').html(stringHtml);
			//  Layout Adjustments
			// Set Thumbnail width and height			
			//$('.flickr_imageCell').width(thumbSize).height(thumbSize);

			
			 
			 
			var rowWidth = numPerRow*(thumbSize + thumbSpacing) - thumbSpacing;
			var rowHeight = thumbSize;
			
			$('.flickr_row').css({
				'width':rowWidth, 'height': rowHeight, 
				'padding-top':thumbSpacing/2, 'padding-bottom':thumbSpacing/2, //'padding-left': thumbSpacing,
				'margin':'0px auto',
				'background-color':'transparent'}); // row background color
			$('#flickr-box .flickr_imageCell').find('.f_col_mid').parent().attr('style','margin: 0px '+thumbSpacing+'px;'); 
			$('#flickr-box .flickr_imageCell').width(thumbSize).height(thumbSize);
			
			$('.f_image a img').width(thumbSize).height(thumbSize);
			
			
		// Rollover Effect	
		
		$('.flickr_t .f_image a img').css('opacity', .66);
		$('#flickr-box .flickr_imageCell .flickr_t .f_image').attr('style','background-color: #888;');
		
		   $('.flickr_t').hover(
			 function () {
     		 	// $(this).find('.f_image a img').css('opacity', 1);
				$(this).find('.f_image a img').fadeTo('show', 1);
				$(this).stop();
   		     },
			 
			 function () {
     		 	// $(this).find('.f_image a img').css('opacity', .66);
				$(this).find('.f_image a img').fadeTo('show', 0.66);
				$(this).stop();
   		     }
			);
		   
		// Popup Window
		 var config = {    
		 sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 100, // number = milliseconds for onMouseOver polling interval    
		 over: function showPopup()
			{
				$('.flickr_detail').hide();
				
				$(this).children('.flickr_detail').show();
				
				var imageWidth=$(this).find('.flickr_detail .f_image img').width();
				
				$(this).find('.flickr_detail .f_title').width(imageWidth);
				$(this).find('.flickr_detail .f_imageData').width(imageWidth);
				$(this).find('.flickr_detail .f_content').width(imageWidth);/*	*/
				$(this).find('.flickr_detail .close_btn').click(function(){$(this).parent('.flickr_detail').hide();}); // Close popup when user clicks popup
			}
		 , // function = onMouseOver callback (REQUIRED)    
		 timeout: 500, // number = milliseconds delay before onMouseOut    
		 out: function hidePopup()
			{
				$(this).children('.flickr_detail').hide();
				$(this).find('flickr_t').fadeTo("slow", .66);
			
			}// function = onMouseOut callback (REQUIRED)    
		}; // end config
		
		$('.flickr_imageCell').hoverIntent( config );

		// Clean up popup description
		$('.f_content').find('p a').remove();
		//   $('.f_content').find('p:not(:last)').add('p a').remove();
		
		
		$('.flickr_detail .f_content').each(function() {
			var getDescriptionText = $(this).find('p:last');
			if ($(this).find('p:last').html()=="")
			{
				$(this).remove();
				
			} else {
				 $(this).html(getDescriptionText);
				//$(this).html("test...");
			}
			
		//	$(this).text('text...');
			
		});  // end each


	}// end loadData function


		function buildHeader(obj) {
			
			var strHTML=''; 
	
			strHTML += '<!-- begin flickr widget -->';
			strHTML += '<div id="flickrContainer">';
	
			// Build flickr box head
			strHTML +='<!-- begin flickrBox -->';	
			strHTML += '<div id="flickrBox">';
			strHTML += '<h2 id="flickrHead"><a href="'+obj.link+'">'+obj.headerTitle+'</a></h2>';
			
			return strHTML;
			
		} // end buildHeader function

		function buildFooter(obj) {
			var  strHTML='';

			// flicker box footer
			strHTML +='<table id="flickrLink" cellpadding="0" cellspacing="0" border="0" align="center" width="100%">';
			strHTML += '<tr><td width="50%" style="text-align: right;"><a href="'+obj.link+'" target="_blank"><img src="'+obj.buddyIcon+'"  width="16" height="16" /></a></td><td style="text-align: left;"><a href="'+obj.link+'" target="_blank">View More</a></td></tr>';
			strHTML += '</table>';

			strHTML +=  '</div>';
			
			strHTML += '<!-- end flickrBox -->';
			strHTML += '</div>';
			
			
			strHTML += '<!-- end flickr widget -->';	
			
			return strHTML;
		} // end buildFooter function
		
		function buildGallery(i, galleryObj) {
			var strHTML = '';
			//var tbRow, tbRowEnd;
			tbRow='<div class="flickr_row">';
			//tbRowEnd='<div style="clear:both; display:block; height: 1px;overflow: hidden;"></div>';
			cellcount=0;
			cellType='f_col_mid';	
				
			// row cap		
			if ((i % numPerRow) == 0){ // begin new row
			
				strHTML+= '<!-- begin row -->';
				strHTML+=  '<div class="flickr_row">';
				cellType='f_col_first';
			} else if ((i % numPerRow) == (numPerRow-1)) {
				strHTML+= '<!-- last col -->';
				cellType='f_col_last';
			} else { 
			strHTML+= '<!-- mid col -->';
				cellType='f_col_mid';	
			}					
			
		   strHTML += '<!-- begin image cell -->';
		   strHTML +=  '<div class="flickr_imageCell">';
		  // style="width:'+Math.round(100/numPerRow)+'%"
			  strHTML += '<div id="image-'+i+'" class="flickr_t '+cellType+'">';
			   strHTML += '<div class="f_image">';
				 //  strHTML += '<a href="#">';
				   	strHTML += printLink(galleryObj.link, printImage(galleryObj.thumbnail, galleryObj.title));
 
			   strHTML += '</div></div>';
			   
			  strHTML += '<!-- begin flickr_detail -->';
			  strHTML +='<div class="flickr_detail">';
				strHTML += '<div class="close_btn">&nbsp;</div>';
				// strHTML += 'testing...';
				strHTML += '<div class="f_image">'+printImage(galleryObj.enlargeImage, galleryObj.title)+'</div><br clear="all" />' ;
				strHTML += '<div class="f_imageData"><span class="f_credit">'+ printLink(galleryObj.link, galleryObj.author) +'</span><span class="f_date"> | '+formatDate(galleryObj.date_taken, 'T')+'</span></div><br clear="all" />';
				strHTML += '<div class="f_title">' + printLink(galleryObj.link, galleryObj.title) + '</div><br clear="all" />';
				strHTML += '<div class="f_content">'+ galleryObj.description + '</div>'; /* */
			  strHTML += '</div>';
			  strHTML += '<!-- end flickr_detail -->';
		  strHTML += '</div>';
		  strHTML += '<!-- end image cell -->';	

		// row closure 
		if (((i % numPerRow ==numPerRow-1)&&(i>0)) ||(i==(maxPhotos-1)))  { //end row
			strHTML+= '</div>';
			strHTML+= "<!-- end row -->";
		}
			return strHTML;
			
		} // end buildGallery function
		
		function printImage(imageURL, imageTitle) {
			var output = '';
			
			output =  '<img src="'+imageURL +'" alt="'+imageTitle+'" />';
			return  output; 
			
		} // end printImage function
		

		function printLink(linkURL, linkText) {
			var output = '';
			
			output = '<a href="'+ linkURL +'" target="_blank">'+linkText +'</a>'; 
			return  output;
		} // end printLink function


 }); // end jquery


 function getHTMLDecode(t) {
    return t.toString().replace("&lt;",/</g).replace("&gt;",/>/g).replace("&amp;",/&/g).replace("&quot;", /""/g);
}

function addScriptFile(scriptSrc, scriptID) {
	// Create the Script Object
	var script = document.createElement('script');
	script.src = scriptSrc;
	script.type = 'text/javascript';
	script.defer = true;
	script.id = scriptID; // This will help us in referencing the object later for removal
	// Insert the created object to the html head element
	var head = document.getElementsByTagName('head').item(0);
	head.appendChild(script);
}