// JavaScript Document

$(document).ready(function(){

    //IMAGE OVERLAY HOVER

    $('.image').hover(function(){
        $(this).children().animate({top: '220px'}, 140);
    }, function(){
        $(this).children().animate({top: '200px'}, 160);
    });


    $('.image').hover(function(){
        $('.image').not(this).fadeTo(200, 0.8);
    }, function(){
        $('.image').not(this).fadeTo(160, 1);
    });

    //SEARCH BAR AND SOCIAL MEDIA HIDE/SHOW

    $('#searchbar').hide();

    $('.fade').click(function() {
        $('#searchbar').fadeToggle('slow', 'linear');
        $('#socialmedia').hide('fast', 'fast');
    });


    //OVERLAY FOR SOCIALMEDIA

    $('.sm').hover(function(){
        $(this).fadeTo(140, 0.6);
    }, function(){
        $(this).fadeTo(220, 1);
    });

    //EXPANDABLE BLOGPOSTS


    // simple example, using all default options
    $('div.expandable p.main').expander();

    // *** OR ***

    // override some default options
    $('div.expandable p.main').expander({
        slicePoint:       300,  // default is 100
        expandText:         'Read More ▼', // default is 'read more...'
        collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
        userCollapseText: '[+]'  // default is '[collapse expanded text]'
    });
	
	
	//TIMELINE
	$('.hidden').hide();
	
	$('.visible').hover(function() {
		$(this).children('.hidden').fadeIn(200);
	}, function(){
		$(this).children('.hidden').fadeOut(100);
	});
	
	
	//TIMELINE NAVIGATION
		
	var overall_width = 0;

	$('#archive_items > div').each(function(index, elem) {
		var $elem = $(elem);
		overall_width += $elem.outerWidth() + parseInt($elem.css('margin-left'), 10) + parseInt($elem.css('margin-right'), 10);
	});
		
	$('#archive_items').css({'right' : '0px', 'width': overall_width});
	
	$('.nav').click(function() {
      $(this).attr('rel');
        return false;
    });
	
	$('.older').click(function() {
		$('#archive_items').animate({'right': '-=90px'}, 150, function(){
			setupTimelineNav();			
		});
		$('#timeline #line').animate({'left': '+=90px'}, 150, function(){
			$('#timeline #line').css('left','-100px');
		});
				
	});	
	
	$('.newer').click(function() {
		$('#archive_items').animate({'right': '+=90px'}, 150, function(){
			setupTimelineNav();			
		});
		$('#timeline #line').animate({'left': '-=90px'}, 150, function(){
			$('#timeline #line').css('left','-100px');
		});
	});
	
	if($('#timeline')){
		setupTimelineNav();
	}

	function setupTimelineNav() {
		var maxWidth = parseInt($('#archive_items').css('width'));
		var distance = parseInt($('#archive_items').css('right'));
		if((maxWidth + distance) == maxWidth ){
			$('.next').fadeOut();
		} else if((maxWidth + distance) < 1 ){
			$('.prev').fadeOut();
		} else {
			$('.prev').fadeIn();
			$('.next').fadeIn();	
		}
	}
	
	var gallery; // so I can reference the gallery from anywhere
    gallery = $('#gallery').tn3({
        skinDir:"/wp-content/themes/CVP-theme/skins",
        external:[{
            origin:"xml",
            url:"/wp-content/themes/CVP-theme/gallery.php"
        }],
		init: function(e){
			var productGoogle = '<div class="product"><div class="product-title"></div><p>Purchase this photo:<br /><span class="product-price">$800</span> 8x12 unframed print <span class="product-attr-details">8x12 unframed print</span></p><input class="buy_btn googlecart-add-button" type="button" value="ADD TO CART" /></div>';
			var form = '<form class="google_checkout" name="checkout" action="/photography/cart/index.php" method="POST">'+productGoogle+'</form>';
			//var addThis = '<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2e2eaa60eaeccf"></script>';
			var addThis ='';
			$('.tn3-image').wrap('<div class="tn3-image-wrapper" style="width:84%;" />');
			$('<div class="tn3-sidebar" style="width: 16%; min-width: 273px; height:100%; position:absolute; top:0; right:0;"><div id="googlecart-widget"></div><div class="holder">'+form+addThis+'</div></div>').insertAfter('.tn3-image-wrapper');
			$('.buy_btn').click(function(e) {
				$('.googlecart-add-button').trigger('click');
			});
		}
		,image:{
			load_end: function(e) {
				var index = e.n;
				// console.log(gallery.data[0].imgs);
				// update google product price on click
				$('input[type=radio]').click(function(e) {
					var updatedPrice = $(e.target).attr("value");
					var updateDetails = $(e.target).next('.radio_label').text();
					$('.product-price').html(updatedPrice);
					$('.product-attr-details').html(updateDetails);
				});
				var title = gallery.data[0].imgs[index].title;
				var imageUrl = gallery.data[0].imgs[index].img;
				var details = $('input[type=radio]:checked').next('.radio_label').text();
				var price = $('input[type=radio]:checked').attr("value");
				$('.tn3-sidebar .title').remove();
				$('<div class="title">'+title+'</div>').hide().appendTo('.tn3-sidebar').fadeIn(300);
				$('<div id="googlecart-widget"></div>').after('.tn3-sidebar .title');
				// set google product properties in hidden div
				$('.product-title').html(title);
				$('.product-image').attr("src", imageUrl);
				$('.product-price').html(price);
				$('.product-attr-details').html(details);
				// console.log("----------------------------");
				// console.log("title: " + $('.product-title').text());
				// console.log("details: " + $('.product-attr-details').html());
				// console.log("imageUrl: " + imageUrl);
				// console.log("price: " + $('.product-price').html());
			}
		}
    }).data('tn3');
	$('#gallery').hide();
	$('.launch_gallery').click(function() {
			$('#gallery').show();
			$('.tn3-fullscreen').click();
	});
});
//var count = $("#timeline li").length;
//var spacing = 100 / count;
//$("#timeline li").css("width", spacing+"%");