var sc, sc2 = null;
var lineProps = {width: 0.2, color: '#a8a8a8'};
var testProps = {width: 0.2, color: '#a8a8a8'};
if($.browser.msie){
	var testProps = {width: 0.2, color: '#555'};
}

$(window).bind('load', function(){
	sc = new SimpleCanvas('obj_canvas');
	sc2 = new SimpleCanvas('obj_canvas_2');

	sc.drawLine ({x: '8% + ' + $('div.caption_01 > h2 > a').eq(0).width(), y: 189}, {x: '50% - 116', y: 188}, testProps); //+60
	sc.drawLine ({x: '14% + ' + $('div.caption_02 > h2 > a').eq(0).width(), y: 352}, {x: '50% - 104', y: 421}, testProps); //+60
	sc.drawLine ({x: '6% + ' + $('div.caption_03 > h2 > a').eq(0).width(), y: 489}, {x: '50% - 107', y: 527}, testProps); // +89
	sc.drawLine ({x: '15% + ' + $('div.caption_04 > h2 > a').eq(0).width(), y: 628}, {x: '50% - 111', y: 611}, testProps); //+42
	sc.drawLine ({x: '30% + ' + ($('div.caption_05 > h2 > a').eq(0).width()-164), y: 762}, {x: '50% - 112', y: 729}, lineProps); //-9

	sc.drawLine ({x: '50% + 36', y: 311}, {x: '75% - 3', y: 156}, testProps);
	sc.drawLine ({x: '50% + 109', y: 419}, {x: '73% - 3', y: 358}, testProps);
	sc.drawLine ({x: '50% + 124', y: 624}, {x: '73% - 3', y: 590}, testProps);
	sc.drawLine ({x: '50% + 86', y: 702}, {x: '73% - 3', y: 740}, testProps);

	sc2.drawLine ({x: '29% - 41', y: 0}, {x: '50% - 111', y: 0}, testProps);

	sc.repaint();
	sc2.repaint();

	$('#obj_canvas').css('zoom', 1);

	$(window).bind('resize', function(){
		sc.repaint();
		sc2.repaint();
	});
});

$(function(){
	var me = this;
	this.bBadIE = /MSIE (5\.5|6).+Win/.test(navigator.userAgent);
	this.b = true;

	this.cut = $('#cutaway');
	this.cutaway = this.cut.find('>div');
	//this.lastBlock = this.cutaway;
	this.cutawayI = this.cutaway.find('>i');
	this.cutawayIns = this.cutaway.find('>ins');

	this.cutawayGhost = $('#cutaway_ghost a');
	this.captions = $('div.cuts div.captions');
	this.cutawayX = this.cut.offset().left;
	this.cutawayY = this.cut.offset().top;
	$(window).resize(function(){
		me.cutawayX = me.cut.offset().left;
	});
	this.captions.find('h2 a').each(function(i){
		$(this).hover(
			function(){
				me.cutaway.stop();
				var name = me.cutaway.eq(i).attr('class').split(' ')[0];
				me.cutaway.attr('style', '').removeClass('hover');
				me.cutawayIns.removeClass('hover');

				me.cutaway.not('.' +name).css('opacity',0.7).animate({opacity:0.3},1,'',function(){
					me.cut.removeClass('hover');
					me.b = false;
				});

				me.cutaway.eq(i).addClass('hover');
				me.cutawayIns.eq(i).addClass('hover');

				me.cutaway.eq(i).animate({opacity:1},100);

				$(this).parents('div:first').addClass('hover');
			},
			function(){
				me.cutaway.stop();
				$(this).parents('div:first').removeClass('hover');

				me.cut.addClass('hover');
				me.cutawayIns.eq(i).removeClass('hover');
				me.cutaway.animate({opacity: 1}, 100, '',function(){
					me.cutaway.attr('style', '');
					me.cutawayI.eq(i).removeClass('hover');

				});
				me.b = true;
			}
		);
	});

	this.cutawayGhost.each(function(i){
		$(this).hover(
			function(){
				me.cutaway.stop();
				var name = $(this).attr('class');

				if(me.b){
					me.cutaway.attr('style', '').removeClass('hover');;
					me.cutawayIns.removeClass('hover');
					me.cutaway.not('.' +name).css('opacity',0.7).animate({opacity:0.3},1,'',function(){
						me.cut.removeClass('hover');
						me.b = false;
					});
				}

				me.cutaway.eq(i).addClass('hover');
				me.cutawayIns.eq(i).addClass('hover');

				me.cutaway.eq(i).animate({opacity:1},100);
				me.captions.eq(i).addClass('hover');
			},
			function(evt){
				me.cutaway.stop();
				me.captions.eq(i).removeClass('hover');
				var name = $(this).attr('class');
				var areaX1 = 381;
				var areaY1 = 231;
				var areaY2 = 878;
				if(name=='cut_06'){
					areaX1 = 296;
				}
				if(name=='cut_07'){
					areaX1 = 296;
					areaY1 = 460;
				}
				if(name=='cut_01'){
					areaX1 = 296;
					areaY2 = 531;
				}
				if((me.cutawayX+areaX1)<=evt.pageX | me.cutawayX+2>=evt.pageX | areaY1>=evt.pageY | areaY2<=evt.pageY | (me.cutawayX+160<=evt.pageX && 776<=evt.pageY)){
					me.cut.addClass('hover');
					me.cutawayIns.eq(i).removeClass('hover');
					me.cutaway.animate({opacity: 1}, 100, '',function(){
							me.cutaway.attr('style', '');
							me.cutaway.removeClass('hover');
						});
					me.b = true;
				} else {
					me.cutaway.eq(i).css('opacity',0.01).removeClass('hover');
					me.cutawayIns.eq(i).removeClass('hover');
					me.captions.eq(i).removeClass('hover');
				}
			}
		);
	});
	
});