// JavaScript Document
if ( window.jQuery ) {
    (function($){
        $.fn.preload = function(images,callback){
            var count = 1;
            var preloader;
            $(images).each(function(ix,item){
                preloader = new Image();
                $(preloader).load( function(){
                    $(preloader).unbind('load');
                    preloader = null;
                    
                    if ( ++count >= $(images).length )
                        callback();
                });
                preloader.src = item;
            });
            
            return this;
        };
        
    })(jQuery);
};

jQuery(function($){

    $('#mainBox .title').after( $('<div />').addClass('loading').text('Loading high-resolution photos...'));
	
	$('.photos .main').prepend( $('<img />') ).append( $('<div />').addClass('zoom-tool') );
	
	$('.tech-tabs .making-of').click( function() {
		window.open( $(this).attr('href'), 'makingOf', 'width=320, height=260, menubar=no, location=yes');
		return false;
	});

	$('.photos .thumbnails img')
		.click( function() {
			//if (! $('.photos .main img') ) $('.photos .main').prepend( $('<img />') );
			$('.photos .main img').attr('src', $(this).attr('src').replace('t.jpg','.jpg'));
			$('.info-panels .panel.zoom-display').empty().html('<img src="' + $('.photos .main img').attr('src').replace('.jpg','h.jpg')+ '" />');
		})
		.mouseover( function() { $(this).css('border-color', 'white'); } )
	  	.mouseout( function() { $(this).css('border-color', '#919090'); } )
	  	
	  	.each( function(i) {
	  		var preload = new Image();
	  		preload.src = $(this).attr('src').replace('t.jpg','h.jpg');
	  		
	  		if ( i == 0 )
	  			$(this).click();
	  	});
	
	$('.tech-tabs img')
		.mouseover( function() {
			$(this).attr('src', $(this).attr('src').replace('.jpg','_o.jpg'));
		})
		.mouseout( function() {
			$(this).attr('src', $(this).attr('src').replace('_o.jpg','.jpg'));
		})
		.parent('a').filter( function() {
			return $(this).attr('href').indexOf('/tech-focus/making-of/') != -1;
		}).click( function( event) {
			event.preventDefault();
			window.open( $(this).attr('href'), 'makingOf', 'width=320, height=260, menubar=no, location=yes');
		});
		
	$('.panel-tabs div')
		.mouseout( function() {
			$(this).removeClass('over');
			$('.info-panels .panel').addClass('hide');
			$('.info-panels .panel.basic').removeClass('hide');
		})
		.mouseover( function() {
			$('.panel-tabs div').removeClass('over');
			$(this).addClass('over');
			
			$('.info-panels .panel').addClass('hide');
			$('.info-panels .panel.'+$(this).attr('id')).removeClass('hide');
		});
	
	$('.photos .main')
		.mouseover( function() {
			$('.photos .main .zoom-tool').css('display','block');
			$(this).css('cursor','pointer');
		})
		.mousemove( function( e ) {
			var h, p, w, offset, zd, zi, zt;
			p		= {x: e.pageX, y: e.pageY};
			h		= $(this).height();
			w		= $(this).width();
			offset	= $(this).offset();
			zt		= { w: $('.photos .main .zoom-tool').width(),
						h: $('.photos .main .zoom-tool').height(),
						x: $('.photos .main .zoom-tool').offset().left,
						y: $('.photos .main .zoom-tool').offset().top
					  };
			
			
			// if the cursor is above or below the main photo, close the zoom-tool
			if ( p.y < offset.top || p.y > offset.top+h )
				$(this).mouseout();
			// if the cursor is past the left or right edge of the main photo, close the zoom-tool
			if ( p.x < offset.left || p.x > offset.left+w )
				$(this).mouseout();
			
			// set the position of the zoom-tool to be roughly centred around the cursor
			$('.photos .main .zoom-tool')
				.css('top', p.y - offset.top - zt.h/2 )
				.css('left', p.x  - offset.left - zt.w/2 )
			;
			
			// unhide the zoom display panel
			zd = $('.info-panels .panel.zoom-display').addClass('show');
			
			// set the position of the panel so that it matches the area being centred around the cursor
			//263 338
			//alert( 0 - (zt.y - offset.top) * $('.info-panels .panel.zoom-display img').height()/h );
			zi = $('.info-panels .panel.zoom-display img')
			zi.css('top',  (0 - (zt.y - offset.top)  * (zi.height()/h) ))
			  .css('left', (0 - (zt.x - offset.left) * (zi.width()/w) ));
			  
			
		})
		.mouseout( function() {
			$('.photos .main .zoom-tool').css('display','none');
			$('.info-panels .panel.zoom-display').removeClass('show');
		})
	;
	
	$('.next-step.components .button')
		.mouseover( function() {
			$(this).attr('src', $(this).attr('src').replace('.png','_o.png'));
		})
		.mouseout( function() {
			$(this).attr('src', $(this).attr('src').replace('_o.png','.png'));
		})
	;
	
	$('.panel-tabs div').attr('title','');
	
	if ( typeof disableCS == 'undefined' ) disableCS = false;
	
	if (! (disableCS) )
		$('#mainBox .padding').append(
			$('<div />').addClass('to-colour-selector').append(
				$('<a />').attr('href','design.php').append(
					$('<img />').attr('src',myLocale!='frCA'?'../../../images/products/cs-button.gif':'../../images/products/cs-button.gif').hover(
						function(){
							$(this).attr('src', $(this).attr('src').replace('.gif','_o.gif') );
						},function(){
							$(this).attr('src', $(this).attr('src').replace('_o.gif','.gif') );
						}
					)
				)
			)
		);
});

function gi( i, o )
{
	if ( o && o.getElementById )
		return o.getElementById( i );
	else
		return document.getElementById( i );
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function rolloverHandler( e ) {

	if (! e ) { var e = window.event; }

	var element;
	if (e.target)
		element = e.target;
	else if (e.srcElement)
		element = e.srcElement;

	var definition = gi('model-definition');
	
	if (! definition ) {
		return false;
	}

	if (e.type == 'mouseover') {
		definition.style.display = "block";
	} else if (e.type == 'mouseout') {
		definition.style.display = "none";
	}

}

addLoadEvent(function() {
	
	var element = gi('model-name');
	
	if (element) {
		if (element.addEventListener) {
			element.addEventListener('mouseover',rolloverHandler,false);
			element.addEventListener('mouseout',rolloverHandler,false);
		} else if (element.attachEvent) {
			element.attachEvent('onmouseover',rolloverHandler);
			element.attachEvent('onmouseout',rolloverHandler);
		}
	}

});