/*
 * Javascript presentation
 *
 * Developer: UVM - Petr Hamtil
 *
 *
 * Depends:
 *	jQuery, jQ UI
 *
 */

/*	
	CSS: v default/css/js_css/jacord.css, je potreba nacist na strance
	HTML:
	<div id="jacord">
		<div class="expandable">
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_one.jpg" class="accImage" />
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_one.jpg" class="bw" />
			<div class="con">
				<h2>Know who you are&mdash;own it</h2>
				<div class="exCon">
					<a href="/our-salon" class="exCTA bReplace fade">CALL TO ACTION</a>
					<p>Loyal Hair Therapy&mdash;purveyors of ultra-confidence for those who own their place in the world, control their own path and value their self image as a reflection of their distinct identity and personal achievement.  We are quality, extravagance, flamboyance, success and ambition. Loyal Hair Therapy is an attitude one that insists&mdash;<em>know who you are...<strong>own it.</strong></em></p>
				</div>
			</div>
			<div class="shadow"></div>
			<div class="expandImage"></div>
		</div>
		<div class="expandable">
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_two.jpg" class="accImage" />
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_two.jpg" class="bw" />
			<div class="con">
				<h2>Know who you are&mdash;own it</h2>
				<div class="exCon">
					<a href="/our-salon" class="exCTA bReplace fade">CALL TO ACTION</a>
					<p>Loyal Hair Therapy&mdash;purveyors of ultra-confidence for those who own their place in the world, control their own path and value their self image as a reflection of their distinct identity and personal achievement.  We are quality, extravagance, flamboyance, success and ambition. Loyal Hair Therapy is an attitude one that insists&mdash;<em>know who you are...<strong>own it.</strong></em></p>
				</div>
			</div>
			<div class="shadow"></div>
			<div class="expandImage"></div>
		</div>
		<div class="expandable">
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_three.jpg" class="accImage" />
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_three.jpg" class="bw" />
			<div class="con">
				<h2>Know who you are&mdash;own it</h2>
				<div class="exCon">
					<a href="/our-salon" class="exCTA bReplace fade">CALL TO ACTION</a>
					<p>Loyal Hair Therapy&mdash;purveyors of ultra-confidence for those who own their place in the world, control their own path and value their self image as a reflection of their distinct identity and personal achievement.  We are quality, extravagance, flamboyance, success and ambition. Loyal Hair Therapy is an attitude one that insists&mdash;<em>know who you are...<strong>own it.</strong></em></p>
				</div>
			</div>
			<div class="shadow"></div>
			<div class="expandImage"></div>
		</div>
		<div class="expandable">
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_four.jpg" class="accImage" />
			<img src="" alt="http://www.loyalhairtherapy.ca/wp-content/themes/lht/images/acc_four.jpg" class="bw" />
			<div class="con">
				<h2>Know who you are&mdash;own it</h2>
				<div class="exCon">
					<a href="/our-salon" class="exCTA bReplace fade">CALL TO ACTION</a>
					<p>Loyal Hair Therapy&mdash;purveyors of ultra-confidence for those who own their place in the world, control their own path and value their self image as a reflection of their distinct identity and personal achievement.  We are quality, extravagance, flamboyance, success and ambition. Loyal Hair Therapy is an attitude one that insists&mdash;<em>know who you are...<strong>own it.</strong></em></p>
				</div>
			</div>
			<div class="shadow"></div>
			<div class="expandImage"></div>
		</div>
	
	</div>	
</div>
*/

var countItems = 4; // pocet prvku ve slidu

$(document).ready(function () {
	
	$('.expandable').each(function (x) {
		$(this).attr("num", x);
		$(this).attr("focus", focus[x]);
		var toPull = Math.min(0, getPull(focus[x], (full_width / countItems)));

    //alert(toPull);

		$(this).find("img").css("left",toPull+"px");
		var bw = $(this).find(".bw:first");
		$(bw).load(function(){
			$(bw).fadeIn('normal', function(){
				load_count += 1;
				
				if(load_count == countItems) jacordLoaded();
			});
		});
		$(bw).attr("src",$(bw).attr("alt"));
	});

});

var accMin=960;
var accMax=960; // sirka celeho slidu - nekde ve stylech je stejne jeste napevno nacpana sirka (px nebo %)
var accSmall=176;
var accHeight=240;
var accLarge=372; // sirka rozjeteho bloku
var bgWidth=372; // sirka rozjeteho bloku
var active=1;
var conDef=65;
var full_width=960; 
var focus=[1,1,1,1];
var active_num=1;
var clickedSlide=1;
var miniPosition=0;
var miniIncrement=92;
var miniImages=0;

function getPull(point,full){
  var newPoint=-point+full/2;
  
  if(newPoint>0&&(full/2>point)){newPoint=0;} ;
  if(point>bgWidth/2){
    if((point-full/2)-(bgWidth-full)>0){
      newPoint+=(point-full/2)-(bgWidth-full);
    } ;
  } ;
  
  //alert(newPoint);
  
  return Math["round"](newPoint);
} ;



