// JavaScript Document

/////////////////////////////////////
//////////// GRAYSCALE //////////////
/////////////////////////////////////
$.noConflict();
  jQuery(document).ready(function($) {
	// On window load. This waits until images have loaded which is essential
	$(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		$(".gray_btn img").fadeIn(100);
		
		// clone image
		$('.gray_btn img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"1"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		// Fade image 
		$('.gray_btn img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:0}, 200);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:1}, 200);
		});		
	});
	
	// Grayscale w canvas method
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }
});   

/////////////////////////////////////
/////// CONTACT FORM TOGGLE /////////
/////////////////////////////////////
function openClose(hide_form)
{
   if(document.getElementById) {
      element = document.getElementById(hide_form);
   } else if(document.all) {
      element = document.all[hide_form];
   } else return;

   if(element.style) {
      if(element.style.height == '320px' ){

		 element.style.height = '0px';
		 element.style.opacity = '0';
      } else {
         element.style.height = '320px';
		 element.style.opacity = '1';    
		 
      }
   }
};

/////////////////////////////////////
////////// CUSTOM TOGGLE ////////////
/////////////////////////////////////
window.onload = function() {zwin_init();}
function zwin_init()
{
       var obiekty = getElementsByClassName("zwin");
       var tytuly;

       for(var i=0;i<obiekty.length;i++)
       {
          tytuly = obiekty[i].getElementsByTagName('dt');
          for(var j=0;j<tytuly.length;j++)
         {
            tytuly[j].innerHTML += '<span><img alt="wiecej..." class="plus_btn" src="skin/frontend/slyks/stone/images/new/plus_btn.png" /></span>';
            tytuly[j].nextSibling.style.opacity="0";
			 tytuly[j].nextSibling.className = 'close';
			 tytuly[j].onclick = function() {zwin(this)};
          }
       }
}
function zwin(elem){
       var obiekt = elem.nextSibling;
       if(obiekt.className=="close")
       {
          elem.getElementsByTagName('span')[0].innerHTML = '<img alt="zwin..." class="minus_btn" src="skin/frontend/slyks/stone/images/new/minus_btn.png" />';
          obiekt.style.opacity="1";
		  obiekt.className = 'open';		  
		  }else{
          elem.getElementsByTagName('span')[0].innerHTML = '<img alt="rozwin..." class="plus_btn" src="skin/frontend/slyks/stone/images/new/plus_btn.png" />';
		   obiekt.style.opacity="0";
		   obiekt.className = 'close';
		 }
}
function getElementsByClassName(nazwa)//pobiera z dokumentu elementy o wskazanej nazwie clasy
{
          var obiekty = document.getElementsByTagName('*');
          var wynik = [];
          for(var i=0;i<obiekty.length;i++)
          {
             if(obiekty[i].className == nazwa)
                wynik[wynik.length] = obiekty[i];
          }
          return wynik;
}


/////////////////////////////////////
////////////// SLIDER ///////////////
/////////////////////////////////////
var click_count;
click_count = 0;

function moveTo1(){
	new Effect.Move('sliderBoxInside', { x: 0, y: 0, transition: Effect.Transitions.sinoidal, mode: 'absolute' });
	click_count = 0;}
function moveTo2(){
	new Effect.Move('sliderBoxInside', { x: -644, y: 0, transition: Effect.Transitions.sinoidal, mode: 'absolute' });
	click_count = 1;}
function moveTo3(){
	new Effect.Move('sliderBoxInside', { x: -1288, y: 0, transition: Effect.Transitions.sinoidal, mode: 'absolute' });
	click_count = 2;}
function moveTo4(){
	new Effect.Move('sliderBoxInside', { x: -1932, y: 0, transition: Effect.Transitions.sinoidal, mode: 'absolute' });
	click_count = 3;}

function moveToPrevious(){	
	if (click_count == 3) {
	moveTo3();
	} else if (click_count == 2) {
	moveTo2();
	} else if (click_count == 1) {
	moveTo1(); 
	} else if (click_count == 0) {
	moveTo4();	
	};
}  
function moveToNext(){
	if (click_count == 0) {
	moveTo2();		
	} else if (click_count == 1) {
	moveTo3();		
	} else if (click_count == 2) {
	moveTo4();	
	} else if (click_count == 3) {
	moveTo1();	
	}
}


/////////////////////////////////////
///////// ROLLOVER IMAGE ////////////
/////////////////////////////////////
function rollover(name, filename)
{
  var fullpath = 'http://www.stoneo.pl/skin/frontend/slyks/stone/images/new/' + filename;
  document.images[name].src = fullpath;
}