$(document).ready(function(){

	// Reset the screen to (0,0)

	$('#content_holder1').scrollTo( 0 );

	

	if ($.client.os=='Windows') $('body').css('letter-spacing','1px'); //Windows letter-spacing fix

	

	$('#show_skype').hover(function(){

		$("#skype_username").fadeIn(300)}, 

  function () {

    $("#skype_username").fadeOut(300);

  }

);

	

	$('#top_menu ul li.first a').click(function(){

		$("#selector").animate({ left : 0}, "300");

		$('#top_menu ul li a.selected').removeClass('selected');

		$(this).addClass('selected');

		$("#work_selector ul li").removeClass("active"); //Remove any "active" class

		$('#thumbnails_print').fadeOut('600', function() {

    		$('#thumbnails').fadeOut('600', function() {

    			

    				$('#content_holder1').stop(true).scrollTo( '0px' , 600, {axis:'x'} );

  				

  			});

  		});

		

		



	});

	

	$('.second a').click(function(){



		$("#selector").animate({ left : 115}, "300");

		$('#top_menu ul li a.selected').removeClass('selected');

		$('#top_menu ul li.second a').addClass('selected');	

		$('#content_holder1').stop(true).scrollTo( {left:980, top:0} , 600,  { axis:'x', onAfter:function(){

			$("#work_selector ul li").removeClass("active"); //Remove any "active" class

			$('#work_selector ul li#m_web').addClass("active"); //Add "active" class to selected tab

			$('#thumbnails').fadeIn('600'); 

		} });



	});

	

	

	

	

	$('.third a').click(function(){

		$("#selector").animate({ left : 245}, "300");

		$('#top_menu ul li a.selected').removeClass('selected');

		$('#top_menu ul li.third a').addClass('selected');

		$("#work_selector ul li").removeClass("active"); //Remove any "active" class

		$('#thumbnails_print').fadeOut('600', function() {

    		$('#thumbnails').fadeOut('600', function() {

    			

    				$('#content_holder1').stop(true).scrollTo( '1960px' , 600, {axis:'x'} );

					

  				

  			});

  		});

	});



// Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images	

	

	$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=998ab78129a2f7048ecd73236b4fb609&photoset_id=72157622808628563&per_page=100&page=1&format=json&jsoncallback=?", displayImages);

	

	

	function displayImages(data) {																																   

		// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).

		

									

		

		// Start putting together the HTML string

		var htmlString = "<ul class='thumb'>";					



		// Now start cycling through our array of Flickr photo details

		$.each(data.photoset.photo, function(i,item){

							

			// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed					

			//if (iCount > iStart && iCount < (iStart + 10)) {

				

				// 

				var imagelink = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_b_d'+'.jpg';

				var imagelink_s = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_m'+'.jpg';

				var flickrLink = 'http://www.flickr.com/photos/' + data.photoset.owner + '/' + item.id;



				// Here's where we piece together the HTML

				

				

				htmlString += '<li>';

				htmlString += '<div class="ic"><a class="poplight" rel="prettyPhoto" href="' + imagelink + '" title="&lt;p&gt;' + item.title + '&lt;/p&gt; &lt;a href=&quot;' + flickrLink + '&quot; target=&quot;_blank&quot; &gt;Watch it on Flickr.com!  &lt;/a&gt;"><img src="' + imagelink_s + '" alt="'+ item.title +'"/></a></div>';

				htmlString += '</li>';

			//}

		});

	



		

		

	// Pop our HTML in the #images DIV	

	$('#thumbnails').html(htmlString + "</ul>");



	



	

	$("ul.thumb li").hover(function() {

	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 

	var imgwidth=$(this).find('img').width();

	var imgheight=$(this).find('img').height();

	$(this).find('.ic').addClass("hover").stop();

	$(this).find('.ic').stop()/* Add class of "hover", then stop animation queue buildup*/

		.animate({

			marginTop: -imgheight/2, /* The next 4 lines will vertically align this image */ 

			marginLeft: -imgwidth/2,

			top: '50%',

			left: '50%',

			width: imgwidth, /* Set new width */

			height: imgheight, /* Set new height */

			padding: '0px'

		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */



	} , function() {

	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */

	$(this).find('.ic').removeClass("hover").stop();  /* Remove the "hover" class , then stop animation queue buildup*/

    $(this).find('.ic').stop()/* Add class of "hover", then stop animation queue buildup*/

		.animate({

			marginTop: '0', /* Set alignment back to default */

			marginLeft: '0',

			top: '0',

			left: '0',

			width: '100px', /* Set width back to default */

			height: '100px', /* Set height back to default */

			padding: '0px'

		}, 400);

});

	

	

$("a[rel^='prettyPhoto']").prettyPhoto({

			animation_speed: 'normal', /* fast/slow/normal */

			slideshow: false, /* false OR interval time in ms */

			autoplay_slideshow: false, /* true/false */

			opacity: 0.85, /* Value between 0 and 1 */

			show_title: true, /* true/false */

			allow_resize: false, /* Resize the photos bigger than viewport. true/false */

			default_width: 500,

			default_height: 344,

			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */

			theme: 'dark_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */

			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */

			wmode: 'opaque', /* Set the flash wmode attribute */

			autoplay: true, /* Automatically start videos: True/False */

			modal: false, /* If set to true, only the close button will close the window */

			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */

			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */

			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */

			callback: function(){}, /* Called when prettyPhoto is closed */

			markup: '<div class="pp_pic_holder"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">next</a> \
											<a class="pp_previous" href="#">previous</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details clearfix"> \
											<p class="pp_description"></p> \
											<a class="pp_close" href="#">Close</a> \
											<div class="pp_nav"> \
												<a href="#" class="pp_arrow_previous">Previous</a> \
												<p class="currentTextHolder">0/0</p> \
												<a href="#" class="pp_arrow_next">Next</a> \
											</div> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div class="pp_overlay"></div>',
			gallery_markup: '<div class="pp_gallery"> \
								<a href="#" class="pp_arrow_previous">Previous</a> \
								<ul> \
									{gallery} \
								</ul> \
								<a href="#" class="pp_arrow_next">Next</a> \
							</div>',
			image_markup: '<img id="fullResImage" src="" />',
			flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
			quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
			iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
			inline_markup: '<div class="pp_inline clearfix">{content}</div>',
			custom_markup: ''
		});




	// Close down the JSON function call

	}

	

//Get the printed works

	

$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=998ab78129a2f7048ecd73236b4fb609&photoset_id=72157623097315783&per_page=100&page=1&format=json&jsoncallback=?", displayImages2);



function displayImages2(data) {																																   

		// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).

		

									

		

		// Start putting together the HTML string

		var htmlString = "<ul class='thumb'>";					



		// Now start cycling through our array of Flickr photo details

		$.each(data.photoset.photo, function(i,item){

							

			// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed					

			//if (iCount > iStart && iCount < (iStart + 10)) {

				

				// 

				var imagelink = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_b_d'+'.jpg';

				var imagelink_s = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_m'+'.jpg';

				var flickrLink = 'http://www.flickr.com/photos/' + data.photoset.owner + '/' + item.id;



				// Here's where we piece together the HTML

				

				

				htmlString += '<li>';

				htmlString += '<div class="ic"><a class="poplight" rel="prettyPhoto" href="' + imagelink + '" title="&lt;p&gt;' + item.title + '&lt;/p&gt; &lt;a href=&quot;' + flickrLink + '&quot; target=&quot;_blank&quot; &gt;Watch it on Flickr.com!  &lt;/a&gt;"><img src="' + imagelink_s + '" alt="'+ item.title +'"/></a></div>';

				htmlString += '</li>';

			//}

		});

	

		$('#thumbnails_print').html(htmlString + "</ul>");

		

		$("ul.thumb li").hover(function() {

	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 

	var imgwidth=$(this).find('img').width();

	var imgheight=$(this).find('img').height();

	$(this).find('.ic').addClass("hover").stop();

	$(this).find('.ic').stop()/* Add class of "hover", then stop animation queue buildup*/

		.animate({

			marginTop: -imgheight/2, /* The next 4 lines will vertically align this image */ 

			marginLeft: -imgwidth/2,

			top: '50%',

			left: '50%',

			width: imgwidth, /* Set new width */

			height: imgheight, /* Set new height */

			padding: '0px'

		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */



	} , function() {

	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */

	$(this).find('.ic').removeClass("hover").stop();  /* Remove the "hover" class , then stop animation queue buildup*/

    $(this).find('.ic').stop()/* Add class of "hover", then stop animation queue buildup*/

		.animate({

			marginTop: '0', /* Set alignment back to default */

			marginLeft: '0',

			top: '0',

			left: '0',

			width: '100px', /* Set width back to default */

			height: '100px', /* Set height back to default */

			padding: '0px'

		}, 400);

});

	

	

$("a[rel^='prettyPhoto']").prettyPhoto({

			animation_speed: 'normal', /* fast/slow/normal */

			slideshow: false, /* false OR interval time in ms */

			autoplay_slideshow: false, /* true/false */

			opacity: 0.85, /* Value between 0 and 1 */

			show_title: true, /* true/false */

			allow_resize: false, /* Resize the photos bigger than viewport. true/false */

			default_width: 500,

			default_height: 344,

			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */

			theme: 'dark_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */

			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */

			wmode: 'opaque', /* Set the flash wmode attribute */

			autoplay: true, /* Automatically start videos: True/False */

			modal: false, /* If set to true, only the close button will close the window */

			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */

			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */

			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */

			callback: function(){}, /* Called when prettyPhoto is closed */

			markup: '<div class="pp_pic_holder"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">next</a> \
											<a class="pp_previous" href="#">previous</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details clearfix"> \
											<p class="pp_description"></p> \
											<a class="pp_close" href="#">Close</a> \
											<div class="pp_nav"> \
												<a href="#" class="pp_arrow_previous">Previous</a> \
												<p class="currentTextHolder">0/0</p> \
												<a href="#" class="pp_arrow_next">Next</a> \
											</div> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div class="pp_overlay"></div>',
			gallery_markup: '<div class="pp_gallery"> \
								<a href="#" class="pp_arrow_previous">Previous</a> \
								<ul> \
									{gallery} \
								</ul> \
								<a href="#" class="pp_arrow_next">Next</a> \
							</div>',
			image_markup: '<img id="fullResImage" src="" />',
			flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
			quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
			iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
			inline_markup: '<div class="pp_inline clearfix">{content}</div>',
			custom_markup: ''
		});

	// Close down the JSON function call

	}





$('#work_selector ul li#m_web').click(function(){

	$("#work_selector ul li").removeClass("active"); //Remove any "active" class

	$(this).addClass("active"); //Add "active" class to selected tab

	$('#thumbnails_print').fadeOut('slow', function() {

    $('#thumbnails').fadeIn('slow');

  });

});



$('#work_selector ul li#m_print').click(function(){

	$("#work_selector ul li").removeClass("active"); //Remove any "active" class

	$(this).addClass("active"); //Add "active" class to selected tab

	$('#thumbnails').fadeOut('slow', function() {

    $('#thumbnails_print').fadeIn('slow');

  });

});



//Message sender



$('.error').hide();

  $('input.text-input').focus(function(){

   // $(this).css({backgroundColor:"#FFFF00"});

  });

  $('input.text-input').blur(function(){

  //  $(this).css({backgroundColor:"#FFFFFF"});

  });

  





  $(".button").click(function() {

                      

        // validate and process form

        // first hide any error messages

    $('.error').hide();

        

      var name = $("input#name").val();

        if (name == "") {

      $("label#name_error").fadeIn(600);

      $("input#name").focus();

      return false;

    }

        var email = $("input#email").val();

        if (email == "") {

      $("label#email_error").fadeIn(600);

      $("input#email").focus();

      return false;

    }

        var phone = $("textarea#messagemail").val();

        if (phone == "") {

      $("label#phone_error").fadeIn(600);

      $("textarea#messagemail").focus();

      return false;

    }

        

        var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

        //alert (dataString);return false;

        

        $('#contact_form').html("<div id='message'></div>");

        $('#message').html("<h2>Thank you for sending me a message!</h2>")

        .hide()

        .fadeIn(1500, function() {       });        

    

        $.ajax({

      type: "POST",

      url: "bin/process.php",

      data: dataString,

      success: function() {

          $('#message').append("<p>I'm going to reply you soon!</p>");

          }

     });

    return false;

    });

	



	

});