function redir(url) {
  demo_loader.location.href = url;
}

window.addEvent('domready', function(){
  
  var images = new Array(
  'http://joomlaxtc.com/images/genre.jpg',
  'http://joomlaxtc.com/images/newspro.jpg',
  'http://joomlaxtc.com/images/dub.jpg',
  'http://joomlaxtc.com/images/teqmart.jpg',
  'http://joomlaxtc.com/images/teqmart.jpg',
  'http://joomlaxtc.com/images/teqmart.jpg',
  'http://joomlaxtc.com/images/teqmart.jpg',
  'http://joomlaxtc.com/images/teqmart.jpg'
  );

  var thumbs = new Array(
  'thumbs/genre_thumb.jpg',
  'thumbs/newspro_thumb.jpg',
  'thumbs/dub_thumb.jpg',
  'thumbs/teqmart_thumb.jpg',
  'thumbs/genre_thumb.jpg',
  'thumbs/genre_thumb.jpg',
  'thumbs/genre_thumb.jpg',
  'thumbs/genre_thumb.jpg'
  );
  var myThumbs = new Asset.images(thumbs);
  
  var links = new Array(
  'http://demo.joomlaxtc.com/genre/',
  'http://demo.joomlaxtc.com/newspro/',
  'http://demo.joomlaxtc.com/dub/',
  'http://demo.joomlaxtc.com/teqmart/',
  'http://demo.joomlaxtc.com/teqmart/',
  'http://demo.joomlaxtc.com/teqmart/',
  'http://demo.joomlaxtc.com/teqmart/',
  'http://www.google.com'
  );
  
  var max = images.length/4;  
  var imgH = new Array();
  var myImages = new Asset.images(images, {
			onProgress: function(i){
					//alert(this.height);
					imgH[i] = this.height;
					}
			
	});

  myImages.setStyle('border','1px solid #C0C0C0');

  myImages.each(function(im,i){
    im.addEvent('click', function(){
      redir(links[i]);
    });
  });
    
  if (navigator.appName.indexOf("Microsoft")!=-1){
    var hg = document.body.offsetHeight;
    var frameHg = hg - 60;
  }else{
    var hg = window.innerHeight;
    var frameHg = hg - 60;
  }  

  if (navigator.appName.indexOf("Microsoft")!=-1){
    $('demo_loader').setProperty('height', frameHg + 'px');
  }else{
    $('demo_loader').setProperty('height', frameHg + 'px');
  }

  document.body.scroll = "no";


  
	var divs = $$('.demos div');
	divs.each(function(d,i){
		d.adopt(myThumbs[i]);
		d.setStyle('left', i*212 + 110 + 'px');
	});

  var prevs = $$('.demos li');
  
  prevs.each(function(d,i){
    d.adopt(myImages[i]);
    if (navigator.appName.indexOf("Microsoft")!=-1){
      d.setStyle('left', i*212 + 78 + 'px');
			//imgH[i] = d.getStyle('height').toInt();
    }else{
      d.setStyle('left', i*212 + 89 + 'px');
			//imgH[i] = d.getStyle('height').toInt();
    }
    
    var fx = new Fx.Styles(d, {duration:400, wait:false});

    d.addEvent('mouseenter', function(){
    var dHg = d.getStyle('height').toInt();
      fx.start({
        'bottom': -imgH[i] + 20 + 'px'
      });
    });//add event end
    
    d.addEvent('mouseleave', function(){
      fx.start({
        'bottom': 20 + 'px'
      });
    });//add event end

    
    divs[i].addEvent('mouseenter', function(){
    var dHg = d.getStyle('height').toInt();
      fx.start({
        'bottom': -imgH[i] + 20 + 'px'
      });
    });//add event end
    
    divs[i].addEvent('mouseleave', function(){
      fx.start({
        'bottom': 20 + 'px'
      });
    });//add event end
    
  }); //prevs ends
/*
  var ix = 0;
  $('right').addEvent('click', function(){
    if(ix < max-1){
        divs[0].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
          function(){
          divs[1].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
            function(){
            divs[2].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
              function(){
              divs[3].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
                function(){
                ix++;
                prevs.each(function(p, i){
                  p.empty();
                  if(myImages[ix*4 + i] != null){
                    p.adopt(myImages[ix*4 + i]);
                  }
									imgH[i] = p.getStyle('height').toInt();
                });

                divs.each(function(d, i){
                  d.empty();
                  if(myImages[ix*4 + i] != null){
                    d.adopt(myThumbs[ix*4 + i]);
                  }
                });

                divs[0].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                  function(){
                  divs[1].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                    function(){
                    divs[2].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                      function(){
                      divs[3].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10);
                      })
                    })
                  })
                })
              })
            })
          });
    }else{
      ix = max-1;
    }
  });
  
  $('left').addEvent('click', function(){
    if(ix>0){
        divs[0].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
          function(){
          divs[1].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
            function(){
            divs[2].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
              function(){
              divs[3].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(10,-90).chain(
                function(){
                ix--;
                prevs.each(function(p, i){
                  p.empty();
                  if(myImages[ix*4 + i] != null){
                    p.adopt(myImages[ix*4 + i]);
                  }
									imgH[i] = p.getStyle('height').toInt();
                });

                divs.each(function(d, i){
                  d.empty();
                  if(myImages[ix*4 + i] != null){
                    d.adopt(myThumbs[ix*4 + i]);
                  }
                });

                divs[0].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                  function(){
                  divs[1].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                    function(){
                    divs[2].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10).chain(
                      function(){
                      divs[3].effect('top', {duration: 200, transition: Fx.Transitions.linear}).start(-90,10);
                      })
                    })
                  })
                })
              })
            })
          });
    }else{
      ix = 0;
    }
  });
  */
	var current = $('current');
	var current2 = $('current2');
  
 	var listC = $('listCont');
	var listC2 = $('listCont2');

	function curr(el, name) {
	  	el.innerHTML = name;
	}

	var list = $('listd');
	var options = $$('#list li');
	var list2 = $('listd2');
	var options2 = $$('#list2 li');
	
	list.setStyle('opacity',0);
	list.setStyle('display','block');
	list2.setStyle('opacity',0);
	list2.setStyle('display','block');
	//list2.setStyle('width','350px');
	
	var ul1 = $('list');
	var ul2 = $('list2');
	var sstep1 = ul1.getStyle('height').toInt() - 330;
	var sstep2 = ul2.getStyle('height').toInt() - 330;
  
  var lfx = new Fx.Styles(list, {duration:200, wait:false});
  var l2fx = new Fx.Styles(list2, {duration:200, wait:false});
	
	listC.addEvent('mouseenter', function(){
    	lfx.start({'opacity': [0,1]});
	});

	listC.addEvent('mouseleave', function(){
		lfx.start({'opacity': [1,0]});
	});

	listC2.addEvent('mouseenter', function(){
    	l2fx.start({'opacity': [0,1]});
	});

	listC2.addEvent('mouseleave', function(){
    	l2fx.start({'opacity': [1,0]});
	});

 	options.each(function(o){

		var fx = new Fx.Styles(o, {duration:200, wait:false});

		o.addEvent('click', function(){
			redir(o.getProperty('rel'));
			curr(current, o.innerHTML);
		});

	});

 	options2.each(function(o){

		var fx = new Fx.Styles(o, {duration:200, wait:false});

		o.addEvent('click', function(){
			redir(o.getProperty('rel'));
			curr(current2, o.innerHTML);
		});
	});


/***** SLIDER *****/

	var mySlide2 = new Slider($('area2'), $('knob2'), {	
		steps: sstep1,	
		mode: 'vertical',	
		onChange: function(step){
			$('list').setStyle('margin-top',-step);
		}
	}).set(0);

	var mySlide3 = new Slider($('area3'), $('knob3'), {	
		steps: sstep2,	
		mode: 'vertical',	
		onChange: function(step){
			$('list2').setStyle('margin-top',-step);
		}
	}).set(0);

});