var validweb = {};

validweb.init = function() {
	validweb.addSearchInputHandlers();
	validweb.addFlickrHandlers();
}

validweb.addSearchInputHandlers = function() {
    var input = document.getElementById('search_input');
    if(!input) return false;
	
    // @TODO: Use addclass / removeclass
    input.onfocus = function(e) {
            input.className = 'search_input';
    }
    input.onblur = function(e) {
        if(input.value == '')
            input.className = 'search_input google_image';
        else
            input.className = 'search_input';
    }
    
    input.onblur();
}

validweb.addFlickrHandlers = function() {
	var container = document.getElementById('flickr_container');
    if(!container) return;

    container.style.display = 'block';
    
    window.onresize = distributeImages;

	function distributeImages(e) {
	    e = e || window.event;
        
        var flickrContainer = document.getElementById('flickr_badge_wrapper');
        if(!flickrContainer) return;
        
        var flickrImages = flickrContainer.getElementsByTagName('div');
        
        if(!flickrImages.length) return; // Quit if flickr failed
    
		// Set container height equal to the image height
        var containerWidth = flickrContainer.offsetWidth;
        flickrContainer.style.height = flickrImages[0].offsetHeight + 'px';    
        
        var minMargin = 6; // Minimum margin
        var imageWidth = flickrImages[0].offsetWidth + minMargin;

        var maxImages = Math.floor(containerWidth / imageWidth);

        var marginPerImage = (containerWidth - (maxImages * imageWidth)) / maxImages;
        var margin = Math.floor((marginPerImage + minMargin) / 2);
        
        for (var i=0; i < flickrImages.length; i++) {
            flickrImages[i].style.display = i < maxImages ? 'block' : 'none';
            flickrImages[i].style.marginRight = margin + 'px';
            flickrImages[i].style.marginLeft = margin + 'px';
        };
	}
	
	// container.ontouchstart = function(e){
	//   alert('on touch start');
	// }

	container.ongestureend = function(e){
		alert('done with gesture');
	}
		
	// Run distributeImages initially
	distributeImages();
    
}


window.onload = validweb.init;