/*
*
* Author: Christopher Pietsch
* Date: 2009
*/

$(function() {		
	
	// Blur Links
	$('a').click(function() {
		$(this).blur();
	});
	
	
    // initialize scrollable  
    $("div.scrollable").scrollable({ 
		easing: 'easeInOutExpo',
		speed:800,
		size:4
    });

	

 	if($('.slideshowBox')[0]){
		$('.slideshowBox')
		.cycle({ 
		    fx:      'fade', 
		    speed:    7000, 
		    timeout:  5000,
			easing: 'easeOutExpo',
			//before:   onBefore,
			pager:  '.navigationSlider',
			requeueOnImageNotLoaded: true,
			pagerAnchorBuilder: function(index, DOMelement){
				return '<a href="#"></a>';
			}
		});
	}


	
	$('.loadThumbs .thumbImage').eq(0).thumbLoader(0);
	
	$('.loadList .teaserBox').eq(0).listLoader(0);
	
	$('.contentDetail .imageBox img').eq(0).each(function(){
		var $bigRdy = $(this)
		var bigWidth=$bigRdy.width();
		var bigHeight=$bigRdy.height();
		var monsterSrc = $bigRdy.attr('src').replace(/info_images/g, "popup_images");
		var $monsterImg = $('<img src="'+monsterSrc+'" class="monsterImage">').hide().appendTo($bigRdy.parent()).click(function(){
			$(this).hide();
			$bigRdy.animate({
				height:'407px',
				width:'470px'
			},300,function(){
				$('.contentDetail div').eq(1).show();
			})
			
		})
		$bigRdy.css('cursor','pointer').click(function(){
			$('.contentDetail div').eq(1).hide();
			$bigRdy.animate({
						height:'806px',
						width:'930px'
			},400,function(){
				$(this).hide();
				$monsterImg.css({
					cursor:'pointer',
					height:'806px',
					width:'930px'
				}).show()
			});
		});
	})

});

