var demoContainerInitialWidth = 50;
var demoContainerInitialHeight = 50;

var imageBaseDirectory = "images/iphone-demo";

var GalleryState = { 
    VoiceMarkLocation:0,
    NearbyVoiceMarks:1,
    MyVoiceMarks:2, 
    NearbyVoiceMarksInfoBranch:3,
    NearbyVoiceMarksHandsFreeBranch:4
};

var currentGallerState = GalleryState.VoiceMarkLocation;
var currentLocationInGallery = 0;
var currentGallery;
var currentGalleryMessages;
var currentGalleryUpperBound = 0;

// Images & Messages for "Voice Mark this Location"
var voiceMarkLocationImages = [ "DemoiPhoneA1.png", "DemoiPhoneA2.png", "DemoiPhoneA3.png" ];
var voiceMarkLocationMessages = [ "After entering a textual title, GeoGraffiti calls your iPhone enabling you to record and publish your Voice Mark message.<br/><br/>Press the 'Next' button to continue...", "Ring...Ring<br/><br/>Your phone is ringing.", "Answer the phone and state your location-specific message.<br/><br/>GeoGraffiti records your Voice Mark and geotags it to your location for others to benefit from." ];

// Images & Messages for "Nearby Voice Marks"
var nearbyVoiceMarksImages = [ "DemoiPhoneB1.png", "DemoiPhoneB2.png" ];
var nearbyVoiceMarksInfoBranch = [ "DemoiPhoneB3.png", "DemoiPhoneB4.png", "DemoiPhoneB5.png" ];
var nearbyVoiceMarksHandsFreeBranch = [ "DemoiPhoneB6.png", "DemoiPhoneB7.png" ];
var nearbyVoiceMarkMessages = [ "Search for existing Voice Marks in your vicinity.<br/><br/>GeoGraffiti automatically uses the location provided by your iPhone3G to search for Voice Marks nearby.", "Press 'Play' to stream the Voice Mark audio to your phone speaker, or if driving switch to the 'hands free' mode to instruct GeoGraffiti to call your phone and hear them via bluetooth.<br/><br/>Click a red circle to continue..." ];
var nearbyVoiceMarkMessagesInfoBranch = [ "While listening to a Voice Mark, view details about the location, get directions, hear responses left by others, or publish your own verbal response.", "GeoGraffiti automatically plugs into Google Maps to display directions to the Voice Mark location.", "Contribute additional information or express your opinion about this location by responding to an existing Voice Mark.<br/><br/>Your verbal response is attached to the original Voice Mark for others to hear." ];
var nearbyVoiceMarkMessagesHandsFreeBranch = [ "A useful feature for use while driving or walking is the 'hands free' mode located at the bottom of your Voice Mark search results.", "When activated, GeoGraffiti will call your phone and play back the audio Voice Marks over a standard telephone call." ];

// Images & Messages for "My Voice Marks"
var myVoiceMarksImages = [ "DemoiPhoneC1.png", "iblank.png" ];
var myVoiceMarkMessages = [ "View a log and hear any of the Voice Marks you have created.", "The End<br/><br/>Go Voice Mark the World!" ];

// Just FYI. You NEED to include a picture in images/iphone-demo/ called default-gallery-screenshot.png
// This will be the first image when the demo initially loads
// You can also change the default message text in <p> tag in index.html with id="demomessages-content"


function resetNavigationControls() {
    disablePrevious();
    enableNext();
}

function resetGalleryState() {
    currentGalleryState = GallerState.VoiceMarkLocation;
    resetNavigationControls();
}

function resetLocationInGallery() {
    currentLocationInGallery = 0;
}

function initializeGallery() {
    switch (currentGalleryState) {
        case GalleryState.VoiceMarkLocation:
            currentGallery = voiceMarkLocationImages;
            currentGalleryMessages = voiceMarkLocationMessages;
            break;
        case GalleryState.NearbyVoiceMarks:
            currentGallery = nearbyVoiceMarksImages;
            currentGalleryMessages = nearbyVoiceMarkMessages;
            break;
        case GalleryState.MyVoiceMarks:
            currentGallery = myVoiceMarksImages;
            currentGalleryMessages = myVoiceMarkMessages;
            break;
        case GalleryState.NearbyVoiceMarksInfoBranch:
            currentGallery = nearbyVoiceMarksInfoBranch;
            currentGalleryMessages = nearbyVoiceMarkMessagesInfoBranch;
            break;
        case GalleryState.NearbyVoiceMarksHandsFreeBranch:
            currentGallery = nearbyVoiceMarksHandsFreeBranch;
            currentGalleryMessages = nearbyVoiceMarkMessagesHandsFreeBranch;
            break;
        default:
            currentGallery = voiceMarkLocationImages;
            currentGalleryMessages = voiceMarkLocationMessages;
            break;
    }
    
    currentGalleryUpperBound = currentGallery.length - 1;
    currentLocationInGallery = 0;
    loadGalleryPicture();
}

