// JavaScript Document

$(document).ready(
	
	function() {
		
        //-----
		// header selected box positioning
		//-----
        
        if( $("#title a.selected").position() ) {
            var xpos = $("#title a.selected").position().left;
            var item_width = $("#title a.selected").width();
            $('.header-menu-selected-box').css("left", xpos)
            $('.header-menu-selected-box div').css("width",item_width-4);
            $('.header-menu-selected-box').fadeIn();
        }
			
		var showDuration = 300;
		var hideDuration = 500;
		
		var quickShow = 150;
		var quickHide = 250;
		
		//-----
		// button box hover effects
		//-----

		$("#like_button").hoverIntent( 
			
			function() {
				
				$(this).animate( { "background-color": "darkgreen" }, { queue:false, duration:showDuration } );
				
				$("#likes_info").show( "slide", { duration: quickShow } );
			},
			function() {
				$(this).animate( { "background-color": "#444444" }, { queue:false, duration:hideDuration } );
				
				$("#likes_info").hide( "slide", { duration: quickHide } );
			}
		);
		
		$("#dislike_button").hoverIntent( 
			
			function() {
				$(this).animate( { "background-color": "darkred" }, { queue:false, duration:showDuration } );
				
				$("#dislikes_info").show( "slide", quickShow );
			},
			function() {
				$(this).animate( { "background-color": "#444444" }, { queue:false, duration:hideDuration } );
				
				$("#dislikes_info").hide( "slide", quickHide );
			}
		);
		
		$("#resize_button").hoverIntent( 
			
			function() {
				$(this).animate( { "background-color": "darkgrey" }, { queue:false, duration:showDuration } );
				
				$("#resize_info").show( "slide", { duration: quickShow, direction: "right" } );
			},
			function() {
				$(this).animate( { "background-color": "#444444" }, { queue:false, duration:hideDuration } );
				
				$("#resize_info").hide( "slide", { duration: quickHide, direction: "right" } );
			}
		);
		
		$("#download_button").hoverIntent( 
			
			function() {
				$(this).animate( { "background-color": "darkgrey" }, { queue:false, duration:showDuration } );
				
				$("#download_info").show( "slide", { duration: quickShow, direction: "right" } );
			},
			function() {
				$(this).animate( { "background-color": "#444444" }, { queue:false, duration:hideDuration } );
				
				$("#download_info").hide( "slide", { duration: quickHide, direction: "right" } );
			}
		);
		
		
		//-----
		// lazy loading of images
		//-----
		var agent=navigator.userAgent.toLowerCase();
		var is_iphone = (agent.indexOf('iphone')!=-1);
		if (!is_iphone) { $("img.lazyload").lazyload(); }
		
		
		
		
		//-----
		// load and show modal view of selected pattern
		//-----
		
		$('#resize_button').click(
								  
			function() {
				//var currentPattern = $(this).parents( '.swatch-box').find( '.pattern-swatch' );
				//var patternURL	   = currentPattern.attr( 'src' );
				//var patternName	   = currentPattern.attr( 'pattern' );
				
				// pattern base URL		
				var patternBaseURL = "/patterns/";
				// pattern name
				var patternName = getCurrentPatternName();
			
								
				$('#modal_pattern_swatch').css( 'background', 'url(' + patternBaseURL + patternName + ')' );
				//$('#modal_pattern_swatch').attr( 'pattern', patternName );
				
				// show modal view
				$('#modal_pattern_box').fadeIn( showDuration );
				// hide overflow (and thus scrollbar)
				$('body').css('overflow','hidden');
			}
		);
		
		
		//-----
		// modal view click
		//----
		
		$('#modal_pattern_box').click(
									  
			function() {
							
				$(this).fadeOut( hideDuration );
				$('body').css('overflow','visible');
			}
			
		);
		
		
		//-----
		// show / hide button box
		//-----
		
		$(".swatch-box").hover(
				
			function() {
				
				// put the button box in the hovered swatch box
				$(this).prepend( $('#button_box_wrapper') );
				
				// set the data of the pattern on the info labels
				var likes 		= $("#button_box_wrapper").parent().find(".pattern-swatch").attr("likes");
				var dislikes 	= $("#button_box_wrapper").parent().find(".pattern-swatch").attr("dislikes");
				
				$("#likes_info").html( likes + " likes" );
				$("#dislikes_info").html( dislikes + " dislikes" );	
				
				// show the button box
				$( '#button_box_wrapper' ).css( "display", "block" );
				$( '#button_box_wrapper' ).fadeIn( showDuration, '1.0' );
			},
			function() {
				$(this).children( '#button_box_wrapper' ).clearQueue().fadeOut( hideDuration, function() { 
																								$('body').prepend( $('#button_box_wrapper') );
																								$('#button_box_wrapper').css( 'display', 'none' );
																							 } );
			}
		);
		
		
		//-----
		// user voting
		//-----
		
		// like button click
		$('#like_button').click(					
			function() {
				doUpdate({ addLike: '1'});
			}
		);
		
		// dislike button click
		$('#dislike_button').click(
			function() {
				doUpdate({ addDislike: '1'});
			}
		);
		
		
		$('#download_button').click(							
			function() {
				window.location.href = '/patterns/' + getCurrentPatternName( ) + '?d=1';
			}
		);
		
		
	}
);




/**
 * Updates a property of a pattern in the database
 */
function doUpdate( o ){
	
	// check if there is a currently selected pattern (swatch hover or modal mode)
	var currentPatternExists = getCurrentPatternName().length > 0;
		
	if( currentPatternExists ) {
		
		o.p = getCurrentPatternName();
		
			
		$.getJSON(
			'/do/update/',
			o/*,
			function(json) { updateData(json);  setInfoBox( json ); } */
		);
	}
}	


function getCurrentPatternName( ){
	
	var patternName;
	
	if( $('#modal_pattern_box').css( 'display' ) == "block" ) {
		
		patternName = $('#modal_pattern_swatch').attr('pattern');
	}
		
	var currentPattern = $('#button_box').parents( '.swatch-box').find( '.pattern-swatch' );
	if( currentPattern.length > 0 )
		var patternName	   = currentPattern.attr( 'pattern' );
		
	return patternName;
}