$.fn.scroller=function(axises)
{
this.each(function (){
$(this).click(function(){
				
					$.scrollTo(axises, 800,{axis:'x'});
					

   });

}
				 );
	
	};	



$(document).ready(function() {
  $('#links a#h').addClass('ac');
 var height =document.documentElement.clientHeight;
 var widt =document.documentElement.clientWidth;
				

   $('#about').css({
                        "padding-left": (widt) + "px"
                    });
					   $('#works').css({
                        "padding-left": (widt*2) + "px"
                    });
						   $('#contact').css({
                        "padding-left": (widt*3) + "px"
                    });


								
		$("#h").scroller(0);
	    $("#a").scroller(widt-20);
		$("#w").scroller(widt*2-20);
		$("#c").scroller(widt*3-20);
		
		
		


   
   
   
   
   $('ul.line li#one').qtip(
   {
      content: {
         title: {
            text: 'Avistak co.',
            button: 'Close'
         },
         text:

		 '<b>Project:</b> WebDesign <br /><br />' +
		 '<b>Technologies:</b> Jquery , Css , Xhtml <br /><br />' +
		   '<b>URL:</b> <a href="http://www.avistak.com/" target="_blank">http://www.avistak.com/</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 550 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#two').qtip(
   {
      content: {
         title: {
            text: 'Tameshk Co',
            button: 'Close'
         },
         text: '<b>Project:</b> WebDesign <br /><br />' +
		 '<b>Technologies:</b> Flash , Css , Xhtml <br /><br />' +
		   '<b>URL:</b> <a href="http://www.tameshk-mg.com/" target="_blank">http://www.tameshk-mg.com/</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket2').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket2').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket2">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  $('#links a#h').click(function(){
					  $('#links a#h').addClass('ac');
$('#links a#a').removeClass('ac');
$('#links a#c').removeClass('ac');
$('#links a#w').removeClass('ac');

   });
   	  $('#links a#a').click(function(){
					  $('#links a#a').addClass('ac');
$('#links a#h').removeClass('ac');
$('#links a#c').removeClass('ac');
$('#links a#w').removeClass('ac');

   });
      	  $('#links a#c').click(function(){
					  $('#links a#c').addClass('ac');
$('#links a#a').removeClass('ac');
$('#links a#h').removeClass('ac');
$('#links a#w').removeClass('ac');

   });
         	  $('#links a#w').click(function(){
					  $('#links a#w').addClass('ac');
$('#links a#h').removeClass('ac');
$('#links a#c').removeClass('ac');
$('#links a#a').removeClass('ac');

   });
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#three').qtip(
   {
      content: {
         title: {
            text: 'Shidarian Co',
            button: 'Close'
         },
         text: '<b>Project:</b> WebDesign <br /><br />' +
		 '<b>Technologies:</b>Jquery, Flash , Css , Xhtml , PHP <br /><br />' +
		   '<b>URL:</b> <a href="http://www.shidarian.com/" target="_blank">http://www.shidarian.com/</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#four').qtip(
   {
      content: {
         title: {
            text: 'Paya Nama Azin Co',
            button: 'Close'
         },
         text: '<b>Project:</b> WebDesign - Multimedia Design<br /><br />' +
		 '<b>Technologies:</b>Jquery,  Flash , Css , Xhtml <br /><br />' +
		   '<b>URL:</b> <a href="http://www.payana.ir/" target="_blank">http://www.payana.ir/</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#five').qtip(
   {
      content: {
         title: {
            text: 'Savay',
            button: 'Close'
         },
         text: '<b>Project:</b> WebDesign <br /><br />' +
		 '<b>Technologies:</b> Flash , Css , Xhtml <br /><br />' +
		   '<b>URL:</b> <a href="http://www.savay.com/" target="_blank">http://www.savay.com/</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#six').qtip(
   {
      content: {
         title: {
            text: 'Tehran Makian Co.',
            button: 'Close'
         },
         text: '<b>Project:</b> Multimedia Design <br /><br />' +
		 '<b>Technologies:</b> Flash , After Effects<br /><br />' +
		   '<b>Preview:</b> <a href="portfolio.htm" target="_blank">Portfolio</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  $('ul.line li#seven').qtip(
   {
      content: {
         title: {
            text: '4 3 2 1',
            button: 'Close'
         },
         text: '<b>Project:</b> Logo Design - TV commercial - Videographic <br /><br />' +
		 '<b>Technologies:</b> After effects - Cinema 4d <br /><br />' +
		   '<b>Employer:</b> IRIB 4<br /><br />'+
		   	   '<b>Preview:</b> <a href="http://vimeo.com/8242283" target="_blank">http://vimeo.com/8242283</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
		  $('ul.line li#eight').qtip(
   {
      content: {
         title: {
            text: 'Refah Bank',
            button: 'Close'
         },
         text: '<b>Project:</b> TV Commercial <br /><br />' +
		 '<b>Technologies:</b>After Effects <br /><br />' +
'<b>Employer:</b> Simapakhsh Payam<br /><br />'+
		   	   '<b>Preview:</b> <a href="http://vimeo.com/8242283" target="_blank">http://vimeo.com/8242283</a>'

      },
      position: {
		  
         target: $('.line'), // Position it via the document body...
         corner: 'center',   adjust : {
        screen : false
    }
 // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 400 },
         padding: '14px',
         border: {
            width: 3,
            radius: 5,
            color: '#999999'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {

            $('#qtip-blanket3').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {

            $('#qtip-blanket3').fadeOut(this.options.hide.effect.length);
         }
      }
   });


   $('<div id="qtip-blanket3">')
      .css({
         position: 'fixed',
         top:0,
         left: 0,
         height: $(document).height(),
         width: '100%',

         opacity: 0.8,
         backgroundColor: 'black',
         zIndex: 5000
      })
      .appendTo(document.body)
      .hide();
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
});