// Put in this file only interface related functions !

var imagesLoaded = false;
var imagesCheckInterval = setInterval(checkImagesLoaded,3000);

$(function(){
	// Set extra effects on the page
	
	// 1) On Hover and on Focus effects
	$("#searchfield, #findbutton").hover(
		function(){
			$("#searchfield, #findbutton").addClass("hover");
		},
		function(){
	    $("#searchfield, #findbutton").removeClass("hover");
	  }
	);
	
	$("#usernamefield, #passwordfield").hover(
    function(){
      $(this).addClass("hover");
    },
    function(){
      $(this).removeClass("hover");
    }
  );
  $("#usernamefield, #passwordfield").focus(
    function(){
      $(this).addClass("focus");
    }
  );
  $("#usernamefield, #passwordfield").blur(
    function(){
      $(this).removeClass("focus");
    }
  );

	$("#searchfield").focus(function(){
    $("#searchfield, #findbutton").addClass("focus");
  });
  $("#searchfield").blur(function(){
    $("#searchfield, #findbutton").removeClass("focus");
  });
  
  $("#logo_wrapper input.submit").hover(
    function(){
      $(this).addClass("hover");
    },
    function(){
      $(this).removeClass("hover");
    }
  );
  
  var fields = new Array();
  var fieldsN = 0;
  
  // 2) Automatize display with prefilleds data in the fields
  //    --> When a field is focused, set the value to "" if the field value is the default one
  //    --> When a field is blured, set the value to the default one if the field value is ""
  $("#search input[type=text], #login input[type=text], #login input[type=password]").each(function(){
  	var name = $(this).attr("name");
  	var field = $(this);
  	fields[name] = field.val();
  	fieldsN++;
  	field.focus(function(){
  		if(fields[name] != null && field.val() == fields[name]){
  		  field.val("");
  		}
  	});
  	field.blur(function(){
      if(fields[name] != null && field.val() == ""){
        field.val(fields[name]);
      }
    });
  });

  // 3) Closing the flash message when clicked.
  $('#flashMessage').click(function(){$(this).hide();});
  

  $('.myaccount').click(function(){
      $('#container-1').triggerTab(1);
  });

  $('.myphoto').click(function(){
      $('#container-1').triggerTab(2);
  });

});

/*
*   Check if all the images have been loaded;
*/
function checkImagesLoaded(){
    var loadedAll = true;
    $('img').each(function(i){
        if(!this.complete){
            loadedAll = false;
        }
    });

    if(loadedAll){
        imagesLoaded = true;
        clearInterval(imagesCheckInterval);
        if($('.display-pic').length){
            $('.display-pic img').each(function(i){
               vCenterImage($('.display-pic'), this);
            });
        }

        if($('.photo').length){
            $('.photo img').each(function(i){
                vCenterImage($('.photo'), this);
            });
        }
/*
        if($('.div-border').length){
            $('.div-border img').each(function(i){
                vCenterImage($('.div-border'), this);
            })
        }
*/    }
}

/*
*   Vertically centering images;
 */
function vCenterImage(parent, img) {
    var parentY = parent.height();
    var imgY = $(img).height();
    var marginTop = 0;
    if(imgY < parentY) {
        marginTop = (parentY - imgY) / 2;
    }
    $(img).css('margin-top', marginTop);
}