app.js video working

// external library used for image caching by Kevin Hopkins
Ti.include('cachedImageView.js');

var win = Titanium.UI.createWindow({
   backgroundColor:'#333',
   backgroundImage:'/assets/bg.png',
   fullscreen:true,
   })
win.open();

/*
var leftImage = Ti.UI.createView({
	backgroundImage:'../images/icon_arrow_left.png',
	height:30,
	width:30,
	top:18,
	left:5,
	visible:false
});
win.add(leftImage);
var rightImage = Ti.UI.createView({
	backgroundImage:'../images/icon_arrow_right.png',
	height:30,
	width:30,
	top:18,
	right:5
});
win.add(rightImage);
*/

// add title graphic
var titleImage = Ti.UI.createImageView({
	image:'/assets/title.png',
	top:10,
	left:50,
	width:250,
	height:30
})

win.add(titleImage);

// add main navigation background
var navBackground = Ti.UI.createImageView({
	image:'/assets/navbg.png',
	width:320,
	height:34,
	top:55,
	left:0
})

win.add(navBackground);

// adding settings button
var settingsBtn = Ti.UI.createButton({
	backgroundImage:'/assets/settings_btn.png',
	height:60,
	width:60,
	top:0,
	left:0,
	zIndex:100
})

win.add(settingsBtn);

// window that contains settings modal window
var settingSlide = Ti.UI.createWindow({
	backgroundImage:'/assets/bg.png',
	modal:true,
	navBarHidden:true
})

//close button to return to main portfolio screen
var closeSettingsBtn = Ti.UI.createButton({
	width:50,
	height:50,
	title:'close'
})

closeSettingsBtn.addEventListener('click', function(e){
	settingSlide.close();
})

// add the close button to the settings screen
settingSlide.add(closeSettingsBtn);

//make the setting button work
settingsBtn.addEventListener('click', function(e) {
	settingSlide.open();
})






// facebook integration

Titanium.Facebook.appid = "243686829029483";
Titanium.Facebook.permissions = ['publish_stream', 'read_stream'];
//
// Login Status
//
var label = Ti.UI.createLabel({
	text:'Logged In = ' + Titanium.Facebook.loggedIn,
	font:{fontSize:14},
	height:'auto',
	top:10,
	textAlign:'center'
});
settingSlide.add(label);

var forceButton = Ti.UI.createButton({
	title:'Force dialog: '+Titanium.Facebook.forceDialogAuth,
	top:50,
	width:160,
	height:40
});
forceButton.addEventListener('click', function() {
	Titanium.Facebook.forceDialogAuth = !Titanium.Facebook.forceDialogAuth;
	forceButton.title = "Force dialog: "+Titanium.Facebook.forceDialogAuth;
});
settingSlide.add(forceButton);

function updateLoginStatus() {
	label.text = 'Logged In = ' + Titanium.Facebook.loggedIn;
}

// capture
Titanium.Facebook.addEventListener('login', updateLoginStatus);
Titanium.Facebook.addEventListener('logout', updateLoginStatus);

//
// Login Button
//
settingSlide.add(Titanium.Facebook.createLoginButton({
	style:'wide',
	bottom:30
}));







// adding info button
var infoBtn = Ti.UI.createButton({
	backgroundImage:'/assets/info_btn.png',
	height:60,
	width:60,
	bottom:0,
	right:0,
	// keep it on top of the portfolio images
	zIndex:100
})

win.add(infoBtn);

// the window that contains the info modal window
var infoSlide = Ti.UI.createWindow({
	backgroundImage:'/assets/bg.png',
	//top:0,
	//fullscreen:true
	modal:true,
	navBarHidden:true
})

// close button to return to main portfolio screen
var closeInfoBtn = Ti.UI.createButton({
	width:50,
	title:'close',
	height:50
})

// makes the close button work!
closeInfoBtn.addEventListener('click', function(e) {
	infoSlide.close();
})

// adds close button to the info screen
infoSlide.add(closeInfoBtn);

// makes the info button work!
infoBtn.addEventListener('click', function(e) {
	infoSlide.open();
})

/*
var tableWrapper = Ti.UI.createTableView({
	backgroundColor:'transparent',
	separatorColor:'transparent'
})

win.add(tableWrapper);
*/
// keep all image urls in an array
var imageArray = [];

