/**
 * 
 * page.js
 * 
 * @site      Parado
 * @create    2011/06/12
 * @update    2011/08/05
 * 
 */

Modernizr.load([
	{
		test : true,
		complete : function(){
			Modernizr.load([
				{
					test : Modernizr.opacity,
					nope : [
						'./js/jquery.belatedPNG.min.js'
					]
				},
				{ load : './js/jquery.twitterWidget.js' },
				{ load : './js/jquery.loader.js' },
				{ load : './js/jquery.masonry.min.js' },
				{ load : './js/jquery.mousewheel.js' },
				{ load : './js/jquery.jscrollpane.min.js' },
				{ load : './js/jquery.slideGallery.js' },
				{
					test : true,
					complete : function(){
						$(function(){

							// Create loader.
							var $loader = $('body').loader({
								klass : 'mod-loader',
								img : {
									src : '/img/mod-loader/loader.gif',
									width : 48,
									height : 48,
									alt : 'Now Loading'
								},
								css : {
									opacity : 0.8
								}
							});

							// Define jquery element.
							var $container = $('.mod-gridcontents');
							var $items = $('.items', $container);
							var $slidegallery = $('.mod-slidegallery', $container);

							// Set slidegallery.
							var $slidegalleryInst = $slidegallery.slideGallery({
								klass : {
									imgs : '.imgs',
									img : '.img',
									nav : '.nav',
									select : 'selected'
								},
								hashName : '#slide',
								effect : {
									duration : 700,
									easing : 'easeOutExpo'
								},
								autoPlay : true,
								autoPlayTimerInterval : 5000,
								firstPage : 0
							});

							// Convert json to html.
							var $brickInstance = $items.jsonToHtml({
								jsonPath : '/json/item.json',
								tmpl : [''
									,'<a href="${link.url}" target="${link.target}" class="item brick js-exblink {{if cat}}cat-${cat}{{/if}}">'
									,'	<p><img src="${img}" /></p>'
									,'	{{if title}}<dl><dt>{{html title.subTitle}}</dt><dd>{{html title.mainTitle}}</dd></dl>{{/if}}'
									,'	{{each badge}}'
									,'		<p class="${klass}">'
									,'			<img src="${src}" alt="${alt}" class="js-pngfix" />'
									,'		</p>'
									,'	{{/each}}'
									,'</a>'
								].join(''),
								onLoadStart : function(){
									$loader.loader('show');
								},
								onLoadComplete : function(){
									if($.snippets.ua.isMSIE6()) $('.js-pngfix').fixPng();
									var $item = $('.item', $items);
									var $twitter = ''
										+ '<div class="item mod-twitter">'
										+ '	<div class="header">'
										+ '		<p class="parado">'
										+ '			<img src="./img/mod-twitter/img1.gif" width="116" height="17" alt="Paradoのつぶやき" />'
										+ '		</p>'
										+ '		<p class="twitter">'
										+ '			<a href="http://twitter.com/#!/ParaDo_">'
										+ '				<img src="./img/mod-twitter/img2.gif" width="63" height="12" alt="twitter" />'
										+ '			</a>'
										+ '		</p>'
										+ '	</div>'
										+ '	<div class="main"></div>'
										+ '</div>';
									$item.eq(4).after($twitter);
									var $twitterInst = $('.mod-twitter .main').twitterWidget({
										userName : 'ParaDo_',
										maxCount : 20,
										callback : function(){
											var h = 0;
											$.snippets.externallink({
												selector : '.js-exlink'
											});
											$('.mod-twitter .main .tweet:lt(3)').each(function(){
												h += $(this).height() + 21;
											});
											$('.mod-twitter .main').height(h - 10);
											$('.mod-twitter .main').jScrollPane();
											$('.mod-twitter a').bind({
												click : function(e){
													e.preventDefault();
													recordOutboundLink(this, 'Twitter2', 'twitter.com');
												}
											});
											$items.masonry({
												isAnimated : true,
												animationOptions : {
													duration : 500,
													easing : 'easeOutExpo',
													queue : false
												},
												itemSlector : '.item',
												columnWidth : 230
											});
											$.snippets.blink({
												selector : '.js-exblink'
											});
											$loader.loader('hide');
											}
									});
								}
							});

						});
					}
				}
			]);
		}
	}
]);