var $j = jQuery.noConflict();

$j(document).ready(function() {
	if($j('.portfolio[id="secondary-content"]').length)
	{
		ie6 = (($j.browser.msie) && ($j.browser.version == 6));
		
		tooltip = $j('<div></div>').attr('class', 'g_frame');
		tooltip.append($j('<img>').attr({'src': '', 'class': 'g_img_tooltip'}));
		
		if(!ie6)
		{
			tooltip.append($j('<img>').attr({'src': 'images/enlargeIcon.png', 'class': 'g_enlarge_icon'}));
		
			tooltip_tl = $j('<div></div>').attr('class', 'g_tooltip_tl').append(tooltip.clone());
			tooltip_tr = $j('<div></div>').attr('class', 'g_tooltip_tr').append(tooltip.clone());
			tooltip_bl = $j('<div></div>').attr('class', 'g_tooltip_bl').append(tooltip.clone());
			tooltip_br = $j('<div></div>').attr('class', 'g_tooltip_br').append(tooltip.clone());
		}
		else
		{
			tooltip_tl = tooltip_tr = tooltip_bl = tooltip_br = $j('<div></div>').attr('class', 'g_tooltip').append(tooltip.clone());
		}
		
		tooltip.remove();
		theBody = $j('body');
		
		theBody.append(tooltip_tl).append(tooltip_tr).append(tooltip_bl).append(tooltip_br);
		
		theShadow = $j('<div></div>').attr('class', 'g_shadow');
		theBody.append(theShadow);
		
		pic_window = $j('<div></div>').attr('class', 'g_big_image_win').css({'width': '60%', 'height': '70%'});
		theBody.append( pic_window );
		pic_window.animate({
			'left': parseInt(pic_window.width() / 3) + 'px',
			'top': parseInt((pic_window.height() * 3) / 14) + 'px'
		}, 0);
		pic_window.append($j('<img>').attr({
			'class': 'g_big_image',
			'src': '',
			'height': pic_window.height() - 68,
			'width': pic_window.width() - 38
		}));
		pic_window.append($j('<img>').attr({
				'id': 'g_pic_win_close',
				'src': 'images/closeIcon.png'
		}).click(function() {
			//hide picture window
			theShadow.fadeOut(0);
			pic_window.fadeOut(0);
		}));
		pic_window.append($j('<div></div>').attr('id', 'g_big_image_caption'));
		
		
		
		$j('.portfolio[id="secondary-content"] img').hover(function(e) {
			w = $j(window); 
			right = w.width() + w.scrollLeft();
			bottom = w.height() + w.scrollTop();
			px = e.pageX;
			py = e.pageY;
			
			max_x = right - 290;
			max_y = bottom - 250;
			x_offset = 275;
			y_offset = 254;
			
			tooltip = tooltip_br;
			
			if((px > max_x) && (py > max_y))
			{
				tooltip = tooltip_tl;
				tooltip.css({'left': px - x_offset, 'top': py - y_offset});
			}
			else if(px > max_x)
			{
				tooltip = tooltip_bl;
				tooltip.css({'left': px - x_offset, 'top': py - 12});
			}
			else if(py > max_y)
			{
				tooltip = tooltip_tr;
				tooltip.css({'left': px, 'top': py - y_offset});
			}
			else
			{
				tooltip.css({'left': px, 'top': py - 12});
			}
			
			tooltip.find('.g_img_tooltip').attr({'src': this.src, 'alt': this.alt});
			tooltip.show().hover(
				function() {$j(this).show();},
				function() {$j(this).hide();}
			).click(function() {
				theImage = $j(this).find('.g_img_tooltip').get(0);
				pic_win = $j('.g_big_image_win');
				
				pic_win.find('.g_big_image').attr({'src': theImage.src, 'alt': theImage.alt});
				pic_win.find('#g_big_image_caption').text(theImage.alt);
				
				//show picture window
				theShadow.fadeTo(50, 0.6).clearQueue();
				pic_win.fadeIn(50);
				
				$j(this).hide();
			});
		},
		function() {
			tooltip.hide();
		});
	}
});