// keep all youtube Id's used in an array
var youtubeIdArray = [];
// keep the youtube embed codes in an array
var htmlTrailer = [];
// keeps track of img counter in the loop so we can reference the proper one later
var startImgCounter = 0;
// keeps track of video count/position in array
var startVidCounter = 0;
// takes 3 parameters: url of the feed, the scrollview increment, and the screen location of the scrollview, followed by type (image or video)
var loadPortfolioSection = function(url, scrollView, padding, type) {
	// set up a blank array for scrollviews. we will need 3 of them
	var scrollViews = [];

	// takes the scrolLView attribute provided by the function call and creates an individual scrollview
	scrollViews[scrollView] = Ti.UI.createScrollView({
		contentWidth:'auto',
		contentHeight:100,
		top:padding,
		height:110,
		width:320,
		backgroundColor:'#000'
	});
	// adds it to the window
	win.add(scrollViews[scrollView]);

	var data = [];
	var xhr = Ti.Network.createHTTPClient();
	// here's where to insert the rss feed's link.
	xhr.open("GET",url)

	xhr.onload = function(e)
	{
		try
		{
			var doc = this.responseXML.documentElement;
	    	if(type == 'image')
	    	{
	    		var items = doc.getElementsByTagName("item");
	    		var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;
	    	}
	    	else
	    	{
	    		var items = doc.getElementsByTagName("entry");
	    		var doctitle = doc.evaluate("//media:title").item(0).nodeValue;
	    	}
	    	var x = 0;

	    	// initial spacing between portfolio pieces. this will be incremented in the for loop
	    	var spacing = 0;

	    	for (var c=0;c<items.length;c++)
	    	{
	    		var item = items.item(c);
		    	// assign the title of blog post from feed
		        var title = item.getElementsByTagName("title").item(0).text;
		        // place the title into a label for each portfolio piece
		        var label = Ti.UI.createLabel({
			        text:title,
			        color:'#fff',
			        font: {fontSize:12},
			        backgroundColor: '#000',
			        top:5,
			        left:5,
			        opacity:0.8,
			        width:100,
			        height:30,
			        left:spacing
	        	});

				// assign the url of the image of the blog post into a variable
				if(type == 'image') {
					startImgCounter++;
	        		var media = doc.getElementsByTagName("media:content").item(c).getAttribute("url");
	        		imageArray.push(media);
	       		} else
	       		{
	       			// this grabs unique youtube url for each video seeing as we can't grab thumbnails properly
	       			var youtubeUrl = doc.getElementsByTagName("media:player").item(c).getAttribute("url");
	       			//Ti.API.info(youtubeUrl);
	       			// this splits the url in order to get the unique ID
	       			var getVideoId = youtubeUrl.split("v=");
	       			// strip the end off to get the final ID #
	       			var finalVideoId = getVideoId[1].substring(0,11);
	       			//Ti.API.info(finalVideoId);
	       			// thumbnail for each video by default url : http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
	       			var media = 'http://img.youtube.com/vi/' + finalVideoId + '/hqdefault.jpg';
	       			youtubeIdArray.push(finalVideoId);
	       		}
	       // Ti.API.info(media);

	        // create an image view for the image
			var portfolioPiece = Ti.UI.createImageView({
		       		image:media,
		       		// keeps track of which portfolio pieces are video
		       		vidCounter:startVidCounter,
		       		defaultImage:'',
		       		width:200,
		       		height:200
		     });

	       	if(type == 'image') {

		       	portfolioPiece.addEventListener('click', function(e){
		       		var popup = Ti.UI.createWindow({
		       			width:320,
		       			height:640,
		       			modal:true,
		       			navBarHidden:true
		       		})

		       		var portfolioItem = Ti.UI.createImageView({
		       			image:e.source.image,
		       			width:320
		       		})

		       		popup.add(portfolioItem);

		       		var popupCloseBtn = Ti.UI.createButton({
		       			width:50,
		       			height:30,
		       			top:80,
		       			right:0,
		       			title:'close'
		       		})

		       		popupCloseBtn.addEventListener('click',function(){
		       			popup.close();
		       		})
		       		popup.open();
		       		popup.add(popupCloseBtn);

		       		// post image to facebook
		       		var facebookPost = Ti.UI.createButton({
		       			//image:e.source.image,
		       			width:150,
		       			height:30,
		       			top:150,
		       			right:0,
		       			title:'post to facebook'
		       		})



		       		function showRequestResult(e) {
					var s = '';
					if (e.success) {
						s = "SUCCESS";
						if (e.result) {
							s += "; " + e.result;
						}
					} else {
						s = "FAIL";
						if (e.error) {
							s += "; " + e.error;
						}
					}


					alert(s);
				}

		       		/*
		       		facebookPost.addEventListener('click', function(e){
		       			Titanium.Facebook.permissions = ['publish_stream'];

		       			if(Titanium.Facebook.loggedIn) {
		       				Ti.Facebook.authorize();
		       				Ti.API.info('yes');

							facebookPost.title = 'Uploading Photo...';
							// (Ti.Filesystem.applicationDataDirectory, imageDirectoryName, filename);
							var filename = media.split('/');
							filename = filename[filename.length - 1];


							var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'cache', filename);
							Ti.API.info(f);
							var blob = f.read();
							var data = {
								caption: title,
								picture: blob
							};
							Titanium.Facebook.request('photos.upload', data, showRequestResult);


		       			} else {

		       			}
		       		})

		       		popup.add(facebookPost);
		       		*/

		       		Titanium.Facebook.permissions = ['publish_stream'];
					Titanium.Facebook.authorize();

		       		facebookPost.addEventListener('click', function(e){

		       			//var fileUrl = imageArray[c];
		       			var fileUrl = e.source.image;
		       			Ti.API.info(fileUrl);
		       			Ti.API.info(media);
		       			var filename = fileUrl.split('/');
		       			Ti.API.info(filename);

						//filename = filename[filename.length - 1];
						//Ti.API.info(filename);
		       			var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'cache', filename);
						var blob = f.read();
						var data = {
					    message: title,
					    picture: blob
					};
					facebookPost.title = 'Uploading Photo...';
					/*
					Ti.Facebook.requestWithGraphPath('me/photos', data, 'POST', function(e){
					    if (e.success) {
					        alert("Success!  From FB: " + e.result);
					    } else {
					        if (e.error) {
					            alert(e.error);
					        } else {
					            alert("Unkown result");
					        }
					    }
					});*/

		       		})

					popup.add(facebookPost);
					// Now post the photo after you've confirmed that authorize() succeeded



		       		//Ti.API.info(e.source.image);
		       	})

		       	// video thumbs
	       } else {

	       			htmlTrailer[startVidCounter] = '<html><body style="padding:0; padding-top:100px; width:320px;"><div style="width:320px;"><iframe width="320" height="200" src="http://www.youtube.com/embed/' + youtubeIdArray[startVidCounter] + '" frameborder="0" allowfullscreen></iframe></div></body></html>';

					startVidCounter++;
	       		   	portfolioPiece.addEventListener('click', function(e){

	       		   		Ti.API.info(youtubeIdArray[startVidCounter]);
		       			var popup = Ti.UI.createWebView({
			       			html:htmlTrailer[e.source.vidCounter],
			       			backgroundColor:"#000",
			       			top:0,
			       			width:320,
			       			height:640,
			       			modal:true,
			       			zIndex:200
		       		})

		       		var closeVideoBtn = Ti.UI.createButton({
		       			width:50,
		       			height:30,
		       			title:'close',
		       			top:0,
		       			right:0
		       		})

		       		popup.add(closeVideoBtn);

		       		closeVideoBtn.addEventListener('click', function(e){
		       			popup.hide();
		       		})

		       		win.add(popup);

	      		 	})
	      	}

	 		// a cropping hack that places the image into a view with a fake border that crops the image
	 		var croppedImage = Ti.UI.createView({
	 			borderRadius:0.1,
	 			height:100,
	 			width:100,
	 			backgroundColor:"#333",
	 			left:spacing
	 		})


	 		// activity indicator for images loading
	 		var actInd = Titanium.UI.createActivityIndicator({
				touchEnabled:false,
				style:Titanium.UI.iPhone.ActivityIndicatorStyle.DARK
			});

		// caches the images on load locally
	 		// cachedImageView('/cache/', media, portfolioPiece);

			// show the activity indicator
	 		actInd.show();
	 		portfolioPiece.add(actInd);

	 		// when the image loads, we hide the indicator

			portfolioPiece.addEventListener('load', function(e)
			{
				actInd.hide();
			});


	 		croppedImage.add(portfolioPiece);
	 		// moves the next portfolio piece over to not overlap
	        spacing += 110;
	        // places the image onto the scroller view
	        scrollViews[scrollView].add(croppedImage);
	        // adds label to each portfolio image
	        scrollViews[scrollView].add(label);

			// hope to use this part as pull to refresh call
			scrollViews[scrollView].addEventListener('scroll', function(e)
			{
				//Ti.API.info('x ' + e.x + ' y ' + e.y);

				if (e.x < -40)
				{

				}
				else
				{

				}

			});

	        //scrollView.add(img);
	      //  data[x++] = row;
	       // row.url = item.getElementsByTagName("link").item(0).text;

	    }

	 // Ti.API.info(imageArray);
	    /*
	    var tableview = Titanium.UI.createTableView({data:data});
	    // win.add(tableview);
	    tableview.addEventListener('click',function(e)
	    {
	      var w = Ti.UI.createWindow({title:doctitle});
	      var wb = Ti.UI.createWebView({url:e.row.url});
	      w.add(wb);
	      var b = Titanium.UI.createButton({
	        title:'Close',
	        style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN
	      });
	      w.setLeftNavButton(b);
	      b.addEventListener('click',function()
	      {
	        w.close();
	      });
	      w.open({modal:true});
	    });*/
	  }
	  catch(E)
	  {
	    alert(E);
	  }
	};
	xhr.send();
}



// call the function to load each rss feed
loadPortfolioSection('http://iblastoff.ca/humbershowcase/category/1st-year/design/feed/', 1, 100, 'image');
loadPortfolioSection('http://iblastoff.ca/humbershowcase/category/1st-year/feed/', 2, 235, 'image');

// video for mobile projects
loadPortfolioSection('http://gdata.youtube.com/feeds/api/playlists/9011A3E344EB3021', 3, 370, 'video');