function voiceMarkLocationButtonClicked(event) {
    resetNavigationControls();
    currentGalleryState = GalleryState.VoiceMarkLocation;
    initializeGallery();  
}

function voiceMarkInfoButtonClicked(event) {
    resetNavigationControls();
    currentGalleryState = GalleryState.NearbyVoiceMarksInfoBranch;
    initializeGallery();
    unregisterInfoAndHandsFreeListeners();
}

function handsFreeButtonClicked(event) {
    resetNavigationControls();
    currentGalleryState = GalleryState.NearbyVoiceMarksHandsFreeBranch;
    initializeGallery();
    unregisterInfoAndHandsFreeListeners();
}

function hearNearbyVoiceMarksButtonClicked(event) {
    resetNavigationControls();
    currentGalleryState = GalleryState.NearbyVoiceMarks;
    initializeGallery();
}

function myVoiceMarksButtonClicked(event) {
    resetNavigationControls();
    currentGalleryState = GalleryState.MyVoiceMarks;
    initializeGallery();   
}

function loadNextImage() {
    $("iphone-screenshot-picture").src = imageBaseDirectory + "/" + currentGallery[currentLocationInGallery];
}

function loadGalleryPicture() {
    new Effect.Fade("iphonescreenshot", { duration:0.5, queue:"end" });
    setTimeout("loadNextImage()", 400);
    new Effect.Appear("iphonescreenshot", { duration:0.5, from:0, to: 1, queue:"end" });
    
    $("demomessages-content").innerHTML = currentGalleryMessages[currentLocationInGallery];
}

function enablePrevious() {
    $("iphonegallerycontrol-previous-image").src = imageBaseDirectory + "/prev-on.gif";
}

function disablePrevious() {
    $("iphonegallerycontrol-previous-image").src = imageBaseDirectory + "/iblank.png";
}

function enableNext() {
    $("iphonegallerycontrol-next-image").src = imageBaseDirectory + "/next-on.gif";
}

function disableNext() {
    $("iphonegallerycontrol-next-image").src = imageBaseDirectory + "/iblank.png";
}

function registerInfoAndHandsFreeListeners() {
    $("infoButton").observe("click", voiceMarkInfoButtonClicked);
    $("infoButton").setStyle({ cursor:"pointer" });
    
    $("handsFreeButton").observe("click", handsFreeButtonClicked);
    $("handsFreeButton").setStyle({ cursor: "pointer" });
}

function unregisterInfoAndHandsFreeListeners() {
    $("infoButton").stopObserving("click", voiceMarkInfoButtonClicked);
    $("infoButton").setStyle({ cursor:"default" });
    
    $("handsFreeButton").stopObserving("click", handsFreeButtonClicked);
    $("handsFreeButton").setStyle({ cursor: "default" });
}

function nextButtonClicked(event) {
    if (currentGalleryState == GalleryState.NearbyVoiceMarks && currentLocationInGallery == 0) {
        registerInfoAndHandsFreeListeners();
    }
    else {
        unregisterInfoAndHandsFreeListeners();
    }
    
    if (currentLocationInGallery != currentGalleryUpperBound) {
        currentLocationInGallery = currentLocationInGallery + 1;
        loadGalleryPicture();
        if (currentLocationInGallery == currentGalleryUpperBound) {
            disableNext();
        }
        
        if (currentLocationInGallery == 1) {
            enablePrevious();
        }
    }
    else if (currentLocationInGallery == currentGalleryUpperBound) {
        disableNext();
        enablePrevious();
    }
}

function previousButtonClicked(event) {
    if (currentLocationInGallery != 0) {
        currentLocationInGallery = currentLocationInGallery - 1;
        if (currentLocationInGallery == 0) {
            disablePrevious();
        }
        
        if (currentLocationInGallery == (currentGalleryUpperBound - 1)) {
            enableNext();
        }
        loadGalleryPicture();
    }
}

function registerButtonListeners() {
    $("vmlocationbutton").observe("click", voiceMarkLocationButtonClicked);
    $("hearnearbyvmsbutton").observe("click", hearNearbyVoiceMarksButtonClicked);
    $("myvmsbutton").observe("click", myVoiceMarksButtonClicked);
    $("iphonegallerycontrolnext").observe("click", nextButtonClicked);
    $("iphonegallerycontrolprevious").observe("click", previousButtonClicked);
}

function endDemo() {
    $("democontainer").setStyle("visibility:hidden");
    Lightview.hide();
}

function launchiPhoneDemo() {
    registerButtonListeners();
    document.observe("lightview:opened", function(e) {
        $("democontainer").setStyle("visibility:visible");
    });
    
    document.observe("lightview:hidden", function(e) { 
        $("democontainer").setStyle("visibility:hidden");
    });
    
    Lightview.show({
        href: "#democontainer",
        rel: "inline",
        options : {
            width: 800,
            height: 500
        }
    });
}