var sc;
var sc1;
var tl;
var bl;

var changer = {

	init : function(){
		var that = this;

		this.links = $(".sub_menu .navigation a");
		this.images = $("#text_photo .photo img");
		this.imagesPnt = this.images.parent();
		this.startImg = $("img.selected",that.images.parent());

		this.attachEvents();
	},

    attachEvents : function(){
		var that = this;
        this.links.hover(
			function(){
				that.images.stop(true, false);
				var hoverImg = that.imagesPnt.find("."+$(this).attr("class")).css("top","52px");
				var selectedImg = $("img.selected", that.imagesPnt);
				if(hoverImg[0] !== undefined){
					selectedImg.animate(
						{
							top: 52
						}, 300, function(){
							that.images.removeClass("selected");
							hoverImg.addClass("selected");
							hoverImg.animate(
								{
									top: 0
								}, 300
							)
						}
					);
				}
				else{
					$(that.images).removeClass("selected");
					that.startImg.addClass("selected");
					that.startImg.animate(
						{
							top: 0
						}, 500
					);
				}
			},
            function(){
            	var selectedImg = $("img.selected", that.imagesPnt);
            	selectedImg.animate(
	            	{
	            		top: 52
	            	}, 300, function(){
	            		$(that.images).removeClass("selected");
						that.startImg.addClass("selected");
						that.startImg.animate(
							{
								top: 0
							}, 500
						);
	            	}
            	);
			}
		);
	}
};

function checkCanvas() {
	if (undefined !== window.HTMLCanvasElement)
		return true;
		 // В IE для VML надо добавить схему и стили.
	 	if (!document.namespaces['v']) {
	 		document.namespaces.add('v', 'urn:schemas-microsoft-com:vml',"#default#VML");
	 		var ss = document.createStyleSheet();
	 		ss.cssText = 'v\\:line {behavior:url(#default#VML);display:block;}';
	}
 	return false;
}

checkCanvas();

$( function() {
	changer.init();
	tl = [];
	bl = [];
	sc = $("ins.tl-br").each(function(i){
        tl[i] = new SimpleCanvas(this);
		tl[i].drawLine({x:0, y:0}, {x:'100%', y:'100%'}, {opacity: 0.5, color:'#7f7f7f', width:1});
		tl[i].repaint();
	});
    sc1 = $("ins.bl-tr").each(function(i){
        bl[i] = new SimpleCanvas(this);
		bl[i].drawLine({x:0, y:'100%'}, {x:'100%', y:0}, {opacity: 0.5, color:'#7f7f7f', width:1});
		bl[i].repaint();
	});

	$(window).resize(
		function(){
			for (var i=0; i < sc.length; i++){
				tl[i].repaint();
			}
            for (var i=0; i < sc1.length; i++){
				bl[i].repaint();
			}
	});
});