var Root = {

    def: {},
    banner_alpha:0,

    init : function() {
	for(var i in [0,1]) {
	    $('#list').masonry(
		{
		    itemSelector:'.listitem',
		    columnWidth:20
		});
	}
	//	$('.img-over').pngfix();
	// capture scroll
	$(document.body).append('<div id="banner">Semitransparent Design Works - 2011</div>');
	$('#banner').css(
	    {
		fontSize:'48px',
		color:'#ff0',
		lineHeight:'50px',
		fontFamily:'helvetica,arial,sans-serif',
		position:'fixed',
		top:'50px',
		left:'20px',
		width:'754px',
		height:'262px',
		backgroundImage:'url(/ui/banner.gif)',
		textIndent:'-9999px',
		overflow:'hidden',
		opacity:0,
		zIndex:100000
	    });
	$(window).scroll(
	    function() { Root.banner_alpha = 1.0; });
	setInterval(
	    function() {
		Root.banner_alpha *= 0.8;
		$('#banner').css({opacity:Root.banner_alpha});
		Root.banner_alpha < 0.05 ? $('#banner').hide() : $('#banner').show();
	    },1000/30);
// 	$(window).resize(
// 	    function() {
// 		$('#banner').css({top:($(window).height()-100-$('#banner').height())+'px'});
// 	    });
//	$(window).resize();
    },
    setupImage : function(id,url_imgon) {
	Root.def[id] = { off:$('#img-'+id).attr('src'),on:url_imgon,cache:document.createElement('img') };
	Root.def[id].cache.src = Root.def[id].on;
	var width = $('#img-'+id).attr('width');
	var height = $('#img-'+id).attr('height');
	$('#radius-'+id).css({position:'relative',width:width+'px',height:height+'px'})
	    .append('<img class="img-over" src="'+Root.def[id].on+'" id="img-over-'+id+'" />');
	$('#img-'+id).css({position:'absolute',left:0,top:0,zIndex:Root.zindex++,width:width+'px',height:height+'px',opacity:0})
	    .load(function() {
		       $(this).animate({opacity:1},300+300*Math.random());
		  });
	$('#img-over-'+id).css(
	    {
		position:'absolute',
		left:0,
		top:0,
		zIndex:Root.zindex++,
		width:width+'px',
		height:height+'px',
		opacity:0})
	    .pngfix();
	$('#a-img-'+id)
	    .hover(function(){
		       var id = this.id.substr('a-img-'.length);
		       $('#img-over-'+id).animate({opacity:1},150);
		   },function() {
		       var id = this.id.substr('a-img-'.length);
		       $('#img-over-'+id).animate({opacity:0},300);
		   });

	
    },
    onscroll : function() {
    }    
    
};
$(Root.init);