function clicked(){
  clickedSlide=$(this)["attr"]("num");
  
  if(active===this){return ;} ;
  if(active){
    $(active)["find"](".con:first")["stop"]()["clearQueue"]()["animate"]({top:accHeight-conDef},400);
  } ;
  
  $(".expandable")["each"](function (x){
    if(x.toString()!==clickedSlide){
      $(this)["removeClass"]("active");
      $(this)["stop"]()["clearQueue"]()["animate"]({width:accSmall+"px"},300);
      $(this)["find"](".accImage")["stop"]()["clearQueue"]()["animate"]({left:getPull(focus[x],accSmall)+"px"},300);
      $(this)["find"](".bw")["stop"]()["clearQueue"]()["animate"]({opacity:1,left:getPull(focus[x],accSmall)+"px"},300);
      $(this)["find"](".expandImage:first")["fadeIn"]();
      $(this)["find"](".exCon")["stop"]()["clearQueue"]()["fadeOut"]();
    } else {
      expandSlide(this,x);
    } ;
  } );
} ;


function expandSlide(targ,x){
  active=targ;
  $(targ)["addClass"]("active");
  $(targ)["find"](".exCon:first")["fadeIn"]();
  $(targ)["find"](".con:first")["stop"]()["clearQueue"]()["delay"](100)["animate"]({top:accHeight-$(targ)["find"](".con:first")["height"]()},400);
  $(targ)["stop"]()["clearQueue"]()["animate"]({width:accLarge+"px"},400);
  $(targ)["find"](".accImage")["stop"]()["clearQueue"]()["animate"]({left:getPull(focus[x],accLarge)+"px"},400);
  $(targ)["find"](".bw")["stop"]()["clearQueue"]()["animate"]({opacity:0,left:getPull(focus[x],accLarge)+"px"},400);
  $(targ)["find"](".expandImage:first")["fadeOut"]();
};



function set_fullWidth(w){
  full_width=w-80;
  full_width=Math["max"](accMin,Math["min"](full_width,accMax));
  full_width=(full_width-(full_width%12));
  accLarge=full_width/2;
  accLarge=bgWidth;
  /*accSmall=(full_width-accLarge)/countItems;*/} ;

function resizejacord(){
  set_fullWidth($(window)["width"]());
  $("#jacord")["stop"]()["clearQueue"]()["css"]("width",full_width+"px");
  $("#jacord")["stop"]()["clearQueue"]()["css"]("margin-left",-Math["round"](full_width/2)+"px");
  $(".expandable")["each"](function (x){
    var toPull=getPull(focus[x],accSmall);
  
    if(!active){
      toPull=getPull(focus[x],(full_width/4));
      $(this)["stop"]()["clearQueue"]()["css"]("width",full_width/4+"px");
    } else {
      if($(this)["attr"]("num")==$(active)["attr"]("num")){
        toPull=getPull(focus[x],accLarge);
        $(this)["stop"]()["clearQueue"]();
        $(this)["css"]("width",accLarge+"px");
      } else {
        $(this)["stop"]()["clearQueue"]();
        $(this)["css"]("width",accSmall+"px");
      } ;
    } ;
    $(this)["find"]("img")["stop"]()["clearQueue"]()["css"]("left",toPull+"px");
  });
};

var load_count=0;

function jacordLoaded(){
  set_fullWidth($(window)["width"]());
  $(".expandable")["each"](function (x){
    var useThisWidth=accSmall;
    
    if(x===1){useThisWidth=accLarge;} ;
    
    var toPull=Math["min"](0,getPull(focus[x],useThisWidth));
    
    $(this)["find"](".accImage")["attr"]("src",
    $(this)["find"](".accImage")["attr"]("alt"));
    $(this)["find"](".accImage")["show"]();
    $(this)["stop"]()["clearQueue"]()["delay"](500)["animate"]({width:useThisWidth+"px"},600);
    
    var todo=null;
    
    if(x===1){
      todo=function (){
        expandSlide($(".expandable").eq(1),0);
      } ;
    } ;
    
    $(this)["find"]("img")["stop"]()["clearQueue"]()["delay"](500)["animate"]({left:toPull+"px"},600,todo);
  } );
  
  $(window)["resize"](resizejacord);
  
  $("#jacord")["stop"]()["clearQueue"]()["delay"](480)["animate"]({width:full_width+"px",marginLeft:-Math["round"](full_width/2)+"px"},570);
  $(".expandable")["click"](clicked);$(".expandable")["hover"](function (){$(this)["find"](".bw")["animate"]({opacity:0});} ,function (){
    if(!active||(active&&$(active)["attr"]("num")!=$(this)["attr"]("num"))){
      $(this)["find"](".bw")["animate"]({opacity:1});
    } ;
  } );
} ;