/*
 Author:  Forrest Frazier
 Version: 1.0
 email: forrest@ffphoto.com
 date: 1/3/12
 
 Notes:
    I still need to add a tag filter so it will only pick up images from your user
    that are tagged with your tag.  This would allow for multiple daily uploads
    and you could tag images after.
    
 How to use:
 
    The instagram API isn't as plug and play as I'd like and can be somewhat confusing for a n00b.
    First you need to register your application with Instagram, this will provide
    you with a unique client_id and client_secret which you will need to continue.
    
    How to register your app:
	Follow these steps : http://www.wikihow.com/Register-for-the-Instagram-Api
	You can only run this on the URL you list in step 3
	For "your plans"  I just put "picture of the day project".
	
	Once you have registered your app you can always find your info at
	http://instagr.am/developer/manage/
	
    Access Token:
	Now you need to create an access token.  The Access Token will allow this app
	to interface with the instagram API.
	
	Replace CLIENTID and CALLBACKURI in the following URL with the info you
	just got when you registered (http://instagr.am/developer/manage/)
	
	https://instagram.com/oauth/authorize/?display=touch&client_id=CLIENTID&redirect_uri=CALLBACKURI/&response_type=token
	
	Paste that in a browser and it should return something like
	http://your-redirect-uri?code=CODE
	 
	CODE is your accessToken.
	Copy that and paste it below in the instagram vars section
    
    User Id:
	You have a unique instagram user id.  We need this to call any of your feeds.
	
	First we need your username (you should know this).
	To find it just log into to instagram, click your profile and up top it will say @yourUserName
	
	Place your username in the url string below replacing "YOURUSERNAME"
	and place your accessToken in the string replacing "ACCESSTOKEN"
	https://api.instagram.com/v1/users/search?q=YOURUSERNAME&access_token=4ACCESSTOKEN
	
	Paste the url (with your username and access token in it) into a browser and it should return a  line of code (json feed).
	In the feed look for "id":"0000000" where 0000000 is your unique id, it should be the last key value pair.
    
	Now you have all the info you need.
    
    Enough already lets get this thing moving:
	Put your username in between the username quotes. (Down in the set up instagram vars section)
	Put your userID in between the userID quotes. (Down in the set up instagram vars section)
	
	This function requires jQuery so if you are not already using it please call it first from your page like this.
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	
	Now upload this file to your site and call it from your page after the jQuery call.
	<script scr="instagram.js"></script>
	
	Then on the page you want to show your feed just add this:
	<ul class="dailypics"></ul>
    
*/

////////////////////////////////////////////////////////////////////////////////
// set up the instgram vars.  this makes it go
////////////////////////////////////////////////////////////////////////////////
var username = "forrestfrazier"; // your username 
var userID = "4455953"; // your user id 
var tag = "dailypic"; // this will be for the hashtag sub query when done
var setSize = "small"; // what size photo are we going to show.  values are small, medium or leave blank for large.
var accessToken = '4455953.934c687.a3dbc094985044479f7d5994697fb05f'; // the token you generated in the Access Token step

////////////////////////////////////////////////////////////////////////////////
// you shouldn't need to edit anything below this line.

// get the day of the year so we can show this many pics
var today = new Date();
var first = new Date(today.getFullYear(), 0, 1);
var theDay = Math.round(((today - first) / 1000 / 60 / 60 / 24) + .5, 0);
    theDay = (theDay - 1);  // kind of hacky but I subtracted one day so we show all pics up to but not including today.
var limit =  theDay; // find the number of days in the current year so we can show that many pics.
var posted; // what day was this posted 

var size;

// format date function
var d;
function formatDate(x) {
    d = new Date(x*1000);
    
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    curr_month++; 
    var curr_year = d.getFullYear();
    posted = curr_month + '/' + curr_date + '/' + curr_year ;
    
    return posted;
}

var instagram = function() {

    var getImagesURL = 'https://api.instagram.com/v1/users/' + userID + '/media/recent/?access_token='+ accessToken +''
	jQuery.ajax({
		type: "GET",
		dataType: "jsonp",
		cache: false,
		url: getImagesURL,
		success: function(data) {
			// iterate over the data returned
			for (var i = 0; i < limit; i++) {
				// handle size issue
				if (setSize == "small"){
					size = data.data[i].images.thumbnail.url;
				} else if (setSize == "medium"){
					size = data.data[i].images.low_resolution.url ;
				} else { 
					size = data.data[i].images.standard_resolution.url;  
				}
				// set date format
				// new Date(data.data[i].caption.created_time*1000)
				if (i) {
				   
				}
				    // this is the output.  It is set as list items. You can change this if you know what you're doing.
				    jQuery(".dailypics").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"' alt='" + data.data[i].caption.text +"'></img><span>" + formatDate(data.data[i].caption.created_time) + "<br />" + data.data[i].caption.text +"</span></a></li>");
				}
		}
	    });
} ();

jQuery(document).ready(function() {
    instagram.initiate();
});