//TODO Add Click events to image load callback function

//set path to image directory 
var imgPath = "images/homepage/"; 
 
//id of current Front frame or false if no frame is enlarged 
var currentFront = false; 
 
//z-index for top frame on pile/front Frame 
topZ = 3; 

var clicksOn = true;
 
function activateClicks() { 
    
    clicksOn = true;
    
} 
 
function deactivateClicks() {

    clicksOn = false;
    
} 
 
 
//animates frame to front, switches to large image 
function toFront(id) { 
    
    //console.log(id + "-toFront");
     
    deactivateClicks(); 
     
    //analytics event tracking 
    pageTracker._trackEvent('Homepage', 'Card Enlarged', id); 
     
    //set duration for animations 
    aDur = 1000; 
 
    //string for jquery selectors 
    idString = "#" + id; 
 
    //disable dragging on all frames 
    $(".frame","#frameContainer").draggable('disable'); 
 
    //get new properties 
    var newWidth = dragImg[id]['width_lg']; 
    var newHeight = dragImg[id]['height_lg']; 
    var newLeft = ($("#frameContainer").width() - (newWidth + 31)) / 2; 
    var newTop = ($("#frameContainer").height() - (newHeight + 62)) / 2; 
    var newSrc = imgPath + dragImg[id]['filename'] + '-lg.jpg'; 
    
    //set new properties 
    $(idString).attr("src", newSrc).addClass("frontFrame").css('z-index', topZ); 
     
    //setup position for text box 
    var textLeft = 31 + newLeft + (newWidth * .85); 
    var textTop = ($("#frameContainer").height() - 255) / 2;

    setTimeout(function() {
    	//populate textbox info 
    	$('#textTitle').html(dragImg[id]['title']);
    	$('#textMain').html(dragImg[id]['text']);

    	//activate custom fonts in textbox 
    	//Cufon.replace('#textTitle', { fontFamily: 'Gotham Medium' }); 
    	Cufon.replace('#textMain .subTitle', { fontFamily: 'Gotham Light' });
    	Cufon.replace('#textMain .textCopy', { fontFamily: 'Chronicle Text G1' });
    	Cufon.replace('#textMain a', { fontFamily: 'Chronicle Text G1' });
    }, 300);
    
    //track links to google analytics 
    $('#textMain a').bind('click',function(){pageTracker._trackEvent('Homepage', 'Card Link Clicked', id)}); 
     
    //animate textbox after delay
    setTimeout(function() {
    	//shows textbox 
    	$('#textTitle').attr('style', 'visbility: visible;');
    	$('#textBox').css(
            { 'display': 'block',
            	'z-index': topZ,
            	'top': textTop,
            	'left': textLeft,
            	'opacity': 0.1
            }).animate({ opacity: 0.97 }, { duration: 500, easing: 'easeOutSine'})
            .draggable({
            	containment: '#frameContainer',
            	cancel: '.noDrag'
            })
            .draggable('enable');

    }, (aDur - 200)); 
 
    //animate frame 
    $(idString).animate( 
            { 
                top: newTop, 
                left: newLeft, 
                width: newWidth, 
                height: newHeight, 
                padding: '31px' 
            }, 
            { 
                duration: aDur, 
                easing: "easeInOutExpo", 
                complete: function() { 
                    activateClicks(); 
                } 
            } 
        ); 
 
    //set new z-index 
    topZ++; 
 
    //alert("setting front to: " + id); 
    currentFront = id; 
} 
 
function toStack(tsId) { 
    
    //console.log(tsId + "-toStack");
     
    deactivateClicks(); 
     
    //remove event tracking click 
    $('#textMain a').unbind(); 
     
    idToStack = "#" + tsId; 
     
    $(".frame","#frameContainer").draggable('enable'); 
    $("#textBox","#frameContainer").draggable('disable'); 
    
    //get new properties 
    var smWidth = dragImg[tsId]['width_sm']; 
    var smHeight = dragImg[tsId]['height_sm']; 
    var smTop = dragImg[tsId]['top']; 
    var smLeft = dragImg[tsId]['left']; 
    var smSrc = imgPath + dragImg[tsId]['filename'] + '-sm.jpg'; 
     
    //hide info box 
    //$('#textTitle').css('opacity',0.0); 
     
    $(idToStack).removeClass("frontFrame"); 
 
    $('#textBox').animate({ 
        opacity: 0.05 
        },{ 
            duration: 500, 
            complete: function() { 
                $('#textBox').css('z-index', '0'); 
            } 
    }); 
 
 
    $(idToStack).animate( 
        { 
            top: smTop, 
            left: smLeft, 
            width: smWidth, 
            height: smHeight, 
            padding: '14px' 
        },{ 
            duration: aDur, 
            easing: "easeInOutExpo", 
            complete: function() { 
                $(this).attr("src", smSrc); 
                if (currentFront == false) { 
                    $('#textBox').css('z-index', '0'); 
                } 
                activateClicks(); 
            } 
    }); 
     
    currentFront = false; 
} 
$(document).ready(function() { 
    $("#loader").remove(); 
             
        //create frames within the frameContainer 
        for (var i in dragImg) { 
            if (i != 'prototype') { 
            var img = new Image(); 
            $(img) 
                .hide() 
                .attr('id',dragImg[i]['id']) 
                .addClass("frame") 
                .css({ 'z-index': '2', 'padding': '14px', 'left': dragImg[i]['left'], 'top': dragImg[i]['top'], 'width': dragImg[i]['width_sm'], 'height': dragImg[i]['height_sm'] }) 
                .appendTo("#frameContainer") 
                .load(function(){
                
                    //console.log($(this).attr('id') + "-loaded");
                 
                    $(this).fadeIn() 
                    //make this draggable 
                    .draggable( 
                        { 
                            //restrict dragging to frameContainer 
                            containment: 'parent', 
                            cursor: 'move', 
                            //move frame to top when dragged 
                            start: function() { 
                                $(this).css({ 'z-index': topZ }); 
                                topZ++; 
                            }, 
                            //store current position back into array 
                            stop: function() { 
                                dragImg[$(this).attr("id")]['top'] = $(this).css('top'); 
                                dragImg[$(this).attr("id")]['left'] = $(this).css('left'); 
                            } 
                        })
						//make this clickable
						.mousedown(function() {
							if(clicksOn == true){
								if (currentFront == false) {
									$(this).css({ 'z-index': topZ });
									topZ++;
								}
							}
							
						})
						.click(function(){
							if(clicksOn == true){
								thisID = $(this).attr("id");
				
								if (currentFront != false) {
									if (thisID == currentFront) {
										toStack(thisID);
									}
									else {
										toStack(currentFront);
										toFront(thisID);
									}
								}
								else {
									toFront(thisID);
								}
								topZ++;
							}
						});
                         
                    $('<img />') 
                        .attr('src',$(this).attr('src').replace("-sm.jpg","-lg.jpg")) 
                        .appendTo("#contentContainer"); 
                }) 
                .attr('src',imgPath + dragImg[i]['filename'] + "-sm.jpg"); 
            } 
        } 
    activateClicks();
    
    //return top frame to stack 
    $("#textBox").dblclick(function() {
        if(clicksOn == true){
			if (currentFront != false) { 
				toStack(currentFront);
				topZ++; 
			}
        }
    });
    
    $("#textClose").click(function() {
        if(clicksOn == true){ 
			if (currentFront != false) { 
				toStack(currentFront);
				topZ++; 
			}
        } 
    }); 
              
    $("#frameConainer *, img, a, li").disableTextSelect(); 
});