// DOM Loaded
$(function(){
    
    //init js styles
    $('body').addClass('hasJS');
   
    // homepage cycles
    $('#shuffle_gallery .image_group').wrapAll('<div class="projects">').parents('#shuffle_gallery').prepend('<ul class="menu" id="shuffle_gallery_pager">').cycle({

        speed:      250,
        speedIn:    300,
        speedOut:   400,
        easeIn: 'swing',
        easeOut: 'swing',
        inDelay:    250,
        drop:       20,
        timeout:    8000,
        pause:      true,
        slideExpr: '.image_group',
        pager:      '#shuffle_gallery_pager',
        pagerAnchorBuilder: function(idx, slide) { 
            myClass = (idx==0)?' class="current"':'';
            return '<li'+myClass+'><a href="#">'+slide.title+'</a></li>'; 
        }
    });
    $('#shuffle_gallery .image_group .shuffle_images li').mouseover(function(evt){
        $(this).addClass('click-target');
        $els = $(this).parents('.shuffle_images').find('li');
        $($els.get(2)).css('marginRight','-100%');
        $els.each(function(idx, el){
            $(this).stop(true, true);
            if($(this).is('.third')){
                var fromClass = 'third';
            }else if($(this).is('.second')){
                var fromClass = 'second';
            }else{
                var fromClass = 'first';
            }
            if($(this).is('.click-target')){
                var toClass = 'first';
                $(this).addClass('front');
                $(this).removeClass('back').removeClass('middle');
            }else if(($(this).prev('li').is('.click-target')) || ($(this).next('li').is('.click-target'))){
                var toClass = 'second';
                $(this).addClass('middle');
                $(this).removeClass('back').removeClass('front');
            }else{
                var toClass = 'third';
                $(this).addClass('back');
                $(this).removeClass('front').removeClass('middle');
            }
			
           if(((toClass=='first')&&(idx==1||idx==1))){
			/*	when middle front pulls middle to left thus pulling right to left as well*/
                var margins = '-144px';
            }
	        else if(((toClass=='second')&&(idx==2||idx==2))){
				/*when middle coming to front, pulls right to left*/
                var margins = '-144px';
            }	
			
			else if(((toClass=='first')&&(idx==2||idx==2))){
			/*	when right front pulls right to left*/
                var margins = '-135px';
			}
			
			else if(((toClass=='third')&&(idx==2||idx==2))){
			/*	when right back pulls right to left*/
                var margins = '-125px';
            }
			
			else if(((toClass=='second')&&(idx==1||idx==1))){
			/*	when right back pulls right to left*/
                var margins = '-130px';
            }
		
		   else{
                var margins = '-135px';
            }
            if(idx==0) {
                margins='0px';
            }
            if(fromClass != toClass){
                if(toClass == 'first') 
                    $(this).animate({width:'258px',marginTop:'0px',marginLeft:margins}, 400, 'swing', function(){$(this).addClass('first').removeClass('second').removeClass('third')});
                if(toClass == 'second')
                    $(this).animate({width:'200px',marginTop:'20px',marginLeft:margins}, 400, 'swing', function(){$(this).addClass('second').removeClass('first').removeClass('third')});
                if(toClass == 'third')
                    $(this).animate({width:'170px',marginTop:'30px',marginLeft:margins}, 400, 'swing', function(){$(this).addClass('third').removeClass('second').removeClass('first')});
            }
        });
        $(this).removeClass('click-target');
        return false;
    });
});