(function($){

$.fn.listLoader = function(i) {
	
	var $next=$(this).next();

	if($next[0]){
		var $imageBox = $('.imageBox a',this);
		var $descBox = $('.descBox', this);
		var $none = $('img',$imageBox);
		
		if($none[0]){
			var nonSrc= $none.attr('rel');
			var alt= $none.attr('alt')

			var thumbImage = new Image();

			$(thumbImage)
			.load(function () {
				//$none.remove();
				$(this).hide().css({

				})
				.attr('alt',alt).appendTo($imageBox).addClass('thumbImage').css({display:'inline',opacity:0}).animate({
					opacity:1
				},100, function(){
					$descBox.fadeIn('fast');
					$next.listLoader(i+1);
				})
				.css({
				//	height:$(this).height()-10,
				//	width:$(this).width()-10,
				})
				/*.hover(function(){
					$(this).css({
						height:$(this).height()+10,
						width:$(this).width()+10,
						top:-5,
						position:'relative'
					})
				}, 	function(){
						$(this).css({
							height:$(this).height()-10,
							width:$(this).width()-10,
							top:0,
						})
					})*/
				.click(function(){
					$(this).puff({appendTo:$imageBox});
				})

			})
			.error(function () {
				$none.appendTo($imageBox).css({display:'inline',opacity:0}).animate({
					opacity:1
				},100, function(){
					$descBox.fadeIn('fast');
					$next.listLoader(i+1);
				})
			 })
			.attr('src', nonSrc)
		} else {
			$descBox.fadeIn('fast');
			$next.listLoader(i+1);
		}
	}
}
var zoom=false;
$.fn.thumbLoader = function(i) {

	var $self = $(this);
	var $next=$self.next();
	if($next[0]){
		var $none = $('img',this);
		var nonSrc= $none.attr('rel');
		var bigSrc = nonSrc.replace(/thumbnail_images/g, "info_images");
		var monsterSrc = nonSrc.replace(/thumbnail_images/g, "popup_images");
		var $imageBox = $('.contentDetail .imageBox');
		var alt= $none.attr('alt')

		var thumbImage = new Image();
		var bigImage = new Image();
		var monsterImage = new Image();

		$(bigImage)
		.load(function () {
			var $bigRdy = $(this).hide().attr('alt',alt).addClass('bigImage'+i).addClass('bigImage').appendTo($imageBox).css({
				position:'absolute'
			})
			
				$(monsterImage)
				.load(function () {	
					var $monsterImg = $(this).hide().appendTo($imageBox).click(function(){
						zoom=false;
						$(this).css({
							position:'relative'
						}).hide();
						$('.headlineBox')
						.animate({
							top:'-17px'
						},300, function(){
							$(this).css({
								paddingBottom:'0px',
								paddingLeft:'0px',
								left:'0px',
								top:'0px',
								height:'139px',
								paddingTop:'0px'
								
								//border:'1px solid #CCCCCC'
							})
						})
						$bigRdy.css({
							position:'relative',
							height:'806px',
							width:'930px'
						}).animate({
							height:'407px',
							width:'470px'
							
						},400,function(){
							$(this).css({
								position:'absolute'
							})
							$('.infoBox').fadeIn();
							
						})					
						})
							

					$bigRdy.css('cursor','pointer').click(function(){
						zoom=true;
						$('.infoBox').hide();
							$('.headlineBox').css({
								paddingBottom:'17px',
								paddingLeft:'21px',
								left:'-21px',
								height:'126px',
								top:'-17px',
								paddingTop:'17px'

							}).animate({
								top:'21px'
							})
						$bigRdy
							.css({
								position:'relative'
							})
							.animate({
								height:'806px',
								width:'930px'
						
						},400,function(){
							$(this).hide().css({
								height:'407px',
								width:'470px',
								position:'absolute'
							});
								
							$monsterImg.css({
								cursor:'pointer',
								height:'806px',
								width:'930px'
								}).show()
							});
						})

						$(thumbImage)
						.load(function () {
							$none.hide();
							$(this).hide().css({
								width:"58px",
								height:"50px"
							})
							.attr('alt',alt).appendTo($self).addClass('thumbImage'+i).zoom({zoomWidth:10,zoomHeight:10})
							.hover(function(){
								//var active = $('.imageBox .active').attr('class').replace(/bigImage/g, "").replace(/ active/g, "");
								//if(active!=i){
								//console.log(zoom);
								if(!zoom){
									$('.imageBox .bigImage'+i).addClass('active').fadeIn(200, function(){
										$(this).siblings().hide().css({opacity:1})
									}).siblings().stop().removeClass('active')
								}
									
								//}
							})
							
							.css('cursor','pointer').click(function(){
								if(!zoom){
								zoom=true;
								//console.log(zoom)
								$('.infoBox').hide();
								$('.headlineBox').css({
									paddingBottom:'17px',
									paddingLeft:'21px',
									left:'-21px',
									height:'126px',
									top:'-17px',
									paddingTop:'17px'
								}).animate({
									top:'21px'
								})
								$bigRdy.css({
									position:'relative'
								}).animate({
									height:'806px',
									width:'930px'
								},400,function(){
									$(this).hide().css({
										height:'407px',
										width:'470px',
										position:'absolute'
									});
									$monsterImg.css({
										cursor:'pointer',
										height:'806px',
										width:'930px'
										}).show().addClass('activeM')
									});
								
								} else {
									
									$('.imageBox .activeM').removeClass('activeM').hide();
									$monsterImg.css({
										cursor:'pointer',
										height:'806px',
										width:'930px'}).show().addClass('activeM');
								}})

								if(i==0){$bigRdy.fadeIn().addClass('active')}

								$next.thumbLoader(i+1)
							})
							.error(function () { })
							.attr('src', nonSrc)
						})
						.error(function () { })
						.attr('src', monsterSrc)
					})
					.error(function () { })
					.attr('src', bigSrc)
				} else {
					// last item


				}
			}

$.fn.appear = function() {
	$self=$(this)
	$next=$self.next();
	if($next){
		/*$self.find('img').zoom({
			callback: function(){
				$self.find('.descBox').fadeIn('slow')
				$next.appear();
			}
		})*/
		$self.find('img').slideDown(200, function(){
			$next.appear();
		}).end().find('.descBox').fadeIn(200)
		
	}
}

$.fn.puff= function(options) {
  $.fn.zoom.defaults = {
	zoom:2,
	duration: 300,
	callback:null
  };
  var options = $.extend($.fn.zoom.defaults, options);
  var selector = this;

  return this.each(function() {
		var position = $(this).position();
		var $clone = $(this).clone().insertAfter($(this));
		
		$clone
		  .css({position:'absolute',top:position.top,
              left:position.left})
        .animate(
          {
            opacity: 'hide',
            width: $(this).width() * options.zoom,
            height: $(this).height() * options.zoom,
            top: position.top - ($(this).height() * 1 / options.zoom),
            left: position.left - ($(this).width() * 1 / options.zoom)
          },
          options.duration);
  }); 
 };

$.fn.zoom= function(options) {
  $.fn.zoom.defaults = {
	startWidth: 50, 
	startHeight: 50, 
	duration: 100,
	callback:null
  };
  var options = $.extend($.fn.zoom.defaults, options);
  var selector = this;

  return this.each(function() {
	var position = $(this).position();
	var width=58;
	var height=50;
	
	// not so nice width the position (not dynamic)
	$(selector)
	.css({
		position:'relative',
		top:((options.startHeight/2)-5)+'px',
		left:((options.startWidth/2)-5)+'px',
		width:'10px',
		height:'10px'
		})
	.animate(
		{
			width: width+'px',
			height: height+'px',
			top: 0+'px',
			left: 0+'px'
		},
		options.duration,options.callback);

	
  }); 
 };
 
 
})(jQuery);