// JavaScript Document

var imgpos = new Array(0, 200, 70, 160, 8, 7, 0);
var links = new Array("", "visualisation", "dtp", "photography", "webdesign", "conceptart", "programming");
var speed = 500;
var actbox = 0;


$.fn.opacity = function(_value) { 
    return $(this).css('opacity',_value);
};

function HideImg(i) {
//alert("Hide "+i);

 $("#top_"+i).stop().animate({width: "135px"}, {duration: speed, step: function(now, fx) {
	      //alert(fx.prop);
        if (fx.prop == "width") {
              // $("#top_"+i+"_bg").css("width", now);
               var p = (445 - 135) / 100;
               var x = 100 - ((445 - now) / p);
            //   if(i==1)
              // console.log(0.5 + 0.50 *(x/100));
               $("#top_"+i+"_bg").css("left", -1 * (imgpos[i] - (imgpos[i]*(x/100))));
               $("#top_"+i+"_bg").fadeTo(0, 0.5 + 0.50 *(x/100));
               
               }
               
               //$("#top_"+i+"_bg").css("backgroundPosition", "( "+now+" 0px)");
        }
      }
    
     );
	 
   /*$("#top_"+i).stop().animate({width: "135px"}, speed, "linear" );
   $("#top_"+i+"_bg").stop().animate({width: "135px", backgroundPosition:"(-"+imgpos[i]+" 0px)"}, speed, "linear");
   */
//   $("#top_"+i+"_bg").fadeTo(speed, 0.5);
   
	 //$("#top_"+i+"_bw").fadeIn(500);
	// $("#top_"+i).stop().animate({backgroundPosition: "(-200px 0px)"}, 500 );
	}

function ShowImg(i) {
//alert("Show "+i);

$("#myDiv").animate({ width: "500px" }, {
  duration: 500,
  step: function(val, opt) {
    console.log(val, opt)
  }
 
});

 actbox = i;
	 $("#top_"+i).stop().animate({width: "445px"}, {duration: speed, step: function(now, fx) {
	      //alert(fx.prop);
        if (fx.prop == "width") {
              // $("#top_"+i+"_bg").css("width", now);
               var p = (445 - 135) / 100;
               var x = 100 - ((445 - now) / p);
              // console.log(imgpos[i]*(x/100));
               $("#top_"+i+"_bg").css("left", -1 * (imgpos[i] - (imgpos[i]*(x/100))));
               $("#top_"+i+"_bg").fadeTo(0, 0.5 + 0.50 *(x/100));
             
               }
               
               //$("#top_"+i+"_bg").css("backgroundPosition", "( "+now+" 0px)");
        }
      }
    
     );
    
    //$("#top_"+i+"_bg").fadeTo(speed, 1);
//    $("#top_"+i+"_bg").stop().animate({backgroundPosition:"(0px 0px)"}, speed, "linear" , linkto(links[i])).add("#top_"+i+"_bg").fadeTo(speed, 1);
	 //$("#top_"+i+"_bw").stop().animate({width: "445px", backgroundPosition:"(0px 0px)", borderColor: "#0c68bd"}, 500, "linear" );
	 //$("#top_"+i+"_bw").fadeOut(500);
//	 $("#top_"+i).stop().animate({backgroundPosition: '(0px 0px)'}, 500);
	}

function UpdateImg(i)
{
//alert("Update "+i);
	for(j=1;j<7;j++)
  {
    if(j==i) ShowImg(j); else HideImg(j);
  }
}

function linkto(link)
{
 // alert(link);
}

$(document).ready(function () {
	
     /* 
     $("#top_1").mouseenter(function(){UpdateImg(1);});
     $("#top_2").mouseenter(function(){UpdateImg(2);});
     $("#top_3").mouseenter(function(){UpdateImg(3);});
     $("#top_4").mouseenter(function(){UpdateImg(4);});
     $("#top_5").mouseenter(function(){UpdateImg(5);});
     $("#top_6").mouseenter(function(){UpdateImg(6);});
    */

     $("#top_1").mouseenter(function(){ShowImg(1);});
     $("#top_2").mouseenter(function(){ShowImg(2);});
     $("#top_3").mouseenter(function(){ShowImg(3);});
     $("#top_4").mouseenter(function(){ShowImg(4);});
     $("#top_5").mouseenter(function(){ShowImg(5);});
     $("#top_6").mouseenter(function(){ShowImg(6);});

     $("#top_1").mouseleave(function(){HideImg(1);});
     $("#top_2").mouseleave(function(){HideImg(2);});
     $("#top_3").mouseleave(function(){HideImg(3);});
     $("#top_4").mouseleave(function(){HideImg(4);});
     $("#top_5").mouseleave(function(){HideImg(5);});
     $("#top_6").mouseleave(function(){HideImg(6);});

     $("#carousel").mouseleave(function(){ShowImg(actpage);});
     $("#carousel").mouseenter(function(){ if(actbox != actpage) HideImg(actpage);});

    
     for(j=0; j<7; j++) {if(actpage == j) ShowImg(j); else HideImg(j);}
     
      
      
  
});